Syncfusion ASP.NET Core AI AssistView Control

Overview

The Syncfusion AI AssistView is a comprehensive component for building AI-powered assistance interfaces in ASP.NET Core applications. It provides support for:

Configurable prompt suggestions with custom headers
Prompt-response collections with markdown rendering
File attachments with validation and size restrictions
Custom views and templates for complete UI control
Event-driven architecture for real-time interaction
Toolbar customization for both header and footer areas
Icon customization for prompts and responses

Key Features

Prompt Suggestions: Guide users with predefined suggestions
Markdown Support: Render formatted content with built-in markdown converter
Custom Templates: Customize banners, prompts, responses, and suggestions
File Attachments: Enable users to attach files with the prompt
Multiple Views: Support for Assist and Custom view types
Toolbar Customization: Customize header and footer toolbar items
Icon Customization: Personalize prompt and response avatars
Stop Responding: Cancel in-progress AI responses with the stop responding button
Header Visibility: Show or hide the header bar via showHeader
Helpful Feedback: Mark responses as helpful using PromptModel.isResponseHelpful
Event Driven: Full event lifecycle for complete control
Methods: Dynamic prompt execution and response management
Regenerate Responses: Request alternative AI responses for existing prompts without resubmission
Thinking Capabilities: Visualize AI reasoning stages and workflow through chain-of-thoughts blocks
Generative UI: Render dynamic interactive tools and UI elements within AI responses
Text-to-Speech: Convert AI responses into spoken audio with customizable voice settings
Speech-to-Text: Convert spoken words into text using the device's microphone for voice-based prompt input

Navigation Guide

Getting Started

📄 Read: [references/getting-started.md](references/getting-started.md)

Installation and NuGet package setup
TagHelper registration and configuration
CSS/script resource linking
Basic control initialization
Prompt suggestions and responses configuration

Configuring Prompts and Responses

📄 Read: [references/assist-view-configuration.md](references/assist-view-configuration.md)

Setting prompt text and placeholders
Prompt-response collection initialization
Markdown response rendering
Prompt suggestions with headers
Avatar customization (prompt and response icons)
Clear button and scroll-to-bottom features
Show or hide the header bar (showHeader)
Marking a response as helpful (PromptModel.isResponseHelpful)

Appearance and Styling

📄 Read: [references/appearance-customization.md](references/appearance-customization.md)

Width and height configuration
CSS class customization
Custom styling and theming
Component container styling

Handling Events

📄 Read: [references/events-handling.md](references/events-handling.md)

Created event for initialization
PromptRequest event for handling prompts (with cancel, attachedFiles, promptSuggestions)
PromptChanged event for text changes (with value, previousValue)
StopRespondingClick event for cancelling in-progress responses
Attachment events (upload, success, failure, removed, click)

Using Methods and APIs

📄 Read: [references/methods-and-apis.md](references/methods-and-apis.md)

addPromptResponse() method for string and object responses
executePrompt() method for dynamic prompt execution
Public method signatures and usage patterns

Templates and Custom Views

📄 Read: [references/templates-and-views.md](references/templates-and-views.md)

Banner templates for welcome messages
Prompt item templates for custom prompt rendering
Response item templates for response customization
Suggestion item templates
Footer templates for custom actions
Custom view types and active view configuration

Toolbar Configuration

📄 Read: [references/toolbar-and-items.md](references/toolbar-and-items.md)

Footer toolbar items and positioning
Header toolbar configuration with icons
Item types (Button, Separator, Input)
Item alignment, visibility, and disabled states
Tooltip text and CSS classes
Built-in toolbar items for prompts and responses
Custom toolbar items with templates and events
ToolbarItemClickedEventArgs — item, dataIndex, cancel, event, name
itemClicked event for prompt and response toolbar items
Regenerate responses with alternative response navigation

File Attachments

📄 Read: [references/file-attachments.md](references/file-attachments.md)

Enabling file attachments
Setting save and remove URLs
File type restrictions (allowedFileTypes)
Maximum file size configuration
Maximum attachment count limits
Custom attachment templates (attachmentTemplate)
Pre-loading attached files in prompts (PromptModel.attachedFiles)

Advanced Response Features

Thinking Capabilities

📄 Read: [references/chain-of-thoughts.md](references/chain-of-thoughts.md)

Visualizing AI reasoning stages (thinking blocks, stages, status updates)
Configuring thinking blocks with blockType, title, content, and collapsed state
Adding stages with completion status (completed, inprogress, failed)
Inline context items in stages with clickable badges
editableContextClicked event for custom context actions
Block template and item template customization

Generative UI

📄 Read: [references/generative-ui.md](references/generative-ui.md)

Registering custom tools with registerToolUI method
Tool templates and handlers for dynamic UI rendering
Adding tools to prompt responses via blocks property
Configuring AI service system prompts for generative responses
Tool blocks with toolName and props for interactive components

Text-to-Speech

📄 Read: [references/text-to-speech.md](references/text-to-speech.md)

Enabling built-in Text-to-Speech functionality with e-assist-audio icon
Converting AI responses into spoken audio (Web Speech API)
Configuring speech settings with e-aiassistview-textToSpeechSettings tag helper
Speech customization properties (language, speechPitch, speechRate, volume, voice)

Speech-to-Text

📄 Read: [references/speech-to-text.md](references/speech-to-text.md)

Enabling built-in Speech-to-Text functionality for voice input
Converting spoken words into text using Web Speech API
Configuring speech recognition with e-aiassistview-speechToTextSettings tag helper
Speech recognition properties (language, buttonSettings, tooltipSettings, allowInterimResults)
Handling speech events (onStart, onStop, transcriptChanged, onError)
Real-time transcription with interim results support

Quick Start

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated"></ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView control to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

Common Patterns

Pattern 1: Adding Prompt Suggestions

@using Syncfusion.EJ2.InteractiveChat;

@{
    var suggestions = new string[] { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" 
        promptSuggestions="@suggestions" 
        promptRequest="onPromptRequest" 
        created="onCreated">
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            assistObj.addPromptResponse('Response for: ' + args.prompt);
        }, 2000);
    }
</script>

Pattern 2: Markdown Response Rendering

@using Syncfusion.EJ2.InteractiveChat;
@using System.Text.Json;

@{
   var markdownData = new[]
    {
        new {
            prompt = "What is Markdown?",
            response = "# Markdown Guide\n\nMarkdown is a lightweight markup language:\n\n- **Headers:** Use `#`, `##`, `###`\n- **Bold:** `**text**` for bold\n- **Lists:** Use `-` for bullet points",
            suggestions = new string[] {"How do I use bold?"}
        }
    };
    var promptsJson = JsonSerializer.Serialize(markdownData);
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" 
        prompts="@markdownData" 
        promptRequest="onPromptRequest" 
        created="onCreated">
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    var prompts = @Html.Raw(promptsJson);
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
            if (foundPrompt) {
                assistObj.addPromptResponse(foundPrompt.response);
            }
        }, 2000);
    }
</script>

Pattern 3: File Attachments

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" 
        enableAttachments="true" 
        promptRequest="onPromptRequest" 
        created="onCreated">
        <e-aiassistview-attachmentsettings 
            [email protected]("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save") 
            [email protected]("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove")>
        </e-aiassistview-attachmentsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            assistObj.addPromptResponse('Processing your prompt with attachments');
        }, 2000);
    }
</script>

syncfusion-aspnetcore-ai-assistview

Installation

Summary

Similar popular skills

Also in this package

Agent compatibility

Repository health

Skill metadata

Package contents

History

SKILL.md