Implement the Syncfusion React Inline AI Assist component. Use this skill to add inline AI suggestions, integrate AI services such as OpenAI, Gemini, Lite-LLM, or Ollama, configure command and response actions, customize toolbars, handle events, and support real-time prompt-response workflows in Rea

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](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](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](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](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](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](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](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](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](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](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 Common Patterns Pattern 1: AI Assisted Text Editing Combine the component with a contentEditable div to enable AI powered suggestions while editing: Pattern 2: Command Based Actions Set up predefined commands for common AI tasks: Pattern 3: Custom Toolbar Actions Add custom toolbar items to trigger component methods: Pattern 4: Response Display Modes Switch between inline editing and popup responses: Pattern 5: Lifecycle Management Use events to coordinate component state: 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 For complete examples and advanced scenarios, explore individual reference files above.

syncfusion-react-inline-ai-assist