OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inline-ai-assist
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 React.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-inline-ai-assist
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.
enableStreaming for progressive response updates during content generationcreated, promptRequest, open, and close for precise controladdResponse(), executePrompt(), showPopup(), and more📄 Read: references/getting-started.md
cssClass property📄 Read: references/template-customization.md
editorTemplate property: Customize prompt input arearesponseTemplate property: Customize response display📄 Read: references/internationalization.md
locale property: Set language and regional formattingenableRtl property: Enable right-to-left text direction📄 Read: references/positioning-and-targeting.md
relateTo property: Position relative to DOM elementstarget property: Specify where to append the componentresponseMode property: Inline vs Popup display modes📄 Read: references/command-settings.md
groupBy propertyitemSelect events📄 Read: references/response-settings.md
groupByitemSelect events📄 Read: references/inline-toolbar.md
tabIndexitemClick event handling with complete event args📄 Read: references/events.md
created event: Component render completepromptRequest event: Prompt submitted by useropen event: Popup openedclose event: Popup closed📄 Read: references/methods.md
addResponse(response): Add AI response to componentexecutePrompt(prompt): Execute prompt dynamicallyshowPopup(coordinates): Open the popuphidePopup(): Close the popupshowCommandPopup(): Show command actionshideCommandPopup(): Hide command actions📄 Read: references/ai-integrations.md
enableStreaming property: Real-time response streamingCombine the component with a contentEditable div to enable AI-powered suggestions while editing:
Set up predefined commands for common AI tasks:
Add custom toolbar items to trigger component methods:
Switch between inline editing and popup responses:
Use events to coordinate component state:
| 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.
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
}}
/>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} />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
};// Inline mode: Response appears inline
<InlineAIAssistComponent responseMode="Inline" />
// Popup mode: Response in floating popup
<InlineAIAssistComponent responseMode="Popup" popupWidth="400px" />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')}
/>