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

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