Skip to main content Home Creators syncfusion angular-ui-components-skills syncfusion-angular-ai-assistview
syncfusion-angular-ai-assistview Implement the Syncfusion Angular AI AssistView component. Use this skill when you need to create conversational AI interfaces, integrate AI services, add chat-like UI, or create intelligent assistant applications. Includes setup, configuration, event handling, AI integrations (OpenAI, Gemini, Ollama), speech features, chain-of-thought reasoning, generative UI tool support, and customization. Use this skill for all AI AssistView component implementation needs.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-ai-assistviewThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name syncfusion-angular-ai-assistview description Implement the Syncfusion Angular AI AssistView component. Use this skill when you need to create conversational AI interfaces, integrate AI services, add chat-like UI, or create intelligent assistant applications. Includes setup, configuration, event handling, AI integrations (OpenAI, Gemini, Ollama), speech features, chain-of-thought reasoning, generative UI tool support, and customization. Use this skill for all AI AssistView component implementation needs. metadata {"author":"Syncfusion Inc","version":"34.1.29"}
Syncfusion Angular AI AssistView Component
Component Overview
The Syncfusion AI AssistView is a powerful Angular component that provides a ready-to-use interface for building conversational AI applications.
Key Capabilities:
Conversation Management - Manage prompt-response pairs with history, persistence, and markdown renderingAI Service Integration - Connect to OpenAI, Gemini, Ollama, Lite-LLM, and MCP providers with streaming supportChain of Thoughts - Visualize AI reasoning as collapsible thinking blocks with multi-stage, dynamic status updates via the injectable AssistThinking moduleGenerative UI - Render interactive tools, charts, and custom components within AI responses using blocks and registerToolUISpeech Features - Built-in speech-to-text with 11 configurable properties and 4 eventsToolbar System - Four toolbar types (header, prompt, response, footer) with custom actions and tag directives
View Management - Multiple views with programmatic activeView control and dynamic switching
Events & Interactions - Typed event arguments (PromptRequestEventArgs, PromptChangedEventArgs, StopRespondingEventArgs)
File Attachments - Support for file uploads with type/size restrictions and attachment click events
Templates - Customize prompts, responses, suggestions, and banners with flexible templates
Methods - Programmatically add/update responses, execute prompts, and control component behavior
Globalization - Full RTL support and localization for 12+ languages with locale-based formatting
Customizable UI - Height, width, CSS classes, HTML attributes, and theme customization
Documentation and Navigation Guide
Getting Started
Installation and dependency setup
Angular environment configuration
Basic component initialization
CSS imports and theme configuration
First working example
Core Features & Conversation Management
Setting prompt text and placeholders
Managing prompt-response collections
Markdown response rendering
Configuring prompt suggestions
Customizing user and assistant avatars
UI controls (clear button, scroll-to-bottom)
Component configuration (height, width, showHeader, cssClass, htmlAttributes)
State persistence with enablePersistence
Globalization and localization (locale property with 12+ languages)
RTL support with enableRtl for Arabic, Hebrew, Persian, Urdu
Appearance & Styling
Setting component width and height
Applying custom CSS classes
Theme customization
Responsive design patterns
Multiple Views & Custom Content
Adding custom view models
View types (Assist and Custom)
View configuration and naming
Managing multiple views within one component
Programmatic view switching with activeView property
Dynamic view navigation patterns
View history and breadcrumb navigation
Workflow-based view switching
Conditional view display based on user roles
Programmatic Control & Methods
Adding prompt responses (string and object
Complete event arguments reference section
PromptRequestEventArgs with 6 properties (prompt, attachedFiles, promptSuggestions, cancel, etc.)
PromptChangedEventArgs with 5 properties (value, previousValue, element, event)
StopRespondingEventArgs for canceling responses
AttachmentClickEventArgs with FileInfo interface
Production-ready examples with all event types formats)
Executing prompts dynamically
Response handling patterns
Programmatic interaction
Chain of Thoughts
Enabling reasoning visualization with the injectable AssistThinking module
Thinking block configuration (blocks property, blockType: 'thinking')
Streaming multi-step reasoning with addPromptResponse and isFinalUpdate
Adding stages with the stages array and ThinkingStage properties
Stage status indicators (completed, inprogress, failed)
Inline context items with editableContext and {index} placeholders
Handling the editableContextClicked event
Customizing rendering with blockTemplate and itemTemplate
Generative UI
Registering custom tools with registerToolUI (toolName, template, handler)
Configuring tool templates and interactive handler functions
Adding tool blocks to responses via addPromptResponse (toolName, props)
Configuring the AI service system prompt to return structured blocks JSON
Chaining follow-up prompts with executePrompt after tool interaction
Complete production example: recipe builder with custom and chart-based tools
Text to Speech
Enabling built-in Text-to-Speech with the e-assist-audio response toolbar item
Reading AI responses aloud via the browser's SpeechSynthesisUtterance API
Customizing speech behavior with textToSpeechSettings (language, speechPitch, speechRate, volume, voice)
Complete documentation for all 4 toolbar types
Header Toolbar (toolbarSettings) - Global actions and navigation
Prompt Toolbar (promptToolbarSettings) - Actions on user prompts
Response Toolbar (responseToolbarSettings) - Actions on AI responses
Footer Toolbar (footerToolbarSettings) - Input area customization
ToolbarItemModel interface with 10 properties
ToolbarItemClickedEventArgs with dataIndex handling
Tag directive approach: <e-toolbarsettings>, <e-toolbaritem>
Property binding approach for dynamic toolbar items
Common patterns, best practices, and troubleshootingest, promptChanged)
File upload events (beforeAttachmentUpload, attachmentUploadSuccess)
Event handling patterns and best practices
File Attachments
File attachment configuration
Upload handling and validation
File size and type restrictions
Attachment display and management
Custom attachment templates (attachmentTemplate)
Toolbar Configuration
Toolbar customization
Built-in speech-to-text with speechToTextSettings (recommended approach)
SpeechToTextSettingsModel with 11 configurable properties
ButtonSettingsModel and TooltipSettingsModel interfaces
4 speech events: onStart, onStop, transcriptChanged, onError
Event arguments: StartListeningEventArgs, StopListeningEventArgs, TranscriptChangedEventArgs, ErrorEventArgs
Language support with 10+ language codes (en-US, es-ES, fr-FR, de-DE, ja-JP, etc.)
Interim results handling with allowInterimResults
Custom Web Speech API implementation (alternative approach)
Text-to-speech setup and configuration
Browser compatibility and error handling
Regenerate responses with e-assist-regenerate icon, response navigation UI, and the regeneratedResponses property
Templates & Custom Rendering
Template system overview
Prompt templates
Response templates
Custom template creation
AI Service Integration
Azure OpenAI integration setup
Gemini integration
Lite-LLM integration
Model Context Protocol (MCP) integration
Ollama integration
Security best practices and API management
Speech Features
Speech-to-text setup and configuration
Text-to-speech setup and configuration
Audio handling
Browser compatibility considerations
Methods (Generative UI) Method Description registerToolUI({ toolName, template, handler })Registers a tool's rendering template and optional interaction handler. Call before referencing the tool in any response. executePrompt(prompt)Programmatically triggers a new prompt/response cycle, useful for chaining follow-up AI responses after a tool interaction.
Quick Start Example Here's a minimal working example to get started:
import { Component } from '@angular/core' ;
import { AIAssistViewModule } from '@syncfusion/ej2-angular-interactive-chat' ;
@Component ({
imports : [AIAssistViewModule ],
standalone : true ,
selector : 'app-root' ,
template : `
<div ejs-aiassistview
id='aiAssistView'
[promptSuggestions]="suggestions"
(promptRequest)="onPromptRequest($event)">
</div>
` ,
styles : [`
:host ::ng-deep #aiAssistView {
height: 100vh;
}
` ]
})
export class AppComponent {
suggestions = [
'What is Angular?' ,
'How to create components?' ,
'Explain dependency injection'
];
onPromptRequest (args : any setTimeout (() => {
const response = 'This is a sample response from your AI service.' ;
}, 1000 );
}
}
Common Patterns
Pattern 1: Basic Conversation Flow
Initialize component with suggestions
User enters prompt
promptRequest event firesCall your AI service
Use addPromptResponse() to display result
Conversation history maintained automatically
Pattern 2: AI Service Integration with Streaming
Enable streaming with [enableStreaming]="true"
Configure AI provider credentials (OpenAI, Gemini, etc.)
In promptRequest event, call provider API with streaming
Use ReadableStream for chunked responses
Handle stopRespondingClick event for cancellation
Update UI with addPromptResponse() incrementally
Pattern 3: Custom View Management with activeView
Define multiple view types (Assist, Custom)
Use [activeView]="currentIndex" to control display
Switch between views programmatically based on user action
Track view history for back/forward navigation
Each view can have different configuration
Maintain separate state per view
Pattern 4: Complete Toolbar Configuration
Configure header toolbar for global actions (new chat, export, settings)
Set up prompt toolbar for user prompt actions (edit, copy, retry)
Add response toolbar for AI response actions (copy, regenerate, like/dislike)
Configure footer toolbar for input actions (formatting, attachments)
Use tag directive or property binding approach
Handle itemClicked events with dataIndex for context
Pattern 5: Speech-Enabled Interface
Configure speechToTextSettings with language and options
Enable allowInterimResults for real-time transcription
Handle speech events: onStart, onStop, transcriptChanged, onError
Automatically submit recognized text as prompts
Provide visual feedback during listening state
Pattern 6: Event-Driven Actions with Typed Arguments
Use PromptRequestEventArgs to access prompt, attachedFiles, and cancel flag
Use PromptChangedEventArgs for real-time input validation
Handle StopRespondingEventArgs to cancel long-running requests
Use beforeAttachmentUpload for file validation
Use editableContextClicked for inline context badge interactions
Pattern 7: Chain of Thoughts (Reasoning Visualization)
Inject the AssistThinking module via AIAssistView.Inject(AssistThinking)
Push blocks with blockType: 'thinking' via addPromptResponse, using isFinalUpdate: false while streaming
Update stages[].status (inprogress → completed/failed) as reasoning progresses
Use editableContext with {index} placeholders for clickable inline references
Deliver the final response text alongside the last isFinalUpdate: true call
Optionally customize rendering with blockTemplate (full block) or itemTemplate (per-stage)
Pattern 8: Generative UI (Interactive Tools in Responses)
Register each tool once via registerToolUI({ toolName, template, handler }), typically in ngAfterViewInit
Reference registered tools in responses using blocks: [{ blockType: 'tool', toolName, props }]
Combine text and tool blocks in the same blocks array for narrative + interactive content
Configure the AI system prompt to return a structured blocks JSON array for dynamic tool invocation
Use executePrompt to trigger a follow-up AI response after a user interacts with a rendered tool
Parse AI-returned JSON defensively and fall back to plain text on malformed output
Key Properties Property Type Default When to Use promptstring ''Pre-fill prompt text promptPlaceholderstring 'Type prompt for assistance...'Guide user input promptSuggestionsstring[] []Provide quick starting prompts promptsobject[] []Initialize conversation history showClearButtonboolean falseShow button to clear input enableScrollToBottomboolean trueShow scroll-to-bottom indicator blockTemplatestring | object ''Customize rendering of thinking blocks itemTemplatestring | object ''Customize rendering of individual thinking stage items
Layout & Appearance Property Type Default When to Use widthstring | number '100%'Set container width heightstring | number '100%'Set container height cssClassstring ''Apply custom CSS styling and themes showHeaderboolean trueControl header visibility htmlAttributesobject {}Add custom HTML attributes (aria-, data- , etc.)
Streaming & Features Property Type Default When to Use enableStreamingboolean falseEnable real-time streaming responses speechToTextSettingsSpeechToTextSettingsModel nullConfigure built-in speech recognition textToSpeechSettingsTextToSpeechSettingsModelnullConfigure built-in Text-to-speech support activeViewnumber 0Programmatically switch between views
Globalization Property Type Default When to Use localestring 'en-US'Set language/culture (en-US, es-ES, fr-FR, de-DE, ja-JP, ar-SA, etc.) enableRtlboolean falseEnable right-to-left text direction (Arabic, Hebrew, Persian, Urdu) enablePersistenceboolean falseSave component state between page reloads
Toolbar Configuration Property Type Default When to Use toolbarSettingsToolbarSettingsModel nullConfigure header toolbar (global actions) promptToolbarSettingsPromptToolbarSettingsModel nullConfigure prompt toolbar (edit, copy, retry) responseToolbarSettingsResponseToolbarSettingsModel nullConfigure response toolbar (copy, regenerate, like/dislike) footerToolbarSettingsFooterToolbarSettingsModel nullConfigure footer toolbar (formatting, attachments)
Common Use Cases
Customer Support Chatbot: Build customer service interfaces with knowledge base integrationCode Assistant: Create coding helpers with AI that can review and suggest codeContent Writer Assistant: Implement writing tools with grammar and style suggestionsData Analysis Tool: Create interfaces for users to query and analyze data through natural languageLearning Platform: Build educational assistants that answer student questionsInternal Knowledge Bot: Create enterprise assistants for company documentation and FAQsMulti-language Support: Implement translation and localization featuresAccessibility Assistant: Provide reading aid or instruction assistanceReasoning Visualization: Build interfaces that surface AI reasoning via collapsible Chain of Thoughts blocksGenerative UI Applications: Render interactive tools and charts (cards, gauges, custom widgets) inline within AI responses
More from this repository syncfusion-angular-calendars Comprehensive guide for implementing Syncfusion Angular Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and controlled component patterns in Angular applications.
syncfusion-angular-data-manager Implements Syncfusion Angular DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
Implements Syncfusion Angular Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
Related occupations SOC
Based on SOC occupation classification
