Getting Started with the React AI AssistView

1 Aug 202612 minutes to read

This section explains the steps required to create a simple React AI AssistView component and demonstrate its basic usage in a React environment.

To get started quickly with the React AI AssistView component, you can check out this video tutorial:

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 Data AI AssistView 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. Vite sets up your environment using JavaScript and optimizes your application for production.

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 AI AssistView packages

To install the AI AssistView package, use the following command:

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

Adding CSS reference

Themes for Syncfusion® AI AssistView 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 install @syncfusion/ej2-tailwind3-theme --save

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

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

Adding AI AssistView component

The AI AssistView code should be added to the src/App.tsx file.

import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';

function App() {
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView"></AIAssistViewComponent>
    );
}

export default App;
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';

function App() {
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView"></AIAssistViewComponent>
    );
}

export default App;

Run the application

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

npm run dev

Note: Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added.

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.

Configure suggestions and asynchronous responses

The AI AssistView component can be configured to guide user interactions and provide dynamic content from an AI backend.

  • promptSuggestions: Use this property to display a list of predefined suggestion chips that users can click to submit a prompt.
  • promptRequest: This event is triggered when a user sends a prompt. You can use its event handler to make an asynchronous API call to an AI service and stream the response back to the component.

The following example demonstrates how to define prompt suggestions and handle the promptRequest event to simulate fetching a response from a backend.

import { AIAssistViewComponent,PromptRequestEventArgs, PromptModel } from '@syncfusion/ej2-react-interactive-chat';

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);

    const promptSuggestions: string[] = [
        "How do I prioritize my tasks?",
        "How can I improve my time management skills?"
    ];
  
    const prompts: PromptModel[] = [
        {
            prompt: "How do I prioritize my tasks?",
            response: "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!"
        },
        {
            prompt: "How can I improve my time management skills?",
            response: "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency."
        }
    ];
    
    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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.';
  
            assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
  
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={promptSuggestions}></AIAssistViewComponent>
    );
}

export default App;
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';

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

    const promptSuggestions = [
        "How do I prioritize my tasks?",
        "How can I improve my time management skills?"
    ];
  
    const prompts = [
        {
            prompt: "How do I prioritize my tasks?",
            response: "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!"
        },
        {
            prompt: "How can I improve my time management skills?",
            response: "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency."
        }
    ];
    
    const onPromptRequest = (args) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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.';
            assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);

        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={promptSuggestions}></AIAssistViewComponent>
    );
}

export default App;

Production build

To create an optimized production build:

npm run build

Preview the production build locally:

npm run preview

Troubleshooting

  • AI AssistView 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.