syncfusion-vue-ai-assistview

Syncfusion Vue AI AssistView Component

The AI AssistView component provides a modern conversational interface for building AI-powered applications in Vue. It enables users to submit prompts and receive AI responses in a clean, chat-like interface with support for markdown rendering, custom suggestions, and seamless AI service integration.

Component Overview

The AI AssistView component provides:

• Prompt input area with customizable placeholder and initial text
• Conversation history with automatic scrolling to latest messages
• Suggestion chips for guided user interactions
• Custom avatars for users and AI responses
• Markdown rendering for formatted AI responses
• Event system for handling prompts and responses
• Template support for custom banner and layout designs
• Telemetry tracking for AI interaction metrics (duration, tokens, tool calls, model info)
• Mentions in the prompt editor for referencing configured items (agents, commands, etc.)
• Theme integration with Syncfusion's material, bootstrap, and tailwind themes

Navigation Guide

Choose the reference that matches your task:

Getting Started

📄 Read: references/getting-started.md

• Installation of @syncfusion/ej2-vue-interactive-chat
• Vue 2 project setup with Vue-CLI
• Registering the component
• Importing CSS themes
• Running your first AI AssistView application

Configuring Prompts & Responses

📄 Read: references/prompt-configuration.md

• Setting initial prompt text with prompt property
• Customizing placeholder text with promptPlaceholder
• Managing conversation history with prompts collection
• Storing user queries and AI responses
• Clearing conversation history

Adding Suggestions & Guidance

📄 Read: references/prompt-suggestions.md

• Configuring suggestion chips with promptSuggestions
• Customizing suggestions header with promptSuggestionsHeader
• Updating suggestions dynamically based on context
• Creating task-specific suggestion flows
• Improving user experience with smart suggestions

Customizing Appearance

📄 Read: references/customizing-appearance.md

• Customizing user avatar icon with promptIconCss
• Changing AI response avatar with responseIconCss
• Showing/hiding clear button with showClearButton
• Styling the component with themes (material3, bootstrap, tailwind)
• Applying custom CSS classes

Handling Events

📄 Read: references/events.md

• All 9 component events (created, promptRequest, promptChanged, beforeAttachmentUpload, attachmentUploadSuccess, attachmentUploadFailure, attachmentRemoving, attachmentRemoved, attachmentClick, mentionSelect)
• Processing prompts asynchronously with addPromptResponse
• Implementing custom event handlers
• Managing event arguments and properties
• Async/await patterns for AI service calls
• Error handling in event callbacks

Using Templates

📄 Read: references/templates.md

• Creating custom banner templates
• Using template syntax
• Customizing template context and variables
• Styling template content with CSS
• Dynamic template rendering based on state
• Template best practices and patterns

Templates and Customization

📄 Read: references/templates-and-customization.md

• Custom banner templates with bannerTemplate
• Custom footer templates with footerTemplate
• Customizing prompt items with promptItemTemplate
• Styling suggestion items with promptSuggestionItemTemplate
• Customizing response items with responseItemTemplate
• Customizing the response loader with responseAnimationTemplate
• Configuring prompt toolbar with promptToolbarSettings
• Configuring response toolbar with responseToolbarSettings
• Setting up multiple views with views property
• Advanced template patterns and best practices

Chain of Thoughts & Reasoning Blocks

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

• Enabling thinking blocks with AssistThinking module
• Visualizing AI reasoning process with thinking blocks
• Configuring stages with status indicators (completed, inprogress, failed)
• Adding inline context items with editable badges
• Customizing thinking blocks with templates
• Configuring timeline stage item templates
• Streaming reasoning blocks in real-time

Generative UI & Dynamic Components

📄 Read: references/generative-ui.md

• Registering custom tools with registerToolUI method
• Creating interactive UI components within AI responses
• Configuring tool templates and handler functions
• Adding tool blocks to responses via addPromptResponse
• Integrating dynamic gauges, cards, and custom tools
• Configuring AI service for structured JSON responses
• Tool props and component interaction patterns

Rendering Markdown & Rich Content

📄 Read: references/markdown-and-responses.md

• Rendering markdown in AI responses
• Supported markdown syntax (bold, italic, headers, lists, code blocks)
• Streaming markdown content
• HTML response rendering
• Formatting tips for better readability
• Edge cases and troubleshooting

Advanced Features & AI Integration

📄 Read: references/advanced-features.md

• Enabling scroll-to-bottom indicator with enableScrollToBottom
• Configuring toolbar with toolbarSettings
• Advanced styling techniques
• RTL (Right-to-Left) support
• Performance optimization
• Handling long conversations

Connecting to AI Services

📄 Read: references/ai-integration.md

• Integrating with OpenAI, Gemini, Claude, or other AI APIs
• Managing API credentials securely
• Real-time vs mock response patterns
• Adding responses programmatically
• Error handling and retry logic
• Rate limiting and timeout management

Component Methods

📄 Read: references/methods.md

• addPromptResponse() - Add AI responses to prompts
• executePrompt() - Programmatically trigger prompts
• scrollToBottom() - Scroll to latest message
• Method signatures and parameters
• Streaming responses with isFinalUpdate
• Best practices and common patterns

Speech-to-Text Integration

📄 Read: references/speech-to-text.md

• Enabling voice input with speechToTextSettings
• Configuring microphone button and tooltips
• Language support and interim results
• Speech recognition events (onStart, onStop, transcriptChanged, onError)
• Browser compatibility and permissions
• Real-time transcript display

Text-to-Speech Conversion

📄 Read: references/text-to-speech.md

• Enabling audio playback with e-assist-audio toolbar item
• Built-in Text-to-Speech functionality using Web Speech API
• Customizing speech with textToSpeechSettings (language, pitch, rate, volume)
• Configuring voice selection and language support
• Browser compatibility and voice availability
• Handling audio playback controls and status feedback

File Attachments

📄 Read: references/attachments.md

• Enable file upload with enableAttachments property
• Configure attachmentSettings (saveUrl, removeUrl, file restrictions)
• File validation (allowedFileTypes, maxFileSize, maximumCount)
• Attachment events (beforeUpload, uploadSuccess, uploadFailure, removing, removed, click)- Working with attached files in prompts
• Custom attachment templates (attachmentTemplate)
• Upload security and best practices

Multi-View Navigation

📄 Read: references/views-and-navigation.md

• Configure multiple views with views property
• Switch active view using activeView property
• AssistViewModel structure and properties
• Custom view templates
• Dynamic view management
• View type: Assist vs Custom

Toolbar Configuration

📄 Read: references/toolbar-configuration.md

• Configure prompt toolbar with promptToolbarSettings
• Configure response toolbar with responseToolbarSettings
• Configure footer toolbar with footerToolbarSettings
• ToolbarItemModel properties (text, icon, align, tooltip, etc.)
• Toolbar positioning (Bottom, Inline)
• Setting toolbar item alignment with align (Left / Center / Right)
• Common toolbar actions and patterns

Streaming Responses

📄 Read: references/streaming-responses.md

• Enable streaming with enableStreaming property
• Implement character-by-character or chunk-based streaming
• Progressive response rendering
• Integration with OpenAI and other APIs
• Stream error handling
• User-controlled streaming speed

Telemetry & AI Metrics

📄 Read: references/telemetry.md

• Enabling telemetry with telemetrySettings.enable
• Configuring captured metrics with telemetrySettings.metrics
• Intercepting reports with telemetrySettings.beforeReport
• Passing model/token data via addPromptResponse(response, isFinal, telemetryData)
• Surfacing custom key/value pairs through customAttributes
• Telemetry button behavior, duration formatting, and regenerate flow

Mentions in the Prompt Editor

📄 Read: references/mentions.md

• Configuring the mentions property (trigger char, data source, fields, query, filter, templates, popup size)
• Hooking the mentionSelect event for custom actions
• Using displayTemplate / itemTemplate / noRecordsTemplate to customize rendering
• Switching showMentionChar for @-style vs /-style command mentions

Header, Locale & Sizing

📄 Read: references/header-locale-sizing.md

• Control header display with showHeader property
• Internationalization with locale property (13+ languages)
• Responsive sizing with height and width properties
• State persistence with enablePersistence
• Responsive layout patterns
• Full screen and dialog implementations

Quick Start Example

Here's a minimal setup using Composition API:

<template>
  <div id="container" style="height: 500px; width: 700px;">
    <ejs-aiassistview
      id="aiAssistView"
      ref="aiassist"
      prompt="How can I help you today?"
      :prompt-suggestions="suggestions"
      :prompt-request="onPromptRequest"
    />
  </div>
</template>

<script setup>
import { AIAssistViewComponent as EjsAiassistview } from "@syncfusion/ej2-vue-interactive-chat";
import { ref } from "vue";

const aiassist = ref(null);

const suggestions = [
  "What is AI?",
  "How do I get started?",
  "Tell me a joke"
];

const onPromptRequest = (args) => {
  setTimeout(() => {
    const response = `You asked: "${args.prompt}". 
    To connect real AI, use the OpenAI API or similar service with your API key.`;
    aiassist.value.addPromptResponse(response);
  }, 1000);
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/ai-assistview/index.css";
</style>

Common Patterns

Pattern 1: Basic AI Chatbot

Use the promptRequest event to handle user input and call an AI API:

const onPromptRequest = async (args) => {
  try {
    const response = await fetch('https://api.openai.com/v1/completions', {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${apiKey}` },
      body: JSON.stringify({ prompt: args.prompt, max_tokens: 150 })
    });
    const data = await response.json();
    aiassist.value.addPromptResponse(data.choices[0].text);
  } catch (error) {
    aiassist.value.addPromptResponse('Error: Could not process request');
  }
};

Pattern 2: Pre-configured Suggestions

Create domain-specific suggestion flows to guide users:

const suggestions = [
  "Show me productivity tips",
  "How do I code in Vue?",
  "Best practices for debugging"
];

Pattern 3: Conversation History

Access and manage the conversation history:

// Get all prompts and responses
const history = aiassist.value.ej2Instances.prompts;

// Clear conversation
aiassist.value.ej2Instances.prompts = [];