Getting started in Angular AI AssistView component

31 Jul 202610 minutes to read

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

Prerequisites

Requirement	Version
Angular	12 and above
Node.js	14.0.0 or above, Recommended: Latest Version

Note: This guide supports recent Angular versions including Angular 21 and standalone components. For detailed compatibility, refer to the Angular version support matrix in the Syncfusion docs.

Angular supported versions

Angular Version	Minimum Syncfusion^® Angular AI AssistView / Interactive Chat Version
Angular v20	29.2.8
Angular v19	26.1.35
Angular v18	25.2.3
Angular v17	23.2.4
Angular v16	21.1.39
Angular v15	20.4.38
Angular v14	20.2.36
Angular v13	19.4.38 and above
Angular v12	19.3.43

Browser Support

Browser	Supported Versions
Google Chrome, including Android & iOS	Latest 2 versions
Mozilla Firefox	Latest version
Microsoft Edge	Latest 2 versions
Apple Safari, including iOS	Latest 2 versions

Setup the Angular application

A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Create a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app

This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]

By default, a CSS-based application is created. Use SCSS if required:

ng new syncfusion-angular-app --style=scss

During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Server_Side_Rendering_Setup

Select the required AI tool or ‘none’ if you do not need any AI tool.

AI_Tool_Setup

Navigate to your newly created application directory:

cd syncfusion-angular-app

Note: In Angular 19 and below, it uses app.ts, app.component.html, app.component.css etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding Syncfusion^® Angular AI AssistView package

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

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

Adding CSS reference

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

Install the Material 3 theme package using the following command:

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

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

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

Adding AI AssistView component

Modify the template in the src/app/app.ts file to render the AI AssistView component. Add the Angular AI AssistView by using <ejs-aiassistview> selector in template section of the app.ts file.

app.ts
main.ts
import { AIAssistViewModule } from '@syncfusion/ej2-angular-interactive-chat';

import { Component } from '@angular/core';

@Component({
    imports: [ AIAssistViewModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the AI AssistView component
    template: `<div ejs-aiassistview id='aiAssistView'></div>`
})

export class App {

}
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app.app';
bootstrapApplication(App).catch((err) => console.error(err));

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.

ng serve

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

Before using Syncfusion components, generate a license key from the Syncfusion License Dashboard and register

Open the main.ts file and add the following code:

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

Note: A valid Syncfusion license is required for production use. If a valid license is not registered, a trial license warning message will be displayed when the application runs.

Configure suggestions and responses

Use the promptSuggestions property to display a list of predefined suggestion chips. To provide custom responses, handle the promptRequest event, which is triggered when a user query is sent.

app.ts
main.ts
import { AIAssistViewModule } from '@syncfusion/ej2-angular-interactive-chat';

import { Component, ViewChild } from '@angular/core';
import { AIAssistViewComponent } from '@syncfusion/ej2-angular-interactive-chat';
import { PromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';


@Component({
    imports: [ AIAssistViewModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the AI AssistView component
    template: `<div ejs-aiassistview id='aiAssistView' #aiAssistViewComponent (promptRequest)="onPromptRequest($event)" [promptSuggestions]="promptSuggestions"></div>`
})

export class App {
    @ViewChild('aiAssistViewComponent')
    public aiAssistViewComponent!: AIAssistViewComponent;

    public promptSuggestions: string[] = [
        "How do I prioritize my tasks?",
        "How can I improve my time management skills?"
    ];

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

    public onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
        let foundPrompt = this.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.';

        this.aiAssistViewComponent.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);

        }, 2000);
    };

}
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app.app';
bootstrapApplication(App).catch((err) => console.error(err));

Production Build

To create an optimized production build, run:

ng build

This command compiles the application and generates the production-ready files in the dist/ directory.

To preview the production build locally, run:

npx http-server dist

Then open the URL displayed in the terminal.

Troubleshooting

AI AssistView styles are not applied: Ensure the required Syncfusion theme CSS is imported in src/styles.css.
Trial license warning message: Register a valid Syncfusion license key using the registerLicense() method from @syncfusion/ej2-base.
Port 4200 is already in use: Stop the conflicting process or run the application on a different port:
```
ng serve --port 3000
```

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Getting started in Angular AI AssistView component

Prerequisites

Angular supported versions

Browser Support

Setup the Angular application

Create a new application

Adding Syncfusion^® Angular AI AssistView package

Adding CSS reference

Adding AI AssistView component

Run the application

Registering Your Syncfusion License

Configure suggestions and responses

Production Build

Troubleshooting

Getting started in Angular AI AssistView component

Prerequisites

Angular supported versions

Browser Support

Setup the Angular application

Create a new application

Adding Syncfusion® Angular AI AssistView package

Adding CSS reference

Adding AI AssistView component

Run the application

Registering Your Syncfusion License

Configure suggestions and responses

Production Build

Troubleshooting

Adding Syncfusion^® Angular AI AssistView package