syncfusion-react-inline-ai-assist

Syncfusion React Syncfusion React Inline AI Assist Component

Component Overview

The Inline AI Assist component provides intelligent text processing capabilities for your React applications. It enables AI-powered suggestions, content generation, and interactive prompt-response workflows with support for multiple AI service integrations.

Key Capabilities

• Multi-AI Service Integration: Connect to OpenAI, Google Gemini, Lite-LLM, and Ollama for flexible AI backend options
• Real-Time Response Streaming: Enable enableStreaming for progressive response updates during content generation
• Command & Response Actions: Configure predefined commands for quick AI tasks and custom response actions
• Inline Toolbar: Add custom toolbar items with icons, buttons, and separators for enhanced user interactions
• Inline & Popup Modes: Display AI responses inline with existing content or in a floating popup window
• Flexible Template Customization: Customize prompt input and response display using string, function, or JSX templates
• Built-in Speech-to-Text: Enable the Web Speech API microphone button via speechToTextSettings with language, interim results, custom labels/icons, tooltips, and lifecycle events
• Internationalization (i18n) & RTL: Support for multiple languages and right-to-left text direction
• Event Handling: Lifecycle events including created, promptRequest, open, and close for precise control
• Public Methods: Programmatic access with addResponse(), executePrompt(), showPopup(), and more
• Prompt History: Track prompt-response conversations with persistent history management
• Accessibility & Theming: Compatible with Material, Bootstrap, Fluent, and Tailwind CSS themes

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation via npm
• CSS theme imports (Material, Bootstrap, Fluent, Tailwind)
• Component rendering
• Custom styling with cssClass property
• Running your first example

Template Customization

📄 Read: references/template-customization.md

• editorTemplate property: Customize prompt input area
• responseTemplate property: Customize response display
• String templates, function templates, JSX.Element templates
• Rich text editor integration
• Custom voice input integration (inside editorTemplate)- Code syntax highlighting
• Markdown rendering

Speech-to-Text

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

• Enable built-in Speech-to-Text via speechToTextSettings.enable
• Configure the recognition language with the lang property (en-US, es-ES, fr-FR, etc.)
• Customize the microphone button with buttonSettings (content, stopContent, iconCss, stopIconCss)
• Stream partial transcripts in real time with allowInterimResults: true
• Customize idle/recording tooltips with tooltipSettings (content, stopContent)
• Hook into the recognition lifecycle with onStart, onStop, transcriptChanged, and onError
• Use SpeechToTextSettingsModel and the Web Speech API for cross-browser voice input
• Build an accessible status panel that surfaces recording state, live transcript, and errors

Internationalization (i18n) and RTL

📄 Read: references/internationalization.md

• locale property: Set language and regional formatting
• enableRtl property: Enable right-to-left text direction
• Available locale codes and setup
• Arabic, Hebrew, Persian support
• Multi-language applications
• Browser language detection
• Custom localization strings

Positioning and Targeting

📄 Read: references/positioning-and-targeting.md

• relateTo property: Position relative to DOM elements
• target property: Specify where to append the component
• responseMode property: Inline vs Popup display modes
• Practical positioning scenarios

Command Settings

📄 Read: references/command-settings.md

• Configure command items for quick actions
• Command properties: id, label, iconCss, disabled, prompt, tooltip
• Group commands with groupBy property
• Handle itemSelect events
• Set popup dimensions

Response Settings

📄 Read: references/response-settings.md

• Built-in response items (accept, reject)
• Adding custom response actions
• Response item properties and configuration
• Group response items with groupBy
• Handle response itemSelect events

Inline Toolbar Customization

📄 Read: references/inline-toolbar.md

• Configure toolbar items (buttons, separators, inputs)
• Built-in items and custom items
• Item properties: text, iconCss, type, visible, disabled, align
• Tab key navigation with tabIndex
• Custom item templates
• Toolbar positioning: Inline vs Bottom
• itemClick event handling with complete event args

Events

📄 Read: references/events.md

• created event: Component render complete
• promptRequest event: Prompt submitted by user
• open event: Popup opened
• close event: Popup closed
• Event handler patterns and examples

Methods

📄 Read: references/methods.md

• addResponse(response): Add AI response to component
• executePrompt(prompt): Execute prompt dynamically
• showPopup(coordinates): Open the popup
• hidePopup(): Close the popup
• showCommandPopup(): Show command actions
• hideCommandPopup(): Hide command actions

AI Service Integrations

📄 Read: references/ai-integrations.md

• enableStreaming property: Real-time response streaming
• OpenAI API integration with streaming
• Google Gemini AI integration with streaming
• Lite-LLM service integration
• Ollama local LLM integration with streaming
• API credential setup
• Prompt handling and response streaming
• Performance optimization and error handling

Quick Start

import { InlineAIAssistComponent } from '@syncfusion/ej2-react-interactive-chat';
import React from 'react';

function App() {
    const assistRef = React.useRef(null);

    const handlePromptRequest = () => {
        // Simulate AI response
        setTimeout(() => {
            const response = 'Your AI-generated response here';
            assistRef.current?.addResponse(response);
        }, 1000);
    };

    const handleShowPopup = () => {
        assistRef.current?.showPopup();
    };

    return (
        <div>
            <button onClick={handleShowPopup} className="e-btn e-primary">
                Ask AI
            </button>
            <InlineAIAssistComponent
                id="inlineAssist"
                ref={assistRef}
                relateTo="button"
                promptRequest={handlePromptRequest}
                popupWidth="500px"
            />
        </div>
    );
}

export default App;

Common Patterns

Pattern 1: AI-Assisted Text Editing

Combine the component with a contentEditable div to enable AI-powered suggestions while editing:

const handleResponseItemSelect = (args) => {
    if (args.command.label === 'Accept') {
        const lastResponse = assistRef.current.prompts?.[assistRef.current.prompts.length - 1]?.response;
        if (lastResponse && editableRef.current) {
            editableRef.current.innerHTML = lastResponse;
        }
    }
};

<InlineAIAssistComponent
    responseSettings={{
        itemSelect: handleResponseItemSelect
    }}
/>

Pattern 2: Command-Based Actions

Set up predefined commands for common AI tasks:

const commandSettings = {
    commands: [
        { id: 'summarize', label: 'Summarize', iconCss: 'e-icons e-compress', prompt: 'Summarize this text' },
        { id: 'expand', label: 'Expand', iconCss: 'e-icons e-expand', prompt: 'Expand this text' },
        { id: 'fix', label: 'Fix Grammar', iconCss: 'e-icons e-check-box', prompt: 'Fix grammar and spelling' }
    ]
};

<InlineAIAssistComponent commandSettings={commandSettings} />

Pattern 3: Custom Toolbar Actions

Add custom toolbar items to trigger component methods:

const handleToolbarItemClick = (args) => {
    if (args.item.id === 'customAction') {
        assistRef.current?.executePrompt('User-defined prompt');
    }
};

const inlineToolbarSettings = {
    items: [
        { id: 'customAction', text: 'Custom', iconCss: 'e-icons e-settings' }
    ],
    itemClick: handleToolbarItemClick
};

Pattern 4: Response Display Modes

Switch between inline editing and popup responses:

// Inline mode: Response appears inline
<InlineAIAssistComponent responseMode="Inline" />

// Popup mode: Response in floating popup
<InlineAIAssistComponent responseMode="Popup" popupWidth="400px" />

Pattern 5: Lifecycle Management

Use events to coordinate component state:

const handleCreated = () => {
    console.log('Component initialized');
};

const handlePromptRequest = (args) => {
    console.log('Prompt submitted:', args.prompt);
};

<InlineAIAssistComponent
    created={handleCreated}
    promptRequest={handlePromptRequest}
    open={() => console.log('Popup opened')}
    close={() => console.log('Popup closed')}
/>

Pattern 6: Voice-Driven Inline Assistant

Enable the built-in Web Speech API microphone button to let users dictate prompts:

const speechToTextSettings = {
    enable: true,
    lang: 'en-US',
    allowInterimResults: true,
    buttonSettings: {
        content: 'Start Recording',
        stopContent: 'Stop Recording',
        iconCss: 'e-icons e-microphone',
        stopIconCss: 'e-icons e-microphone-off'
    },
    tooltipSettings: {
        content: 'Click to start recording',
        stopContent: 'Click to stop recording'
    }
};

<InlineAIAssistComponent speechToTextSettings={speechToTextSettings} />

• onStart fires when recognition begins, onStop when it ends
• transcriptChanged streams interim + final transcripts to a status panel
• onError surfaces browser/network/mic errors to the user
• The recognized prompt is injected into the standard promptRequest event, so existing AI service handlers keep working unchanged

Key Configuration Properties

Property	Type	Default	Purpose
editorTemplate	string | function | JSX.Element	''	Custom prompt input template
responseTemplate	string | function | JSX.Element	''	Custom response display template
enableStreaming	boolean	false	Enable real-time response streaming
locale	string	'en-US'	Language and regional formatting
enableRtl	boolean	false	Enable right-to-left text direction
enablePersistence	boolean	false	Persist component state across reloads
cssClass	string	''	Custom CSS classes for styling
relateTo	string | HTMLElement	-	Position component relative to element
target	string | HTMLElement	'body'	Specify append target
responseMode	string	'Popup'	'Inline' or 'Popup'
popupWidth	string | number	'400px'	Popup width (CSS value)
popupHeight	string | number	'auto'	Popup height
zIndex	number	1000	Popup z-index
placeholder	string	'Ask or generate AI content..'	Prompt textarea placeholder
prompt	string	''	Default prompt text
prompts	array	[]	Prompt-response collection
commandSettings	CommandSettingsModel	null	Command configuration
responseSettings	ResponseSettingsModel	null	Response action configuration
inlineToolbarSettings	InlineToolbarSettingsModel	null	Toolbar customization
speechToTextSettings	SpeechToTextSettingsModel	null	Built-in Web Speech API microphone button (enable, lang, allowInterimResults, buttonSettings, tooltipSettings, onStart, onStop, transcriptChanged, onError)

For complete examples and advanced scenarios, explore individual reference files above.