Syncfusion JavaScript Inline AI Assist Component

Overview

The Inline AI Assist is a popup-based AI component designed for contextual AI assistance that appears relative to UI elements. It provides intelligent text processing, content transformation, and AI-powered suggestions through a compact popup interface with command shortcuts, response actions, and customizable workflows.

The Inline AI Assist component provides:

Element-Relative Popup: Position AI assist popup relative to any element using relateTo property
Command Action Popup: Quick AI command shortcuts (Summarize, Shorten, Translate, etc.)
Response Actions: Accept/reject workflow for AI-generated responses
Inline Toolbar: Compact toolbar with send button and custom items
Prompt Management: Prompt text, placeholder, and prompt-response collection
AI Service Integration: Built-in support for OpenAI, Gemini, Ollama, LiteLLM
Response Streaming: Real-time streaming responses for AI outputs
Templates: Customize editor area with custom prompt input UI
Methods: Show/hide popup, add responses, execute prompts programmatically
Events: created, open, close, promptRequest for lifecycle management
Globalization: RTL support and localization for international apps

Documentation and Navigation Guide

Getting Started

📄 Read: [references/getting-started.md](references/getting-started.md)

Package installation and dependencies (@syncfusion/ej2-interactive-chat)
CSS imports and theme configuration
Basic Inline AI Assist initialization
relateTo property for element targeting
First render with prompt handling
promptRequest event basics
Width, height, z-index configuration

Inline Assist Configuration

📄 Read: [references/inline-assist-configuration.md](references/inline-assist-configuration.md)

Setting prompt text (prompt property)
Prompt placeholder (placeholder property)
Prompt-response collection (prompts property)
Popup dimensions (popupWidth, popupHeight)
Z-index configuration (zIndex)
Target container (target property for custom DOM append)
CSS class customization (cssClass)
Enable streaming responses (enableStreaming)
Response display mode (responseMode: Popup/Inline modes)
Enable persistence, RTL support

Command Settings (Quick Actions)

📄 Read: [references/command-settings.md](references/command-settings.md)

Command items overview (quick action popup)
Configure command items array (commandSettings.commands)
Command properties (id, label, prompt, iconCss, disabled)
Group commands (groupBy)
Tooltip configuration
Command popup dimensions (popupWidth, popupHeight)
itemSelect event for command actions

Inline Toolbar Settings

📄 Read: [references/inline-toolbar-settings.md](references/inline-toolbar-settings.md)

Built-in toolbar items (send button)
Custom toolbar items configuration
Toolbar item properties (id, iconCss, align, template, disabled)
Toolbar positioning (toolbarPosition: Inline/Bottom)
itemClick event for toolbar actions
Disabling/hiding toolbar items

Response Settings (Accept/Reject Actions)

📄 Read: [references/response-settings.md](references/response-settings.md)

Built-in response items (accept/reject)
Custom response action items
Response item properties (id, label, iconCss)
itemSelect event for response actions
Accept/reject handling patterns
Customizing response popup appearance

AI Service Integrations

📄 Read: [references/ai-service-integrations.md](references/ai-service-integrations.md)

promptRequest event detailed guide
OpenAI and Azure OpenAI integration patterns
Google Gemini integration
Ollama LLM local model integration
LiteLLM proxy service integration
Response formatting and error handling
Streaming vs standard response patterns

Templates

📄 Read: [references/templates.md](references/templates.md)

Editor template (editorTemplate) - Custom prompt input UI
Response template (responseTemplate) - Custom AI response rendering
Custom footer/prompt area design
Template context and data binding
executePrompt() method with custom UI
Syntax highlighting and markdown rendering in responses
Template rendering patterns

Methods

📄 Read: [references/methods.md](references/methods.md)

addResponse() - Add AI response to popup
showPopup() - Display the AI assist popup
hidePopup() - Close the popup
showCommandPopup() - Open command popup programmatically
hideCommandPopup() - Close command popup
executePrompt() - Trigger prompt programmatically
destroy() - Component cleanup
Standard framework methods (appendTo, dataBind, refresh, etc.)

Events and Globalization

📄 Read: [references/events-and-globalization.md](references/events-and-globalization.md)

created event - Component initialization complete
open event - Popup opened
close event - Popup closed
promptRequest event - Handle AI prompt requests
Localization (L10n) for UI text
RTL support (enableRtl)
Locale configuration

Quick Start Example

Basic Inline AI Assist with Summarize Button

import { InlineAIAssist } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize Inline AI Assist
let inlineAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#summarizeBtn',
    placeholder: 'Ask AI to help...',
    promptRequest: (args) => {
        // Connect to your AI service
        setTimeout(() => {
            let response = 'AI-generated summary of the content...';
            inlineAssist.addResponse(response);
        }, 1000);
    },
    responseSettings: {
        itemSelect: (args) => {
            if (args.command.label === 'Accept') {
                // Apply the AI response to your content
                document.getElementById('content').innerHTML = args.response;
                inlineAssist.hidePopup();
            } else if (args.command.label === 'Discard') {
                // Reject the response
                inlineAssist.hidePopup();
            }
        }
    }
});

inlineAssist.appendTo('#inlineAssist');

// Show popup on button click
document.getElementById('summarizeBtn').addEventListener('click', () => {
    inlineAssist.showPopup();
});

<button id="summarizeBtn" class="e-btn e-primary">Summarize</button>
<div id="content" contenteditable="true">
    Your content here...
</div>
<div id="inlineAssist"></div>

Common Patterns

Pattern 1: Quick Command Actions

let inlineAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#improveBtn',
    commandSettings: {
        commands: [
            { label: 'Summarize', prompt: 'Summarize this content', iconCss: 'e-icons e-collapse-2' },
            { label: 'Shorten', prompt: 'Make this shorter', iconCss: 'e-icons e-shorten' },
            { label: 'Translate', prompt: 'Translate to Spanish', iconCss: 'e-icons e-translate' },
            { label: 'Make Professional', prompt: 'Rewrite professionally', iconCss: 'e-icons e-elaborate' }
        ]
    },
    promptRequest: (args) => {
        // Handle different commands
        callAIService(args.prompt);
    }
});

Pattern 2: Accept/Reject Workflow

let inlineAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#editor',
    promptRequest: (args) => {
        // Get AI response
        getAIResponse(args.prompt).then(response => {
            inlineAssist.addResponse(response);
        });
    },
    responseSettings: {
        itemSelect: (args) => {
            if (args.command.label === 'Accept') {
                // Apply changes
                applyChanges(inlineAssist.prompts[inlineAssist.prompts.length - 1].response);
                inlineAssist.hidePopup();
            } else if (args.command.label === 'Discard') {
                // Discard changes
                inlineAssist.hidePopup();
            }
        }
    }
});

Pattern 3: Streaming Responses

let inlineAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#generateBtn',
    enableStreaming: true,
    promptRequest: (args) => {
        // Stream response from AI service
        streamAIResponse(args.prompt, (chunk) => {
            inlineAssist.addResponse(chunk);
        });
    }
});

Pattern 4: Custom Editor Template

let inlineAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#customBtn',
    editorTemplate: () => {
        return `
            <div class="custom-editor">
                <textarea id="customPrompt" placeholder="Type your request..."></textarea>
                <button id="sendBtn" class="e-btn">Generate</button>
            </div>
        `;
    }
});

document.addEventListener('click', (e) => {
    if (e.target.id === 'sendBtn') {
        const textarea = document.getElementById('customPrompt');
        inlineAssist.executePrompt(textarea.value);
    }
});

Key Properties

Core Configuration

relateTo (string): CSS selector for element to position popup relative to
placeholder (string): Placeholder text for prompt input (default: 'Ask or generate AI content..')
prompt (string): Pre-set prompt text
prompts (InlinePromptModel[]): Collection of prompt-response pairs
popupWidth (string | number): Width of popup (default: '400px')
popupHeight (string | number): Height of popup (default: 'auto')
zIndex (number): Z-index for popup positioning (default: 1000)

Feature Configuration

commandSettings (CommandSettingsModel): Quick command actions configuration
inlineToolbarSettings (InlineToolbarSettingsModel): Footer toolbar configuration
responseSettings (ResponseSettingsModel): Accept/reject actions configuration
editorTemplate (string | Function): Custom editor area template
enableStreaming (boolean): Enable streaming responses (default: false)

Styling & Behavior

cssClass (string): Custom CSS classes for root element
enableRtl (boolean): Enable right-to-left mode
locale (string): Locale code for localization (default: 'en-US')
enablePersistence (boolean): Persist state across page reloads

Common Use Cases

Use Case 1: Content Summarizer

Add a "Summarize" button next to text content that opens AI assist popup for quick summarization with accept/reject workflow.

Use Case 2: Text Editor Enhancement

Integrate AI-powered text improvement commands (grammar, tone, length) into existing text editors with popup interface.

Use Case 3: Translation Tool

Provide instant translation popup with language selection commands and response preview before applying.

Use Case 4: Content Generator

Generate AI content for empty fields with command shortcuts for different content types (formal, casual, technical).

Use Case 5: Code Assistant

Add AI assistance for code generation, explanation, or optimization with popup positioned relative to code blocks.

syncfusion-javascript-inline-ai-assist

Installation

Summary

Similar popular skills

Also in this package

Agent compatibility

Repository health

Skill metadata

Package contents

History

SKILL.md