# @syncfusion/ej2-interactive-chat > Essential JS 2 Component Latest version **34.2.8** (published 2026-09-15) · SEE LICENSE IN license license · 0 weekly downloads ## Install ```sh npm install @syncfusion/ej2-interactive-chat pnpm add @syncfusion/ej2-interactive-chat yarn add @syncfusion/ej2-interactive-chat bun add @syncfusion/ej2-interactive-chat ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; large bundle. ## Facts | | | |---|---| | Version | 34.2.8 | | Published | 2026-09-15 | | First published | 2024-09-18 | | Weekly downloads | 0 | | License | SEE LICENSE IN license | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 9 | | Unpacked size | 12.6 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Syncfusion Inc. | | Maintainers | syncfusionorg, essentialjs2, syncfusion-javascript | | Keywords | ej2, syncfusion, ej2-interactive-chat, ej2-interactive-chat-components, assistant, openai, ai, chat, chatbot, copilot, ai-chat, ai-chatbot, ai-assistant, ai-copilot, chatgpt, gpt4, gpt-4, conversational-ui, conversational-ai | ## Links - npm: https://www.npmjs.com/package/@syncfusion/ej2-interactive-chat - Repository: https://github.com/essential-studio/ej2-interactive-chat-components - Homepage: https://www.syncfusion.com/javascript-ui-controls - Issues: https://github.com/essential-studio/ej2-interactive-chat-components/issues - npm.io page: https://npm.io/package/@syncfusion/ej2-interactive-chat ## Dependencies (9) - [@syncfusion/ej2-base](https://npm.io/package/@syncfusion/ej2-base.md) ~34.2.8 - [@syncfusion/ej2-inputs](https://npm.io/package/@syncfusion/ej2-inputs.md) ~34.2.8 - [@syncfusion/ej2-popups](https://npm.io/package/@syncfusion/ej2-popups.md) ~34.2.8 - [@syncfusion/ej2-layouts](https://npm.io/package/@syncfusion/ej2-layouts.md) ~34.2.8 - [@syncfusion/ej2-dropdowns](https://npm.io/package/@syncfusion/ej2-dropdowns.md) ~34.2.8 - [@syncfusion/ej2-navigations](https://npm.io/package/@syncfusion/ej2-navigations.md) ~34.2.8 - [@syncfusion/ej2-splitbuttons](https://npm.io/package/@syncfusion/ej2-splitbuttons.md) ~34.2.8 - [@syncfusion/ej2-notifications](https://npm.io/package/@syncfusion/ej2-notifications.md) ~34.2.8 - [@syncfusion/ej2-markdown-converter](https://npm.io/package/@syncfusion/ej2-markdown-converter.md) ~34.2.8 ## Alternatives - [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads - [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads - [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads - [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads - [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads ## Recent versions - 34.2.8 (latest) — 2026-09-15 - 34.2.6 — 2026-09-01 - 34.2.2 — 2026-08-05 - 34.1.29 — 2026-07-06 - 33.2.15 — 2026-06-23 - 33.2.13 — 2026-06-16 - 33.2.12 — 2026-06-09 - 33.2.10 — 2026-06-02 - 33.2.8 — 2026-05-26 - 33.2.7 — 2026-05-19 - 33.2.6 — 2026-05-12 - 33.2.5 — 2026-05-05 - 33.2.4 — 2026-04-28 - 33.2.3 — 2026-04-21 - 33.1.49 — 2026-04-14 - … 51 more at https://npm.io/package/@syncfusion/ej2-interactive-chat/versions ## README # JavaScript Interactive Chat Controls > **Using this package with an AI coding agent** > > Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt: > > ```text > Set up this project for Syncfusion before generating code. Fetch > and follow the official instructions at https://ai.syncfusion.com, > then report the detected platform, installed skill pack, MCP > status, and any required licensing action. > ``` > The setup detects your project’s platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills. > > **Platform reference:** [https://ai.syncfusion.com/javascript/llms.txt](https://ai.syncfusion.com/javascript/llms.txt) A package of JavaScript controls for building conversational AI interfaces and chat applications. Includes AI AssistView, Chat UI and Inline AI Assist controls for seamless AI service integration. ## What's Included in the JavaScript Interactive Chat Package The JavaScript Interactive Chat package includes the following components. * [JavaScript AI AssistView](#javascript-ai-assistview) * [JavaScript Chat UI](#javascript-chat-ui) * [JavaScript Inline AI Assist](#javascript-inline-ai-assist) --- ### JavaScript AI AssistView The [JavaScript AI AssistView](https://www.syncfusion.com/javascript-ui-controls/js-ai-assist?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) control is a versatile and modern UI tool designed to seamlessly integrate AI services into your web applications. It enables users to send prompts, execute commands through a feature-rich toolbar, and effortlessly display AI-generated responses in a user-friendly interface.

Getting Started . Online demos . Learn more

JavaScript AI AssistView Control

#### Key features * **Prompt Input**: Enable users to send prompts and queries to AI services. * **AI Response Display**: Effortlessly display AI-generated responses in a user-friendly interface. * **Built-in toolbars**: Predefined toolbar items like copy, edit, and like/dislike for easy interaction with prompts and responses. * **Prompt suggestions**: Supports initial or on-demand prompt suggestions with a customizable header. * **Header toolbar**: Allows adding toolbar items in the header with options for executing custom commands. * **Custom views**: Extensive customization options for creating personalized views in addition to the built-in assist view. * **Data Binding**: Bind to local data, API responses, and observable collections. * **Custom Templates**: Rich templates for rendering prompts and responses. * **Keyboard Navigation**: Full keyboard support (Arrow keys, Enter, Escape) for accessibility. * **Theming and Styling**: Custom CSS, themes, and styling options for seamless integration. * **Accessibility**: Full keyboard navigation and ARIA support for screen readers. * **Generative UI**: Render structured AI responses, including text and interactive tools, in a rich conversational layout for an engaging user experience. * **Thinking UI**: Visualize AI workflow stages such as searching, processing, analyzing, and summarizing in real time to provide greater transparency into response generation. **Documentation:** * [Getting Started](https://ej2.syncfusion.com/documentation/ai-assistview/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) * [Feature Overview](https://www.syncfusion.com/javascript-ui-controls/js-ai-assistview?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) * [Live Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm#/fluent2/ai-assistview/default.html) * [API Reference](https://ej2.syncfusion.com/documentation/api/ai-assistview/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) --- ### JavaScript Chat UI The [JavaScript Chat UI](https://www.syncfusion.com/javascript-ui-controls/js-chat-ui?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) control is a versatile and modern UI tool designed to seamlessly integrate conversational interfaces into your web applications. It enables users to send and receive messages with distinct visual styles, making it ideal for both user-to-user and user-to-AI chat experiences.

Getting Started . Online demos . Learn more

JavaScript Chat UI Control

#### Key features * **Interactive Conversations**: Build responsive chat interfaces for user-AI interactions. * **Message Display**: Render user and AI messages with different visual styles. * **AI Response Rendering**: Display AI-generated responses in a user-friendly interface. * **Data Binding**: Support for arrays, API data, and observable collections. * **Custom Templates**: Rich templates for rendering messages and content. * **Keyboard Navigation**: Full keyboard support for accessibility. * **Theming and Styling**: Custom CSS, themes, and styling options for seamless integration. **Documentation:** * [Getting Started](https://ej2.syncfusion.com/documentation/chat-ui/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) * [Feature Overview](https://www.syncfusion.com/javascript-ui-controls/js-chat-ui?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) * [Live Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm#/fluent2/chat-ui/default.html) * [API Reference](https://ej2.syncfusion.com/documentation/api/chat-ui/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) --- ### JavaScript Inline AI Assist The [JavaScript Inline AI Assist](https://www.syncfusion.com/javascript-ui-controls/js-inline-ai-assist?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) control is a versatile, integrated AI-powered assistant for modern web applications. It enables users to prompt AI services and receive intelligent responses directly within their interface, with flexible display modes and extensive customization options.

Getting Started . Online demos . Learn more

JavaScript Inline AI Assist Control

#### Key features * **Dual Response Modes**: Display AI responses inline at the cursor position or in a popup overlay for flexible UI integration. * **Command Actions**: Display predefined commands and quick-action suggestions using mention-style popups with customizable grouping and icons via CommandMenu. * **Response Actions**: Configurable actions such as Accept, Discard, and custom items using ResponseActions to manage AI-generated content. * **Action Toolbar**: Includes a toolbar in the prompt input area with a send button and custom actions. * **Markdown**: Automatic conversion of Markdown responses to HTML for rich content rendering. * **Streaming Responses**: Supports word-by-word or chunk-based streaming with real-time visual feedback and stop controls. * **Indicators**: Shows processing states using inline indicators and skeleton loading in popup mode. * **Customization**: Supports customization of templates, appearance, and response rendering. **Documentation:** * [Getting Started](https://ej2.syncfusion.com/documentation/inline-ai-assist/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) * [Feature Overview](https://www.syncfusion.com/javascript-ui-controls/js-inline-ai-assist?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) * [Live Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm#/fluent2/inline-ai-assist/default.html) * [API Reference](https://ej2.syncfusion.com/documentation/api/inline-ai-assist/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) --- ## ⚡️ Quick Start The JavaScript Interactive Chat controls are easy to set up. Simply install the package, import the module, and add the desired control to your app. ### Installation To install the Interactive Chat package and its dependencies via npm, run the following command: ```bash npm install @syncfusion/ej2-interactive-chat --save ``` ### Add the Theme CSS Import the theme styles in your application's entry CSS/JS file: ```css @import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css"; ``` Or, if using a bundler that supports CSS imports in JS: ```javascript import '@syncfusion/ej2-interactive-chat/styles/material.css'; ``` --- ### AI AssistView **Add the Target Element** ```html
``` **Import the Module** ```javascript import { AIAssistView } from '@syncfusion/ej2-interactive-chat'; ``` **Initialize the Control** ```javascript let aiAssistView = new AIAssistView({ // Add options like promptSuggestions, headerToolbarSettings, etc. here }); aiAssistView.appendTo('#aiassist'); ``` --- ### Chat UI **Add the Target Element** ```html
``` **Import the Module** ```javascript import { ChatUI } from '@syncfusion/ej2-interactive-chat'; ``` **Initialize the Control** ```javascript let currentUser = { id: 'user1', user: 'Albert' }; let otherUser = { id: 'user2', user: 'Michale Suyama' }; let chatUI = new ChatUI({ user: currentUser, messages: [ { text: 'Want to get coffee tomorrow?', author: currentUser }, { text: 'Sure! What time?', author: otherUser }, { text: 'How about 10 AM?', author: currentUser } ] }); chatUI.appendTo('#chatui'); ``` --- ### Inline AI Assist **Add the Target Elements** ```html
``` **Import the Module** ```javascript import { InlineAIAssist } from '@syncfusion/ej2-interactive-chat'; ``` **Initialize the Control** ```javascript let inlineAIAssist = new InlineAIAssist({ relateTo: '#inlineAssistTarget', promptRequested: (args) => { setTimeout(() => { inlineAIAssist.updateResponse( 'For real-time prompt processing, connect the Inline AI Assist control to your preferred AI service.' ); }, 1000); } }); inlineAIAssist.appendTo('#inlineaiassist'); document.getElementById('openBtn').addEventListener('click', () => { inlineAIAssist.showPopup(); }); ``` --- ### Run the Application Now, open your project in a browser, and the AI AssistView, Chat UI, and Inline AI Assist controls will be displayed! 🚀 > **ℹ️ Note:** > For more information on using Interactive Chat controls with Syncfusion, refer to our documentation: > - [AI AssistView Documentation](https://ej2.syncfusion.com/documentation/ai-assistview/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) > - [Chat UI Documentation](https://ej2.syncfusion.com/documentation/chat-ui/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) > - [Inline AI Assist Documentation](https://ej2.syncfusion.com/documentation/inline-ai-assist/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) --- ## Supported frameworks Interactive chat controls are also offered in following list of frameworks. | [](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)
     [Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)
       [React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | | :-----: | :-----: | :-----: | :-----: | :-----: | --- ## Resources * [AI AssistView Documentation](https://ej2.syncfusion.com/documentation/ai-assistview/getting-started) * [Chat UI Documentation](https://ej2.syncfusion.com/documentation/chat-ui/getting-started) * [Inline AI Assist Documentation](https://ej2.syncfusion.com/documentation/inline-ai-assist/getting-started) * [Theme Studio](https://ej2.syncfusion.com/themestudio/) * [Custom Resource Generator](https://crg.syncfusion.com/) * [What's New](https://www.syncfusion.com/products/whatsnew/essential-js2?utm_medium=listing&utm_source=github) * [Road Map](https://www.syncfusion.com/products/roadmap/essential-js2?utm_medium=listing&utm_source=github) * [E-Books](https://www.syncfusion.com/ebooks?tag=javascript&utm_medium=listing&utm_source=github) --- ## Support Product support is available through the following mediums. * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new) * [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) * Live chat --- ## License and copyright > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this control, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=javascript-interactive-chat-npm) for more info. © Copyright 2026 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. --- _Source: https://npm.io/package/@syncfusion/ej2-interactive-chat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._