Syncfusion Aspnetmvc AI Assistview

Syncfusion ASP.NET MVC AI AssistView

A full-featured conversational AI interface component for ASP.NET MVC. Renders prompt/response conversations, supports prompt suggestions, custom views, toolbar customization, file attachments, speech-to-text, and integrates with major AI backends.

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet installation and namespace setup
• CDN stylesheet and script references
• ScriptManager registration
• Minimal AIAssistView render
• Wiring PromptRequest and addPromptResponse
• Configuring PromptSuggestions with matched responses

Assist View Configuration

📄 Read: references/assist-view-config.md

• Setting prompt text (Prompt property)
• Prompt placeholder text (PromptPlaceholder)
• Pre-loading prompt/response pairs (Prompts collection)
• Rendering markdown responses
• Prompt suggestions and suggestion headers
• Prompter avatar icon (PromptIconCss)
• Responder avatar icon (ResponseIconCss)
• Show/hide clear button (ShowClearButton)
• Scroll-to-bottom indicator (EnableScrollToBottom)

Appearance

📄 Read: references/appearance.md

• Setting control width (Width property)
• Setting control height (Height property)
• Custom CSS class (CssClass property)

Templates

📄 Read: references/templates.md

• Banner template (BannerTemplate) — welcome notes, branding
• Prompt item template (PromptItemTemplate) — custom prompt bubbles
• Response item template (ResponseItemTemplate) — custom response bubbles
• Prompt suggestion item template (PromptSuggestionItemTemplate)
• Footer template (FooterTemplate) — fully custom input area

Toolbar Items

📄 Read: references/toolbar-items.md

• Footer toolbar (send, attachment, positioning, custom items, ItemClick)
• Header toolbar items (iconCss, type, text, visible, disabled, tooltip, cssClass, align, tabIndex, template, ItemClicked)
• Built-in prompt toolbar (edit, copy) and response toolbar (copy, like, dislike)
• Custom prompt toolbar items (PromptToolbarSettings)
• Custom response toolbar items (ResponseToolbarSettings)
• Regenerate Responses — enable regenerate button, request alternative AI responses, navigate through multiple responses (RegeneratedResponses property)

Generative UI

📄 Read: references/generative-ui.md

• Register custom tools (registerToolUI method)
• Define tool templates and handlers for interactive components
• Add tools to AI responses via blocks property with blockType: 'tool'
• Examples: weather cards, recipe builders, interactive forms
• Configure AI system prompt for structured generative UI block responses
• Dynamic tool rendering within conversation context

Chain of Thoughts (Thinking)

📄 Read: references/chain-of-thoughts.md

• Visualize AI reasoning process with thinking blocks
• Define reasoning stages with blockType: 'thinking' and stages array
• Stage status options: completed, inprogress, failed
• Add collapsible thinking headers and timeline visualization
• Configure thinking block templates (blockTemplate, itemTemplate)
• Support for inline context items with clickable badges
• Ideal for extended reasoning models (Claude 3.5, GPT-o1, etc.)

Custom Views

📄 Read: references/custom-views.md

• Adding views via Views collection
• View type (Assist vs Custom)
• View name, icon (IconCss), and ViewTemplate
• Setting active view (ActiveView)

File Attachments

📄 Read: references/file-attachments.md

• Enabling attachments (EnableAttachments)
• Configuring AttachmentSettings (SaveUrl, RemoveUrl)
• Restricting file types (AllowedFileType)
• File size limit (MaxFileSize)
• Maximum attachment count (MaximumCount)

Events

📄 Read: references/events.md

• Created — after control renders
• PromptRequest — when user submits a prompt
• PromptChanged — when prompt text changes
• Attachment events: BeforeAttachmentUpload, AttachmentUploadSuccess, AttachmentUploadFailure, AttachmentRemoved, AttachmentClick

Methods

📄 Read: references/methods.md

• addPromptResponse(string) — add response to last prompt
• addPromptResponse(object) — add new prompt+response pair
• executePrompt(string) — programmatically trigger a prompt

AI Integrations & Speech

📄 Read: references/ai-integrations.md

• Azure OpenAI integration (controller + view wiring)
• Gemini AI integration (Mscc.GenerativeAI NuGet)
• Ollama / local LLM integration (Microsoft.Extensions.AI)
• LiteLLM proxy integration (OpenAI-compatible API)
• Speech-to-Text (SpeechToTextSettings: enable, lang, buttonSettings, tooltipSettings, interimResults, events)
• Text-to-Speech (TTS) (TextToSpeechSettings: language, speechPitch, speechRate, volume, voice; enable via e-assist-audio toolbar icon)
• Streaming response pattern (character-by-character with marked.js)

Quick Start Example

@using Syncfusion.EJ2.InteractiveChat
@using Newtonsoft.Json

@{
    var suggestions = new string[] {
        "How do I prioritize my tasks?",
        "How can I improve my time management skills?"
    };
    var prompts = new[]
    {
        new { prompt = "How do I prioritize my tasks?",
              response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps.",
              suggestionData = new List<string>() }
    };
    var promptsJson = Html.Raw(JsonConvert.SerializeObject(prompts));
}

<div style="height: 350px; width: 650px;">
    @Html.EJS().AIAssistView("aiAssistView")
        .PromptSuggestions(suggestions)
        .PromptRequest("onPromptRequest")
        .Created("onCreated")
        .Render()
</div>

<script>
    var assistObj;
    var prompts = @Html.Raw(promptsJson);

    function onCreated() { assistObj = this; }

    function onPromptRequest(args) {
        setTimeout(function () {
            var found = prompts.find(p => p.prompt === args.prompt);
            var defaultResponse = 'Connect to your AI service for real-time responses.';
            assistObj.addPromptResponse(found ? found.response : defaultResponse);
        }, 2000);
    }
</script>

Common Patterns

Pattern: Streaming Response with Markdown

// Include marked.js: <script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
async function streamResponse(responseText) {
    let current = '';
    let i = 0;
    while (i < responseText.length) {
        current += responseText[i++];
        if (i % 10 === 0 || i === responseText.length) {
            assistObj.addPromptResponse(marked.parse(current), i === responseText.length);
            assistObj.scrollToBottom();
        }
        await new Promise(r => setTimeout(r, 15));
    }
}

Pattern: Server-side AI Proxy (controller)

[HttpPost]
public async Task<IActionResult> GetAIResponse([FromBody] PromptRequest request)
{
    if (string.IsNullOrEmpty(request?.Prompt))
        return BadRequest("Prompt cannot be empty.");
    // Call AI provider and return Json(responseText)
}
public class PromptRequest { public string Prompt { get; set; } }

Pattern: Reset conversation on toolbar click

function toolbarItemClicked(args) {
    if (args.item.iconCss === 'e-icons e-refresh') {
        assistObj.prompts = [];
        assistObj.promptSuggestions = suggestions;
    }
}

Key Properties at a Glance

Key Events

Key Methods