Syncfusion AI Assistant

How can I help you?

Getting started in Angular Inline AI Assist component

2 Apr 202617 minutes to read

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

Dependencies

The following list of dependencies is required to use the Angular Inline AI Assist component in your application. The component is distributed as part of the @syncfusion/ej2-angular-interactive-chat package.

|-- @syncfusion/ej2-angular-interactive-chat
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-popups

Set up Angular environment

You can use the Angular CLI to set up your Angular applications. To install the Angular CLI, use the following command.

npm install -g @angular/cli

Create an Angular application

Start a new Angular application using the following Angular CLI command.

ng new my-app
cd my-app

Installing Syncfusion® package

Add the @syncfusion/ej2-angular-interactive-chat package to the application.

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

Adding CSS reference

The required CSS files are available in the ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using the following import statements.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import '../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

Adding Inline AI Assist component

Modify the template in the src/app/app.component.ts file to render the Angular Inline AI Assist component. Add the component by using the tags within the template section of the app.component.ts file.

import { Component } from '@angular/core';
import { InlineAIAssistModule } from '@syncfusion/ej2-angular-interactive-chat';

@Component({
    imports: [ InlineAIAssistModule ],
    standalone: true,
    selector: 'app-root',
    template: `
      <ejs-inlineaiassist id='inlineAssist'></ejs-inlineaiassist>
    `
})
export class AppComponent  { }

Run the application

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

ng serve

The following example illustrates the output in your browser.

<div id="container" style="height: 350px; width: 650px;">
    <button id="summarizeBtn" class="e-btn e-primary" style="margin-bottom: 10px;" (click)="onClick()">Content Summarize</button>
    <div id="editableText" contenteditable="true">
        <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>
    <ejs-inlineaiassist id="defaultInlineAssist" #inlineAssistComponent
        [relateTo]="'#summarizeBtn'"
        [responseSettings] = "responseSetting"
        popupWidth="500px"
        (promptRequest)="onPromptRequest($event)">
    </ejs-inlineaiassist>
</div>
import { ViewChild, Component } from '@angular/core';
import { InlineAIAssistModule, InlineAIAssistComponent, InlinePromptRequestEventArgs, ResponseSettingsModel, ResponseItemSelectEventArgs } from '@syncfusion/ej2-angular-interactive-chat';


@Component({
    imports: [InlineAIAssistModule ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    @ViewChild('inlineAssistComponent')
    public inlineAssistComponent!: InlineAIAssistComponent;

    public itemSelect = (args: ResponseItemSelectEventArgs) => {
        if (args.command.label === 'Accept') {
            const editable = document.getElementById('editableText') as HTMLElement | null;
            if (editable) {
                editable.innerHTML = '<p>' + this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1 ].response + '</p>';
            }
            this.inlineAssistComponent.hidePopup();
        } else if (args.command.label === 'Discard') {
            this.inlineAssistComponent.hidePopup();
        }
    }

    public responseSetting: ResponseSettingsModel = {
        itemSelect:  this.itemSelect
    }
    
    onClick(): void {
        this.inlineAssistComponent.showPopup();
    }

    public onPromptRequest = (args: InlinePromptRequestEventArgs) => {
        setTimeout(() => {
        let defaultResponse = 'For real-time prompt processing, connect 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.inlineAssistComponent.addResponse(defaultResponse);

        }, 1000);
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/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-angular-interactive-chat/styles/material.css';

#editableText {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 16px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid;
}

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 (e.g., ‘.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 (e.g., ‘.container’ or ‘#id’) or an HTMLElement.

<div id="container" style="height: 350px; width: 650px;">
    <button id="summarizeBtn" class="e-btn e-primary" style="margin-bottom: 10px;" (click)="onClick()">Content Summarize</button>
    <div id="editableText" contenteditable="true">
        <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>
    <ejs-inlineaiassist id="defaultInlineAssist" #inlineAssistComponent
        [relateTo]="'#summarizeBtn'"
        [target]="'#container'"
        [responseSettings] = "responseSetting"
        popupWidth="500px"
        (promptRequest)="onPromptRequest($event)">
    </ejs-inlineaiassist>
</div>
import { ViewChild, Component } from '@angular/core';
import { InlineAIAssistModule, InlineAIAssistComponent, InlinePromptRequestEventArgs, ResponseSettingsModel, ResponseItemSelectEventArgs } from '@syncfusion/ej2-angular-interactive-chat';


@Component({
    imports: [InlineAIAssistModule ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    @ViewChild('inlineAssistComponent')
    public inlineAssistComponent!: InlineAIAssistComponent;

    public itemSelect = (args: ResponseItemSelectEventArgs) => {
        if (args.command.label === 'Accept') {
            const editable = document.getElementById('editableText') as HTMLElement | null;
            if (editable) {
                editable.innerHTML = '<p>' + this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1 ].response + '</p>';
            }
            this.inlineAssistComponent.hidePopup();
        } else if (args.command.label === 'Discard') {
            this.inlineAssistComponent.hidePopup();
        }
    }

    public responseSetting: ResponseSettingsModel = {
        itemSelect:  this.itemSelect
    }
    
    onClick(): void {
        this.inlineAssistComponent.showPopup();
    }

    public onPromptRequest = (args: InlinePromptRequestEventArgs) => {
        setTimeout(() => {
        let defaultResponse = 'For real-time prompt processing, connect 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.inlineAssistComponent.addResponse(defaultResponse);

        }, 1000);
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/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-angular-interactive-chat/styles/material.css';

#editableText {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 16px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid;
}

Response display modes

Responses can be shown in two modes: Inline (updates content in-place) and Popup (shows responses in a floating popup). Toggle this behavior with the responseMode property.

<div id="mode-selector">
    <label for="responseMode">Response mode:</label>
    <select id="responseMode" (change)="onModeChange($event)" [value]="responseMode">
        <option value="Popup">Popup</option>
        <option value="Inline">Inline</option>
    </select>
</div>
<div id="container" style="height: 350px; width: 650px;">
    <button id="summarizeBtn" class="e-btn e-primary" style="margin-bottom: 10px;" (click)="onClick()">Content Summarize</button>
    <div id="editableText" contenteditable="true">
        <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>
    <ejs-inlineaiassist id="defaultInlineAssist" #inlineAssistComponent
        [relateTo]="'#summarizeBtn'"
        [responseMode]="responseMode"
        [responseSettings] = "responseSetting"
        popupWidth="500px"
        (promptRequest)="onPromptRequest($event)">
    </ejs-inlineaiassist>
</div>
import { ViewChild, Component } from '@angular/core';
import { InlineAIAssistModule, InlineAIAssistComponent, InlinePromptRequestEventArgs, ResponseSettingsModel, ResponseItemSelectEventArgs } from '@syncfusion/ej2-angular-interactive-chat';


@Component({
    imports: [InlineAIAssistModule ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    @ViewChild('inlineAssistComponent')
    public inlineAssistComponent!: InlineAIAssistComponent;
    
    public responseMode: string = 'Popup';

    public itemSelect = (args: ResponseItemSelectEventArgs) => {
        if (args.command.label === 'Accept') {
            const editable = document.getElementById('editableText') as HTMLElement | null;
            if (editable) {
                editable.innerHTML = '<p>' + this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1 ].response + '</p>';
            }
            this.inlineAssistComponent.hidePopup();
        } else if (args.command.label === 'Discard') {
            this.inlineAssistComponent.hidePopup();
        }
    }

    public responseSetting: ResponseSettingsModel = {
        itemSelect:  this.itemSelect
    }
    
    onClick(): void {
        this.inlineAssistComponent.showPopup();
    }
    
    onModeChange(event: Event): void {
        const selectElement = event.target as HTMLSelectElement;
        this.responseMode = selectElement.value;
        this.inlineAssistComponent.responseMode = selectElement.value;
        this.inlineAssistComponent.showPopup();
    }

    public onPromptRequest = (args: InlinePromptRequestEventArgs) => {
        setTimeout(() => {
        let defaultResponse = 'For real-time prompt processing, connect 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.inlineAssistComponent.addResponse(defaultResponse);

        }, 1000);
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/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-angular-interactive-chat/styles/material.css';

#editableText {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 16px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid;
}