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
• 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
• Voice input integration
• Code syntax highlighting
• Markdown rendering

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')}
/>

Key Configuration Properties

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