Getting started in React AI AssistView component

14 Dec 202411 minutes to read

This section explains how to create a simple AI AssistView component and configure its available functionalities in React.

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

Dependencies

The list of dependencies required to use the AI AssistView component in your application is given as follows:

|-- @syncfusion/ej2-react-interactive-chat
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-inputs

Installation and configuration

You can use Create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app

Start a new project using create-react-app command as follows

  create-react-app quickstart --scripts-version=react-scripts-ts
  cd quickstart

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry. You can choose the component that you want to install.

To install AI AssistView component, use the following command

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

Adding AI AssistView component

Now, you can start adding AI AssistView component in the application. For getting started, add the AI AssistView component by using <AIAssistViewComponent> tag directive in src/App.tsx file using following code. Now place the below AI AssistView code in the src/App.tsx.

[Class-component]

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

export default class App extends React.Component<{}, {}> {
  public render() {
    return (
        // specifies the tag for render the AI AssistView omponent
        <AIAssistViewComponent id="aiAssistView"></AIAssistViewComponent>
    );
  }
}

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

[Functional-component]

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

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

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

Adding CSS reference

Import the AI AssistView component required CSS references as follows in src/App.css.

/* import the AI AssistView dependency styles */

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-interactive-chat/styles/material.css";

Run the application

After completing the configuration required to render a basic AI AssistView, run the following command to display the output in your default browser.

npm start

[Class-componnet]

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

export default class App extends React.Component {
  render() {
    return (
        // specifies the tag for render the AI AssistView omponent
        <AIAssistViewComponent id="aiAssistView"></AIAssistViewComponent>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  public render() {
    return (
        // specifies the tag for render the AI AssistView omponent
        <AIAssistViewComponent id="aiAssistView"></AIAssistViewComponent>
    );
  }
}

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

[Functional-componnet]

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

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

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

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

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

Configure suggestions and responses

You can use the promptSuggestions property to add prompt suggestions and the promptRequest event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed.

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

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>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent,PromptRequestEventArgs, PromptModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

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>
    );
}

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