Getting started with EJ2 TypeScript AI AssistView control

22 Jul 20269 minutes to read

This section explains how to create a simple AI AssistView control and configure its available functionalities in TypeScript, using Essential® JS 2 quickstart seed repository.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. It requires Node.js v14.15.0 or higher. For more information about webpack and its features, refer to the webpack documentation.

Prerequisites

Before getting started, ensure the following tools are installed on your machine:

Tool Version / Notes
Node.js v14.15.0 or higher
npm Bundled with Node.js
Git Required to clone the quickstart repository
Visual Studio Code Recommended code editor

You can verify your Node.js and npm versions by running:

node -v
npm -v

Registering the license key

Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.41 onwards. Using the controls without a license key will display a license validation message in the browser console.

Steps to register the license key:

  1. Sign in to the Syncfusion License Portal and copy your license key.
  2. Register the key in your src/app/app.ts file, before instantiating any Syncfusion control:
import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('YOUR_LICENSE_KEY_HERE');

For more details on obtaining and registering a license key, refer to the License Key Generation and License Key Registration documentation.

Setup for local development

Clone the Essential® JS 2 quickstart application project from GitHub using the following command line scripts.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack
cd ej2-quickstart-webpack

Adding Syncfusion® TypeScript AI AssistView package

Syncfusion® TypeScript (Essential® JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

Use the following command to install the @syncfusion/ej2-interactive-chat package:

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

Then, install the remaining dependent npm packages using the following command:

npm install

Adding CSS reference

Themes for Syncfusion® AI AssistView controls can be applied using CSS files provided through the npm theme package. Install the Fluent 2 theme package using the following command:

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

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

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

Adding AI AssistView control

Add the AI AssistView control in src/app/app.ts file using the following code.

import { AIAssistView } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({});

// Render initialized AI Assist.
aiAssistView.appendTo('#defaultAssist');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="defaultAssist"></div>
    </div>
</body>
</html>

Run the application

The npm start command compiles the TypeScript source files and starts the webpack development server. Run the following command:

npm start

Open http://localhost:8080 (or the port shown in the terminal) in a browser. You should see an AI AssistView rendered with the default layout.

Note: Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the control 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.

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 { AIAssistView, PromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initializes the AI Assist control
let defaultAIAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        "How do I prioritize my tasks?",
        "How can I improve my time management skills?"
    ],
    promptRequest: onPromptRequest
});

// Render initialized AI Assist.
defaultAIAssistView.appendTo('#defaultAssist');

let 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."
    }
]

function onPromptRequest(args: PromptRequestEventArgs) {
    setTimeout(() => {
        let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
        let defaultResponse = 'For real-time prompt processing, connect the AI AssistView control 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.';
        
        defaultAIAssistView.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        
    }, 2000);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="defaultAssist"></div>
    </div>
</body>
</html>