Getting Started with the React Inline AI Assist Component

22 Jul 202624 minutes to read

This section explains how to create a simple React Inline AI Assist component and demonstrate its basic usage in a React environment.

Prerequisites

Requirement	Version
React	15.5.4 or higher
Node.js	14.0.0 or above
Yarn (optional)	0.25 or above

React supported versions

React version	Minimum Syncfusion React Inline AI Assist version
React v19	29.1.33 and above
React v18	20.2.36 and above
React v17	18.3.50 and above
React v16	16.2.45 and above

Browser support

Browser	Supported versions
Chrome	Latest
Firefox	Latest
Opera	Latest
Edge	13+
Internet Explorer (IE)	11+
Safari	9+
iOS Safari	9+
Android Browser / Chrome for Android	4.4+
Windows Mobile	IE 11+

Setup for local development

Easily set up a React application using create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions.

Note: To create a React application using create-react-app, refer to this documentation for more details.

To create a new React application, run one of the following commands based on your preferred language:

React with JavaScript

npx create vite@latest my-app -- --template react

React with TypeScript

npx create vite@latest my-app -- --template react-ts

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

• Which linter to use? → ESLint
• Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Then, navigate to the project directory:

cd my-app

Adding React Inline AI Assist packages

Install the interactive chat package that contains the Inline AI Assist component:

npm install @syncfusion/ej2-react-interactive-chat --save

Adding CSS reference

Themes for Syncfusion^® Inline AI Assist component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Tailwind 3 theme package using the following command:

npm

npm install @syncfusion/ej2-tailwind3-theme --save

Then add the following CSS reference to the src/App.css file:

App.css

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/inline-ai-assist/index.css";

Adding the Inline AI Assist component

Now, you can start adding the Inline AI Assist component to the application. For getting started, add the component by using the <InlineAIAssistComponent> tag directive in the src/App.tsx file. Place the following code in src/App.tsx.

import { InlineAIAssistComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    return (
        // specifies the tag to render the Inline AI Assist component
        <InlineAIAssistComponent id="inlineAiAssist"></InlineAIAssistComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

Use the InlineAIAssistComponent tag where you want the inline assistant to appear.

Registering your Syncfusion license

Generate a license key from the Syncfusion License Dashboard and register it before rendering your React application:

import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('YOUR_LICENSE_KEY');

Note: A valid Syncfusion license is required for production use. Without a valid license, a trial license warning message will be displayed.

Run the application

With the configuration complete, run the application to see the Inline AI Assist component rendered in your browser.

npm start

index.tsx

import { InlineAIAssistComponent, ResponseItemSelectEventArgs } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App: React.FC = () => {
    const assistRef = React.useRef<InlineAIAssistComponent>(null);
    const editableRef = React.useRef<HTMLDivElement>(null);
    const responseSettingprops = {
        itemSelect: handleResponseItemSelect
    };
    const summarizeBtnStyle = {
        marginBottom: '10px'
    };

    const handleSummarizeBtnClick = () => {
        if (assistRef.current && typeof assistRef.current.showPopup === 'function') {
            assistRef.current.showPopup();
        }
    };

    const handlePromptRequest = () => {
        setTimeout(() => {
            const defaultResponse = 'For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            if (assistRef.current && typeof assistRef.current.addResponse === 'function') {
                assistRef.current.addResponse(defaultResponse);
            }
        }, 1000);
    };

    const handleResponseItemSelect = (args: ResponseItemSelectEventArgs): void => {
        if (args.command.label === 'Accept') {
            if (editableRef.current && assistRef.current) {
                const lastResponse = assistRef.current.prompts && assistRef.current.prompts.length > 0
                    ? assistRef.current.prompts[assistRef.current.prompts.length - 1].response
                    : '';
                if (lastResponse) {
                    editableRef.current.innerHTML = '<p>' + lastResponse + '</p>';
                }
            }
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        } else if (args.command.label === 'Discard') {
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        }
    };

    return (
        <div>
            <button 
                id="summarizeBtn" 
                className="e-btn e-primary" 
                style={summarizeBtnStyle}
                onClick={handleSummarizeBtnClick}
            >
                Content Summarize
            </button>
            <div 
                id="editableText" 
                contentEditable="true" 
                ref={editableRef}
            >
                <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.</p>
                <p>With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.</p>
            </div>
            <InlineAIAssistComponent
                id="defaultInlineAssist"
                ref={assistRef}
                relateTo="#summarizeBtn"
                promptRequest={handlePromptRequest}
                responseSettings={responseSettingprops}
                popupWidth="500px"
            />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('container'));

index.jsx

import { InlineAIAssistComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    const assistRef = React.useRef(null);
    const editableRef = React.useRef(null);
    const responseSettingprops = {
        itemSelect: handleResponseItemSelect
    };
    const summarizeBtnStyle = {
        marginBottom: '10px'
    };

    const handleSummarizeBtnClick = () => {
        if (assistRef.current && typeof assistRef.current.showPopup === 'function') {
            assistRef.current.showPopup();
        }
    };

    const handlePromptRequest = () => {
        setTimeout(() => {
            const defaultResponse = 'For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            if (assistRef.current && typeof assistRef.current.addResponse === 'function') {
                assistRef.current.addResponse(defaultResponse);
            }
        }, 1000);
    };

    const handleResponseItemSelect = (args) => {
        if (args.command.label === 'Accept') {
            if (editableRef.current && assistRef.current) {
                const lastResponse = assistRef.current.prompts && assistRef.current.prompts.length > 0
                    ? assistRef.current.prompts[assistRef.current.prompts.length - 1].response
                    : '';
                if (lastResponse) {
                    editableRef.current.innerHTML = '<p>' + lastResponse + '</p>';
                }
            }
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        } else if (args.command.label === 'Discard') {
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        }
    };

    return (
        <div>
            <button 
                id="summarizeBtn" 
                className="e-btn e-primary" 
                style={summarizeBtnStyle}
                onClick={handleSummarizeBtnClick}
            >
                Content Summarize
            </button>
            <div 
                id="editableText" 
                contentEditable="true" 
                ref={editableRef}
            >
                <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.</p>
                <p>With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.</p>
            </div>
            <InlineAIAssistComponent
                id="defaultInlineAssist"
                ref={assistRef}
                relateTo="#summarizeBtn"
                promptRequest={handlePromptRequest}
                responseSettings={responseSettingprops}
                popupWidth="500px"
            />
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

RelateTo and target configuration

You can use the relateTo property to position the Inline AI Assist relative to a specific DOM element. It accepts either a CSS selector string such as .container or #id, or an HTMLElement. The target property specifies the element or CSS selector where the Inline AI Assist will be appended. It accepts either a CSS selector string or an HTMLElement.

index.tsx

import { InlineAIAssistComponent, ResponseItemSelectEventArgs } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App: React.FC = () => {
    const assistRef = React.useRef<InlineAIAssistComponent>(null);
    const editableRef = React.useRef<HTMLDivElement>(null);

    const handleSummarizeBtnClick = () => {
        if (assistRef.current && typeof assistRef.current.showPopup === 'function') {
            assistRef.current.showPopup();
        }
    };

    const handlePromptRequest = () => {
        setTimeout(() => {
            const defaultResponse = 'For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            if (assistRef.current && typeof assistRef.current.addResponse === 'function') {
                assistRef.current.addResponse(defaultResponse);
            }
        }, 1000);
    };

    const handleResponseItemSelect = (args: ResponseItemSelectEventArgs): void => {
        if (args.command.label === 'Accept') {
            if (editableRef.current && assistRef.current) {
                const lastResponse = assistRef.current.prompts && assistRef.current.prompts.length > 0
                    ? assistRef.current.prompts[assistRef.current.prompts.length - 1].response
                    : '';
                if (lastResponse) {
                    editableRef.current.innerHTML = '<p>' + lastResponse + '</p>';
                }
            }
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        } else if (args.command.label === 'Discard') {
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        }
    };

    return (
        <div>
            <button 
                id="summarizeBtn" 
                className="e-btn e-primary" 
                style=
                onClick={handleSummarizeBtnClick}
            >
                Content Summarize
            </button>
            <div 
                id="editableText" 
                contentEditable="true" 
                ref={editableRef}
            >
                <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.</p>
                <p>With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.</p>
            </div>
            <InlineAIAssistComponent
                id="defaultInlineAssist"
                ref={assistRef}
                relateTo="#summarizeBtn"
                target="#container"
                promptRequest={handlePromptRequest}
                responseSettings=
            />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('container'));

index.jsx

import { InlineAIAssistComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    const assistRef = React.useRef(null);
    const editableRef = React.useRef(null);

    const handleSummarizeBtnClick = () => {
        if (assistRef.current && typeof assistRef.current.showPopup === 'function') {
            assistRef.current.showPopup();
        }
    };

    const handlePromptRequest = () => {
        setTimeout(() => {
            const defaultResponse = 'For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            if (assistRef.current && typeof assistRef.current.addResponse === 'function') {
                assistRef.current.addResponse(defaultResponse);
            }
        }, 1000);
    };

    const handleResponseItemSelect = (args) => {
        if (args.command.label === 'Accept') {
            if (editableRef.current && assistRef.current) {
                const lastResponse = assistRef.current.prompts && assistRef.current.prompts.length > 0
                    ? assistRef.current.prompts[assistRef.current.prompts.length - 1].response
                    : '';
                if (lastResponse) {
                    editableRef.current.innerHTML = '<p>' + lastResponse + '</p>';
                }
            }
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        } else if (args.command.label === 'Discard') {
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        }
    };

    return (
        <div>
            <button 
                id="summarizeBtn" 
                className="e-btn e-primary" 
                style=
                onClick={handleSummarizeBtnClick}
            >
                Content Summarize
            </button>
            <div 
                id="editableText" 
                contentEditable="true" 
                ref={editableRef}
            >
                <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.</p>
                <p>With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.</p>
            </div>
            <InlineAIAssistComponent
                id="defaultInlineAssist"
                ref={assistRef}
                relateTo="#summarizeBtn"
                target="#container"
                promptRequest={handlePromptRequest}
                responseSettings=
            />
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Response display modes

Responses can be shown in two modes: Inline, which updates the content in place, and Popup, which displays responses in a floating popup. Toggle this behavior with the responseMode property.

index.tsx

import { InlineAIAssistComponent, ResponseItemSelectEventArgs } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App: React.FC = () => {
    const assistRef = React.useRef<InlineAIAssistComponent>(null);
    const editableRef = React.useRef<HTMLDivElement>(null);
    const [responseMode, setResponseMode] = React.useState<string>('Popup');

    const handleSummarizeBtnClick = () => {
        if (assistRef.current && typeof assistRef.current.showPopup === 'function') {
            assistRef.current.showPopup();
        }
    };

    const handleResponseModeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const newMode = e.target.value;
        setResponseMode(newMode);
        if (assistRef.current) {
            assistRef.current.responseMode = newMode;
            assistRef.current.showPopup();
        }
    };

    const handlePromptRequest = () => {
        setTimeout(() => {
            const defaultResponse = 'For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            if (assistRef.current && typeof assistRef.current.addResponse === 'function') {
                assistRef.current.addResponse(defaultResponse);
            }
        }, 1000);
    };

    const handleResponseItemSelect = (args: ResponseItemSelectEventArgs): void => {
        if (args.command.label === 'Accept') {
            if (editableRef.current && assistRef.current) {
                const lastResponse = assistRef.current.prompts && assistRef.current.prompts.length > 0
                    ? assistRef.current.prompts[assistRef.current.prompts.length - 1].response
                    : '';
                if (lastResponse) {
                    editableRef.current.innerHTML = '<p>' + lastResponse + '</p>';
                }
            }
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        } else if (args.command.label === 'Discard') {
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        }
    };

    return (
        <div>
            <div id="mode-selector" style=>
                <label htmlFor="responseMode" style=>Response mode:</label>
                <select 
                    id="responseMode" 
                    value={responseMode}
                    onChange={handleResponseModeChange}
                >
                    <option value="Popup">Popup</option>
                    <option value="Inline">Inline</option>
                </select>
            </div>
            <button 
                id="summarizeBtn" 
                className="e-btn e-primary" 
                style=
                onClick={handleSummarizeBtnClick}
            >
                Content Summarize
            </button>
            <div 
                id="editableText" 
                contentEditable="true" 
                ref={editableRef}
            >
                <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.</p>
                <p>With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.</p>
            </div>
            <InlineAIAssistComponent
                id="defaultInlineAssist"
                ref={assistRef}
                responseMode={responseMode}
                relateTo="#summarizeBtn"
                promptRequest={handlePromptRequest}
                responseSettings=
            />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('container'));

index.jsx

import { InlineAIAssistComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    const assistRef = React.useRef(null);
    const editableRef = React.useRef(null);
    const [responseMode, setResponseMode] = React.useState('Popup');

    const handleSummarizeBtnClick = () => {
        if (assistRef.current && typeof assistRef.current.showPopup === 'function') {
            assistRef.current.showPopup();
        }
    };

    const handleResponseModeChange = (e) => {
        const newMode = e.target.value;
        setResponseMode(newMode);
        if (assistRef.current) {
            assistRef.current.responseMode = newMode;
            assistRef.current.showPopup();
        }
    };

    const handlePromptRequest = () => {
        setTimeout(() => {
            const defaultResponse = 'For real-time prompt processing, connect the Inline AI Assist component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            if (assistRef.current && typeof assistRef.current.addResponse === 'function') {
                assistRef.current.addResponse(defaultResponse);
            }
        }, 1000);
    };

    const handleResponseItemSelect = (args) => {
        if (args.command.label === 'Accept') {
            if (editableRef.current && assistRef.current) {
                const lastResponse = assistRef.current.prompts && assistRef.current.prompts.length > 0
                    ? assistRef.current.prompts[assistRef.current.prompts.length - 1].response
                    : '';
                if (lastResponse) {
                    editableRef.current.innerHTML = '<p>' + lastResponse + '</p>';
                }
            }
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        } else if (args.command.label === 'Discard') {
            if (assistRef.current && typeof assistRef.current.hidePopup === 'function') {
                assistRef.current.hidePopup();
            }
        }
    };

    return (
        <div>
            <div id="mode-selector" style=>
                <label htmlFor="responseMode" style=>Response mode:</label>
                <select 
                    id="responseMode" 
                    value={responseMode}
                    onChange={handleResponseModeChange}
                >
                    <option value="Popup">Popup</option>
                    <option value="Inline">Inline</option>
                </select>
            </div>
            <button 
                id="summarizeBtn" 
                className="e-btn e-primary" 
                style=
                onClick={handleSummarizeBtnClick}
            >
                Content Summarize
            </button>
            <div 
                id="editableText" 
                contentEditable="true" 
                ref={editableRef}
            >
                <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.</p>
                <p>With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.</p>
            </div>
            <InlineAIAssistComponent
                id="defaultInlineAssist"
                ref={assistRef}
                responseMode={responseMode}
                relateTo="#summarizeBtn"
                promptRequest={handlePromptRequest}
                responseSettings=
            />
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Production build

To create an optimized production build:

npm run build

Preview the production build locally:

npm run preview

Troubleshooting

• Inline AI Assist not rendering styles: Ensure the theme CSS is imported in App.css and that you removed the default Vite CSS in index.css.
• Trial license warning banner: Register a license key via registerLicense() from @syncfusion/ej2-base.
• Port 5173 already in use: Stop the conflicting process or run Vite on a different port with npm run dev -- --port 3000.