Skip to main content Home Creators syncfusion react-ui-components-skills syncfusion-react-ai-assistview
syncfusion-react-ai-assistview Implement the Syncfusion React AI AssistView component. Use this skill to handle AI-powered conversational interfaces, AssistView setup, conversation flow, speech input or output, file attachments, UI customization, state management, chain of thoughts reasoning visualization, generative UI with dynamic tools, and AI service integration such as OpenAI or Azure AI in React applications.
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/react-ui-components-skills --skill syncfusion-react-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-react-ai-assistview description Implement the Syncfusion React AI AssistView component. Use this skill to handle AI-powered conversational interfaces, AssistView setup, conversation flow, speech input or output, file attachments, UI customization, state management, chain of thoughts reasoning visualization, generative UI with dynamic tools, and AI service integration such as OpenAI or Azure AI in React applications. metadata {"author":"Syncfusion Inc","version":"34.1.29"}
Syncfusion React AI AssistView Component
Component Overview
The Syncfusion React AI AssistView component is a comprehensive interactive chat component designed for building AI-powered conversational interfaces. It provides:
Core Capabilities
Prompt-Response Management : Manage conversation history with automatic data collectionReal-time Streaming : Stream AI responses character-by-character for live typing effectsChain of Thoughts : Visualize AI reasoning process through thinking blocks with multi-stage workflow supportTemplate System : Customize every UI element (banners, prompt items, responses, suggestions, footer)Multi-View Support : Switch between conversation assist view and custom content viewsVoice Integration : Built-in Speech-to-Text (voice input) and Text-to-Speech (voice output)File Attachments : Upload and include files with promptsAdvanced Toolbars : Configurable toolbars for header, footer, responses, and promptsAI Service Integration : Direct integration with OpenAI, Azure OpenAI, and other AI services
Event-Driven Architecture : Hooks for prompt submission, changes, and component lifecycle
Key Features
Markdown Support : Render AI responses as formatted HTML via markdown parsingConversation History : Automatic tracking of all prompts and responsesSuggestion System : Display helpful prompt suggestions to guide usersAvatar Customization : Customize user and AI icons/avatarsScroll Management : Auto-scroll or manual scroll-to-bottom buttonClear Functionality : Clear current prompt or entire conversationRegenerate Responses : Request alternative AI responses for existing prompts without resubmitting queriesResponsive Design : Works on desktop and mobile with responsive layouts
Documentation and Navigation Guide
Getting Started
Install @syncfusion/ej2-react-interactive-chat package
Add CSS theme imports
Create basic component initialization
Render component to DOM
First working functional component example
Configuration Essentials
Set initial prompt text and placeholders
Configure prompt suggestions and suggestion headers
Customize user and AI avatar icons
Control clear button visibility
Enable/disable scroll-to-bottom functionality
Manage component instance via refs
Set component dimensions (height and width) Apply custom CSS classes for styling Control header visibility Configure globalization (locale, RTL support) Enable state persistence across sessions
Conversation Management
Initialize with pre-configured conversation data
Add responses (string or object format)
Access and manage conversation history
Work with PromptModel data structure
Render markdown in responses
Persist and restore conversations
Events and Interactions
Handle component lifecycle (created event)
Respond to prompt submissions (promptRequest event)
Track prompt text changes (promptChanged event)
Access detailed event arguments (PromptChangedEventArgs, PromptRequestEventArgs) Cancel prompt submissions programmatically Handle stop responding events for long operations Modify suggestions and toolbar items dynamically Implement event-driven workflows
Integrate with AI services via event handlers
Toolbar Customization
Configure four toolbar types (header, footer, response, prompt)
Add custom toolbar items
Control toolbar positioning (Inline vs Bottom)
Customize toolbar icons
Handle item click events
Configure all ToolbarItemModel properties (align, cssClass, disabled, tabIndex, template, type, visible) Create custom toolbar item templates Control item visibility and enabled state dynamically Set tab order for keyboard navigation Manage attachment button behavior
Enable regenerate responses functionality for multiple AI-generated responses Navigate between regenerated responses with previous/next buttons
File Attachments
Enable file attachment support
Configure upload endpoints (saveUrl, removeUrl)
Restrict file types (allowedFileType)
Set file size limits (maxFileSize)
Limit number of attachments (maximumCount)
Access attached files via attachedFiles array (FileInfo interface) Handle attachment lifecycle events (beforeAttachmentUpload, attachmentUploadSuccess, attachmentUploadFailure, attachmentRemoved) Validate files before upload Initialize prompts with pre-attached files Handle server-side file processing
Custom attachment templates (attachmentTemplate)
Custom Views
Create multiple views (Assist and Custom types)
Set view names and icons
Define view-specific templates
Configure activeView property to set initial view Switch between views programmatically Persist active view across sessions Conditionally set initial view based on user role or state Display side-by-side content panels
Use cases for multi-view layouts
Templating System
Customize banner templates (welcome content)
Create prompt item templates (user message display)
Design response item templates (AI response display)
Build suggestion item templates
Create custom footer templates
Access template context data
AI Service Integration
Integrate with Azure OpenAI, OpenAI, Gemini, Claude
Configure API credentials and authentication
Handle real-time prompt processing
Stream responses for live typing effects
Parse markdown responses with marked library
Error handling and rate limiting
Security considerations for API keys
Generative UI
Register custom tools with registerToolUI() method Configure tool templates and handlers for rendering Add interactive elements (charts, cards, custom tools) via blocks property Render multiple tools within single AI response Configure AI system prompts for structured JSON generation AI service integration with generative UI blocks
Speech Capabilities
Enable Speech-to-Text (voice input)
Configure speech recognition language
Handle interim transcripts while speaking
Implement Text-to-Speech (voice output) via Web Speech API
Convert AI responses to spoken audio Customize TTS with textToSpeechSettings (language, speechPitch, speechRate, volume, voice) Customize button labels and icons
Handle speech events (start, stop, transcript, error)
Browser compatibility notes
Chain of Thoughts
Visualize AI reasoning process with thinking blocks Configure thinking blocks with stages and status updates Add multi-stage reasoning workflows (completed, inprogress, failed) Customize thinking block templates Add inline context items with badges and tooltips Handle editableContextClicked events for interactive context Configure stage-level item templates Stream thinking blocks for real-time reasoning visualization
Methods and APIs
Use addPromptResponse() method
Execute prompts dynamically with executePrompt()
Scroll to bottom programmatically
Access component instance via refs
Manage component state
Common patterns and gotchas
Quick Start Example import { AIAssistViewComponent , PromptRequestEventArgs } from '@syncfusion/ej2-react-interactive-chat' ;
import * as React from 'react' ;
import * as ReactDOM from "react-dom" ;
function App (const assistInstance = React .useRef <AIAssistViewComponent >(null );
const onPromptRequest = (args : PromptRequestEventArgs setTimeout (() => {
let defaultResponse = 'For real-time AI processing, connect to your preferred service (OpenAI, Azure OpenAI, etc.).' ;
assistInstance.current .addPromptResponse (defaultResponse);
}, 1000 );
};
return (
<AIAssistViewComponent
id ="aiAssistView"
ref ={assistInstance}
promptRequest ={onPromptRequest}
prompt ={ 'Welcome ! How can I help ?'}
promptSuggestions ={[ 'Ask about features ', 'Get started guide ']}
/> ReactDOM .render (<App /> document .getElementById ('container' ));
Common Patterns
Pattern 1: Basic Chat with Suggestions Create a simple conversational interface with predefined suggestions:
Enable prompt suggestions to guide user interactions
Handle promptRequest event with simple responses
Display conversation history automatically
Pattern 2: AI Service Integration Connect to real AI services for intelligent responses:
Use promptRequest event to capture user input
Call AI API with prompt text
Stream response character-by-character for live effect
Parse markdown responses for formatted output
Pattern 3: Multi-View Dashboard Combine chat with supporting content:
Create Assist view for conversation
Add Custom view for settings/sidebar
Switch activeView based on user interaction
Share data between views
Pattern 4: Voice-Enabled Chat Enable hands-free interaction with speech:
Enable speechToTextSettings to capture voice
Configure Text-to-Speech for response audio
Use toolbar for voice control buttons
Handle speech events for status feedback
Pattern 5: File-Attached Prompts Support file uploads with prompts:
Enable attachments with enableAttachments property
Configure attachment endpoints and file restrictions
Include file data in prompt context
Send files to backend API
Pattern 6: Chain of Thoughts Reasoning Visualize AI's step-by-step reasoning process:
Inject AssistThinking module for thinking block support
Create thinking blocks with multiple reasoning stages
Use status updates (completed, inprogress, failed) for real-time progress
Stream thinking blocks alongside text responses
Add context items to highlight referenced tools or files
Customize block and stage templates for branded styling
Key Props & Configuration
Essential Props
promptRequest: Event handler when user submits promptprompt: Initial/default text in prompt inputpromptPlaceholder: Placeholder text for input areapromptSuggestions: Array of suggested promptsprompts: Pre-configured conversation data
Customization Props
promptIconCss: CSS class for user avatarresponseIconCss: CSS class for AI avatarshowClearButton: Show/hide clear button (default: false)showHeader: Show/hide component header (default: true)enableScrollToBottom: Show scroll-to-bottom button (default: true)height: Component height (string | number, default: '100%')width: Component width (string | number, default: '100%')cssClass: Custom CSS classes for stylingactiveView: Currently displayed view index (number, default: 0)
Template Props
bannerTemplate: Welcome banner contentpromptItemTemplate: User message displayresponseItemTemplate: AI response displaypromptSuggestionItemTemplate: Suggestion stylingfooterTemplate: Custom prompt input area
Advanced Props
enableAttachments: Enable file uploads (default: false)attachmentSettings: File upload configurationspeechToTextSettings: Voice input configurationtextToSpeechSettings: Text-to-speech configurationtoolbarSettings: Header toolbar configurationfooterToolbarSettings: Footer toolbar configurationresponseToolbarSettings: Response action toolbarpromptToolbarSettings: Prompt toolbar configurationblockTemplate: Custom template for thinking blocks and other response blocksitemTemplate: Custom template for individual stages within thinking blockslocale: Localization/globalization setting (default: 'en-US')enableRtl: Enable right-to-left rendering (default: false)enablePersistence: Enable state persistence (default: false)
Generative UI Props
blocksregisterToolUI()
Event Props
created: Component lifecycle eventpromptRequest: Prompt submission eventpromptChanged: Prompt text change eventstopRespondingClick: Stop button click eventbeforeAttachmentUpload: Before file upload eventattachmentUploadSuccess: File upload success eventattachmentUploadFailure: File upload failure eventattachmentRemoved: File removal eventeditableContextClicked: Fires when user clicks an inline context item in thinking blocks
Common Use Cases
Chat Bot with AI Integration Build a customer service chatbot connected to OpenAI or Azure services:
Set up component with suggestions
Handle promptRequest to send to AI API
Stream responses for real-time feedback
Use templates for branded appearance
Voice-Enabled Assistant Create hands-free voice interaction:
Enable speechToTextSettings
Configure Text-to-Speech toolbar button
Handle speech events for status
Provide visual feedback during voice capture
File Analysis Chat Allow users to upload and discuss files:
Enable attachments
Configure file restrictions (type, size, count)
Send files with prompts to backend
Display file information in conversation
Multi-Feature Dashboard Combine chat with settings and content:
Create multiple views (Assist + Custom)
Use templates for custom view content
Implement view switching logic
Share conversation state between views
Thinking-Enabled Reasoning Assistant Showcase AI's reasoning process for complex tasks:
Inject AssistThinking module for thinking block support
Configure thinking blocks with multiple stages
Stream blocks with status updates (inprogress → completed)
Add context items (tools, files, search results) within stages
Customize block templates for transparent reasoning display
Handle editableContextClicked for interactive exploration
Generative UI with Dynamic Interactive Tools Render dynamic interactive components and custom tools within AI responses:
Register custom tools (charts, cards, forms) using registerToolUI()
Configure tool templates for responsive UI rendering
Define blocks array with TextBlock and ToolBlock combinations
Configure AI system prompt for structured JSON generation
Send tool blocks within addPromptResponse() calls
Create rich, interactive experiences with AI-generated UI elements
More from this repository syncfusion-react-accordion Guide users to implement Syncfusion React Accordion component for collapsible content panels. Use this skill whenever the user needs to create expandable/collapsible sections, accordion layouts, tabbed content panels, multi-step forms, FAQs, or navigation with expandable items. Covers component setup, expand modes, animations, dynamic content loading, styling, events, lifecycle, React hooks integration, and complete API reference.
Create responsive navigation headers with AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building navigation elements, toolbars, action bars, or responsive headers with dynamic content layout. Includes color modes (Light, Dark, Primary, Inherit), size modes (Regular, Prominent, Dense), spacing, separators, and full accessibility support.
syncfusion-react-breadcrumb Implement and configure Syncfusion React Breadcrumb component for navigation paths, routing, and site hierarchy. Use this skill whenever users need breadcrumb navigation, want to create hierarchical navigation paths, display location breadcrumbs, handle navigation between pages, customize overflow behaviors, or integrate breadcrumbs with routing libraries.
Related occupations SOC
Based on SOC occupation classification
