AI Assistant Chat - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatAIAssistantChat",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatAIAssistantChat } from \"@cometchat/chat-uikit-react\";",
  "description": "Composite AI agent chat with streaming responses, quick suggestions, new-chat reset, and chat history sidebar.",
  "cssRootClass": ".cometchat-ai-assistant-chat",
  "requiredProps": {
    "user": "CometChat.User — the AI agent user object"
  },
  "optionalProps": {
    "streamingSpeed": "number",
    "suggestedMessages": "string[]",
    "hideSuggestedMessages": "boolean",
    "hideNewChat": "boolean",
    "hideChatHistory": "boolean",
    "showBackButton": "boolean",
    "showCloseButton": "boolean",
    "loadLastAgentConversation": "boolean",
    "parentMessageId": "number",
    "aiAssistantTools": "CometChatAIAssistantTools",
    "templates": "CometChatMessageTemplate[]",
    "headerItemView": "JSX.Element",
    "headerTitleView": "JSX.Element",
    "headerSubtitleView": "JSX.Element",
    "headerLeadingView": "JSX.Element",
    "headerTrailingView": "JSX.Element",
    "headerAuxiliaryButtonView": "JSX.Element",
    "emptyChatImageView": "JSX.Element",
    "emptyChatGreetingView": "JSX.Element",
    "emptyChatIntroMessageView": "JSX.Element",
    "emptyView": "JSX.Element",
    "loadingView": "JSX.Element",
    "errorView": "JSX.Element"
  },
  "callbacks": {
    "onBackButtonClicked": "() => void",
    "onCloseButtonClicked": "() => void",
    "onSendButtonClick": "(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void",
    "onError": "(e: CometChat.CometChatException) => void"
  },
  "events": null,
  "minimalExample": "<CometChatAIAssistantChat user={agentUser} />"
}

Where It Fits

CometChatAIAssistantChat is a standalone AI chat panel. It composes an internal message header, message list, and message composer into a self-contained AI conversation experience. It requires a CometChat.User representing the AI agent.

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIAssistantPanel() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <div style={{ height: "100vh", width: 480 }}>
      <CometChatAIAssistantChat user={agent} />
    </div>
  );
}

Minimal Render

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIAssistantDemo() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return <CometChatAIAssistantChat user={agent} />;
}

Root CSS class: .cometchat-ai-assistant-chat

Actions and Events

Callback Props

onBackButtonClicked

Fires when the header back button is clicked. Requires showBackButton={true}.

Detail	Value
When it fires	User clicks the back button
Payload type	`() => void`

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIAssistantWithBack() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      showBackButton={true}
      onBackButtonClicked={() => console.log("Back clicked")}
    />
  );
}

onCloseButtonClicked

Fires when the header close button is clicked. Requires showCloseButton={true}.

Detail	Value
When it fires	User clicks the close button
Payload type	`() => void`

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIAssistantWithClose() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      showCloseButton={true}
      onCloseButtonClicked={() => console.log("Close clicked")}
    />
  );
}

onSendButtonClick

Fires when the composer send button is clicked.

Detail	Value
When it fires	User clicks the send button
Payload type	`(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void`

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIAssistantWithSend() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      onSendButtonClick={(message) => console.log("Sent:", message)}
    />
  );
}

onError

Fires when the component encounters an internal error.

Detail	Value
When it fires	Any internal error during rendering or data fetching
Payload type	`(error: CometChat.CometChatException) => void`

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIAssistantWithError() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      onError={(error) => console.error("AI chat error:", error)}
    />
  );
}

Global UI Events

The AI Assistant Chat component does not emit global UI events. Interaction handling uses the callback props above.

SDK Events (Real-Time, Automatic)

The component internally manages SDK communication for AI streaming. No manual listener attachment needed.

Custom View Slots

Slot	Type	Replaces
`headerItemView`	`JSX.Element`	Entire header list item
`headerTitleView`	`JSX.Element`	Header title text
`headerSubtitleView`	`JSX.Element`	Header subtitle text
`headerLeadingView`	`JSX.Element`	Header avatar / left section
`headerTrailingView`	`JSX.Element`	Header right section
`headerAuxiliaryButtonView`	`JSX.Element`	Header auxiliary buttons (New Chat, History)
`emptyChatImageView`	`JSX.Element`	Empty state image
`emptyChatGreetingView`	`JSX.Element`	Empty state greeting title
`emptyChatIntroMessageView`	`JSX.Element`	Empty state intro subtitle
`emptyView`	`JSX.Element`	Message list empty state
`loadingView`	`JSX.Element`	Loading state
`errorView`	`JSX.Element`	Error state
`aiAssistantTools`	`CometChatAIAssistantTools`	Tool/function call handlers
`templates`	`CometChatMessageTemplate[]`	Message bubble templates

emptyChatImageView

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIAssistantCustomImage() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      emptyChatImageView={<img src={"ICON_URL"} height={60} width={60} alt="" />}
    />
  );
}

emptyChatGreetingView

TypeScript
CSS

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIAssistantCustomGreeting() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      emptyChatGreetingView={
        <div className="cometchat-ai-assistant-chat__empty-chat-greeting">
          <span className="plan-name">Free Plan</span> .
          <span className="upgrade-button">Upgrade</span>
        </div>
      }
    />
  );
}

.cometchat-ai-assistant-chat__empty-chat-greeting {
  display: flex;
  padding: 8px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  background: #f5f5f5;
  width: fit-content;
  align-self: center;
}

.cometchat-ai-assistant-chat__empty-chat-greeting .upgrade-button {
  color: #6852d6;
}

emptyChatIntroMessageView

TypeScript
CSS

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIAssistantCustomIntro() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      emptyChatIntroMessageView={
        <div className="cometchat-ai-assistant-chat__empty-chat-intro">
          Hey, nice to see you What's new?
        </div>
      }
    />
  );
}

.cometchat-ai-assistant-chat__empty-chat-intro {
  display: flex;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: #f9f8fd;
  width: 172px;
  color: #141414;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  margin: 10px 0;
}

aiAssistantTools

Pass a CometChatAIAssistantTools instance to enable tool/function calls during assistant replies.

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatAIAssistantChat,
  CometChatAIAssistantTools,
} from "@cometchat/chat-uikit-react";

function AIAssistantWithTools() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  const tools = new CometChatAIAssistantTools({
    getCurrentWeather: ({ location }: { location: string }) => {
      console.log("Fetching weather for", location);
    },
    createTicket: ({ title }: { title: string }) => {
      console.log("Create ticket:", title);
    },
  });

  if (!agent) return null;

  return <CometChatAIAssistantChat user={agent} aiAssistantTools={tools} />;
}

templates

Custom message templates to control message bubble rendering. See CometChatMessageTemplate.

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatAIAssistantChat,
  ChatConfigurator,
} from "@cometchat/chat-uikit-react";

function AIAssistantWithTemplates() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  const getTemplates = () => {
    const templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
    templates.map((data) => {
      data.footerView = (message) => null;
    });
    return templates;
  };

  if (!agent) return null;

  return <CometChatAIAssistantChat user={agent} templates={getTemplates()} />;
}

Common Patterns

AI assistant with suggestions and history

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function FullFeaturedAssistant() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      suggestedMessages={["What can you help with?", "Summarize my tasks", "Draft an email"]}
      loadLastAgentConversation={true}
      showBackButton={true}
      onBackButtonClicked={() => console.log("Navigate back")}
    />
  );
}

Minimal assistant — no chrome

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function MinimalAssistant() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      hideNewChat={true}
      hideChatHistory={true}
      hideSuggestedMessages={true}
    />
  );
}

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css. The cascade:

Global tokens (e.g., --cometchat-primary-color, --cometchat-background-color-01) set on the .cometchat root wrapper.
Component CSS (.cometchat-ai-assistant-chat) consumes these tokens via var().
Overrides target .cometchat-ai-assistant-chat descendant selectors.

Key Selectors

Target	Selector
Root	`.cometchat-ai-assistant-chat`
Wrapper	`.cometchat-ai-assistant-chat__wrapper`
Header wrapper	`.cometchat-ai-assistant-chat__header-wrapper`
Header auxiliary view	`.cometchat-ai-assistant-chat__header-auxiliary-view`
Message list wrapper	`.cometchat-ai-assistant-chat__message-list-wrapper`
Composer wrapper	`.cometchat-ai-assistant-chat__composer-wrapper`
Send button	`.cometchat-ai-assistant-chat__send-button-view`
Send button (active)	`.cometchat-ai-assistant-chat__send-button-view--active`
Send button (streaming)	`.cometchat-ai-assistant-chat__send-button-view--streaming`
Empty state	`.cometchat-ai-assistant-chat__empty-state`
Empty state content	`.cometchat-ai-assistant-chat__empty-state-content`
Empty state icon	`.cometchat-ai-assistant-chat__empty-state-icon`
Greeting message	`.cometchat-ai-assistant-chat__empty-state-greeting-message`
Intro message	`.cometchat-ai-assistant-chat__empty-state-intro-message`
Suggested messages	`.cometchat-ai-assistant-chat__empty-state-suggested-messages`
Suggestion pill	`.cometchat-ai-assistant-chat__suggested-message-pill`
Suggestion icon	`.cometchat-ai-assistant-chat__suggested-message-icon`
Chat history sidebar	`.cometchat-ai-assistant-chat__sidebar`
Sidebar open	`.cometchat-ai-assistant-chat__sidebar--open`
Sidebar overlay	`.cometchat-ai-assistant-chat__sidebar-overlay`
Copy button	`.cometchat-ai-assistant-message-bubble__copy`

Example: Brand-themed AI assistant

.cometchat-ai-assistant-chat
  .cometchat-ai-assistant-chat__suggested-message-pill {
  background: #30a46c;
  color: #ffffff;
  font-size: 9px;
}

.cometchat-ai-assistant-chat
  .cometchat-ai-assistant-chat__suggested-message-pill
  .cometchat-ai-assistant-chat__suggested-message-icon {
  background: #ffffff;
  width: 9.55px;
  height: 9.55px;
}

.cometchat-ai-assistant-chat
  .cometchat-ai-assistant-chat__header-auxiliary-view
  .cometchat-button
  .cometchat-button__icon-default {
  background: #30a46c;
}

Customization Matrix

What to change	Where	Property/API	Example
Override behavior on user interaction	Component props	`on<Event>` callbacks	`onBackButtonClicked={() => navigate(-1)}`
Toggle visibility of UI elements	Component props	`hide<Feature>` / `show<Feature>` boolean props	`hideNewChat={true}`
Replace a section of the UI	Component props	View slot props	`emptyChatGreetingView={<div>Hello</div>}`
Change colors, fonts, spacing	Global CSS	Target `.cometchat-ai-assistant-chat` class	`.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__suggested-message-pill { background: #30a46c; }`

Props

aiAssistantTools

Key	Value
Type	`CometChatAIAssistantTools`
Default	`undefined`

Tool/function call handlers for the AI assistant.

emptyView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Custom empty state for the message list.

emptyChatGreetingView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Custom greeting title in the empty chat state. Default uses agent metadata greetingMessage or user name.

emptyChatImageView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Custom image in the empty chat state.

emptyChatIntroMessageView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Custom intro subtitle in the empty chat state. Default uses agent metadata introductoryMessage.

errorView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Custom error state view.

headerAuxiliaryButtonView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Replaces the header auxiliary buttons (New Chat, History).

headerItemView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Replaces the entire header list item.

headerLeadingView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Replaces the header avatar / left section.

headerSubtitleView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Replaces the header subtitle text.

headerTitleView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Replaces the header title text.

headerTrailingView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Replaces the header right section.

hideChatHistory

Key	Value
Type	`boolean`
Default	`undefined`

Hides the History button/sidebar.

hideNewChat

Key	Value
Type	`boolean`
Default	`undefined`

Hides the New Chat button in header.

hideSuggestedMessages

Key	Value
Type	`boolean`
Default	`undefined`

Hides the suggested messages section in the empty state.

loadLastAgentConversation

Key	Value
Type	`boolean`
Default	`false`

Loads the most recent existing agent conversation on mount.

loadingView

Key	Value
Type	`React.JSX.Element`
Default	`undefined`

Custom loading state view.

onBackButtonClicked

Key	Value
Type	`() => void`
Default	`undefined`

Fires when the header back button is clicked. Requires showBackButton={true}.

onCloseButtonClicked

Key	Value
Type	`() => void`
Default	`undefined`

Fires when the header close button is clicked. Requires showCloseButton={true}.

onError

Key	Value
Type	`(e: CometChat.CometChatException) => void`
Default	`undefined`

Fires on internal errors.

onSendButtonClick

Key	Value
Type	`(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void`
Default	`undefined`

Fires when the composer send button is clicked.

parentMessageId

Key	Value
Type	`number`
Default	`undefined`

Loads a specific agent conversation. Takes priority over loadLastAgentConversation.

showBackButton

Key	Value
Type	`boolean`
Default	`undefined`

Shows back button in header.

showCloseButton

Key	Value
Type	`boolean`
Default	`undefined`

Shows close button in header.

streamingSpeed

Key	Value
Type	`number`
Default	`undefined`

Characters-per-second speed for streaming replies.

suggestedMessages

Key	Value
Type	`string[]`
Default	`undefined`

Quick prompt suggestions displayed in the empty state.

templates

Key	Value
Type	`CometChatMessageTemplate[]`
Default	`undefined`

Custom message bubble templates. See CometChatMessageTemplate.

user

Key	Value
Type	`CometChat.User`
Default	— (required)

The AI agent user object. Must be fetched via CometChat.getUser() before passing.

CSS Selectors

Target	Selector
Root	`.cometchat-ai-assistant-chat`
Wrapper	`.cometchat-ai-assistant-chat__wrapper`
Header wrapper	`.cometchat-ai-assistant-chat__header-wrapper`
Header auxiliary view	`.cometchat-ai-assistant-chat__header-auxiliary-view`
Message list wrapper	`.cometchat-ai-assistant-chat__message-list-wrapper`
Composer wrapper	`.cometchat-ai-assistant-chat__composer-wrapper`
Send button	`.cometchat-ai-assistant-chat__send-button-view`
Send button (active)	`.cometchat-ai-assistant-chat__send-button-view--active`
Send button (streaming)	`.cometchat-ai-assistant-chat__send-button-view--streaming`
Empty state	`.cometchat-ai-assistant-chat__empty-state`
Empty state content	`.cometchat-ai-assistant-chat__empty-state-content`
Empty state icon	`.cometchat-ai-assistant-chat__empty-state-icon`
Greeting message	`.cometchat-ai-assistant-chat__empty-state-greeting-message`
Intro message	`.cometchat-ai-assistant-chat__empty-state-intro-message`
Suggested messages	`.cometchat-ai-assistant-chat__empty-state-suggested-messages`
Suggestion pill	`.cometchat-ai-assistant-chat__suggested-message-pill`
Suggestion icon	`.cometchat-ai-assistant-chat__suggested-message-icon`
Chat history sidebar	`.cometchat-ai-assistant-chat__sidebar`
Sidebar open	`.cometchat-ai-assistant-chat__sidebar--open`
Sidebar overlay	`.cometchat-ai-assistant-chat__sidebar-overlay`
Copy button	`.cometchat-ai-assistant-message-bubble__copy`

Documentation Index

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​onBackButtonClicked

​onCloseButtonClicked

​onSendButtonClick

​onError

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​emptyChatImageView

​emptyChatGreetingView

​emptyChatIntroMessageView

​aiAssistantTools

​templates

​Common Patterns

​AI assistant with suggestions and history

​Minimal assistant — no chrome

​CSS Architecture

​Key Selectors

​Example: Brand-themed AI assistant

​Customization Matrix

​Props

​aiAssistantTools

​emptyView

​emptyChatGreetingView

​emptyChatImageView

​emptyChatIntroMessageView

​errorView

​headerAuxiliaryButtonView

​headerItemView

​headerLeadingView

​headerSubtitleView

​headerTitleView

​headerTrailingView

​hideChatHistory

​hideNewChat

​hideSuggestedMessages

​loadLastAgentConversation

​loadingView

​onBackButtonClicked

​onCloseButtonClicked

​onError

​onSendButtonClick

​parentMessageId

​showBackButton

​showCloseButton

​streamingSpeed

​suggestedMessages

​templates

​user

​CSS Selectors

Where It Fits

Minimal Render

Actions and Events

Callback Props

onBackButtonClicked

onCloseButtonClicked

onSendButtonClick

onError

Global UI Events

SDK Events (Real-Time, Automatic)

Custom View Slots

emptyChatImageView

emptyChatGreetingView

emptyChatIntroMessageView

aiAssistantTools

templates

Common Patterns

AI assistant with suggestions and history

Minimal assistant — no chrome

CSS Architecture

Key Selectors

Example: Brand-themed AI assistant

Customization Matrix

Props

aiAssistantTools

emptyView

emptyChatGreetingView

emptyChatImageView

emptyChatIntroMessageView

errorView

headerAuxiliaryButtonView

headerItemView

headerLeadingView

headerSubtitleView

headerTitleView

headerTrailingView

hideChatHistory

hideNewChat

hideSuggestedMessages

loadLastAgentConversation

loadingView

onBackButtonClicked

onCloseButtonClicked

onError

onSendButtonClick

parentMessageId

showBackButton

showCloseButton

streamingSpeed

suggestedMessages

templates

user

CSS Selectors