Skip to main content
Build an AI assistant chat surface with streaming responses and suggestions.

​
When to use this

  • You need a dedicated AI agent chat experience.
  • You want streaming responses and suggested prompts.
  • You need a chat history sidebar for AI conversations.

​
Prerequisites

  • CometChat React UI Kit v6 installed: @cometchat/chat-uikit-react.
  • CometChatUIKit.init() and CometChatUIKit.login() complete before rendering.
  • A CometChat.User representing the AI agent.

​
Quick start

  1. Add the component to your UI.
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

export default function AIAssistantChatDemo() {
  const [agent, setAgent] = React.useState();

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

  return agent ? <CometChatAIAssistantChat user={agent} /> : null;
}
What this does: Renders the minimal version of the component.
  1. Verify the component renders after init() and login().

​
Core concepts

  • user is required and represents the AI agent.
  • Use streamingSpeed to control response pace.
  • Use suggestedMessages to show quick prompts.

​
Implementation

  • Package: @cometchat/chat-uikit-react
  • Import: import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
  • Minimal JSX: <CometChatAIAssistantChat user={agent} /> — requires a CometChat.User representing the AI agent
  • Required setup: CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID") then CometChat.getUser("assistant_uid")
  • Key props: user (CometChat.User, required), streamingSpeed (number), suggestedMessages (string[]), hideNewChat (boolean), hideChatHistory (boolean)
  • CSS class: .cometchat-ai-assistant-chat

​
Overview

What you’re changing: Overview. Where to change it: Component props or CSS as shown below. Default behavior: UI Kit defaults. Override: Use the examples in this section. Verify: The UI reflects the change shown below. CometChatAIAssistantChat is a composite component that assembles the message header, message list, and message composer to provide an AI agent chat experience. It supports streaming responses, quick starter suggestions, “New Chat” to reset context, and a chat history sidebar.
Before using this component: Ensure CometChatUIKit.init(UIKitSettings) has completed and the user is logged in via CometChatUIKit.login("UID"). See React.js Integration.
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

    React.useEffect(() => {
        // Replace with your assistant UID
        CometChat.getUser("assistant_uid").then((u) => setAgent(u));
    }, []);

    if (!agent) return null;

    return(
        <>
            <CometChatAIAssistantChat user={agent} />
        </>
    ); 
}
What this does: Shows the code for this step.
A CometChat.User (the AI agent) is required to start the assistant chat.

​
Actions

What you’re changing: Actions. Where to change it: Component props or CSS as shown below. Default behavior: UI Kit defaults. Override: Use the examples in this section. Verify: The UI reflects the change shown below. Actions control how a component behaves. You can hook into the following callbacks:
1. onBackButtonClicked
Called when the header back button is clicked (visible when showBackButton is true). 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

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

    const handleBack = () => {
        // your custom action
    };

    if (!agent) return null;

    return (
        <CometChatAIAssistantChat
            user={agent}
            showBackButton={true}
            onBackButtonClicked={handleBack}
        />
    ); 
}
What this does: Shows the code for this step.
2. onCloseButtonClicked
Called when the header close button is clicked (visible when showCloseButton is true). 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

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

    const handleClose = () => {
        // your custom action
    };

    if (!agent) return null;

    return (
        <CometChatAIAssistantChat 
            user={agent} 
            showCloseButton={true} 
            onCloseButtonClicked={handleClose} 
        />
    );
}
What this does: Shows the code for this step.
3. onSendButtonClick
Called when the composer send button is clicked. 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

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

    const handleSendButton = () => {
        // your custom action
    };

    if (!agent) return null;

    return (
        <CometChatAIAssistantChat 
            user={agent}
            onSendButtonClick={handleSendButton} 
        />
    );
}
What this does: Shows the code for this step.
4. onError
Listen to errors from the underlying header, list, or composer. 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
export function AIAssistantChatDemo() {
    const [agent, setAgent] = React.useState<CometChat.User>();

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

    const handleError = (error: CometChat.CometChatException) => {
        // your error handling
    };

    if (!agent) return null;

    return (
        <CometChatAIAssistantChat 
            user={agent} 
            onError={handleError} 
        />
    );
}
What this does: Shows the code for this step.

​
Customization

What you’re changing: Customization. Where to change it: Component props or CSS as shown below. Default behavior: UI Kit defaults. Override: Use the examples in this section. Verify: The UI reflects the change shown below. To fit your app’s design requirements, you can customize the appearance of the Assistant Chat component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs.

​
Style

You can set the css of the Assistant Chat Component to customize the styling. 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

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

    if (!agent) return null;

    return (
        <div className="cometchat-assistant-chat__wrapper">
            <CometChatAIAssistantChat user={agent} />
        </div>
    );
}
What this does: Shows the code for this step.

​
Functionality

These props tailor the experience. Most message options (copy/edit/delete/react, receipts, date separators, etc.) are disabled by default for assistant chats. 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

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

    if (!agent) return null;

    // Example: Set streaming speed to 30 characters per second
    // and show close button
    // You can also customize suggestions, empty state, etc.
    return (
        <CometChatAIAssistantChat
            user={agent}
            showCloseButton={true}
            setStreamingSpeed={30}
        />
    )
}
What this does: Shows the code for this step.
PropertyDescriptionExample
userRequired CometChat.User representing the AI agent.user={agent}
streamingSpeedCharacters-per-second speed for streaming replies. Default 30.streamingSpeed={50}
suggestedMessagesArray of quick prompts for the empty state.suggestedMessages=["Help", "Summarize"]
hideSuggestedMessagesHide the suggestions section.hideSuggestedMessages={true}
hideNewChatHide the New Chat button in header.hideNewChat={true}
hideChatHistoryHide the History button/sidebar.hideChatHistory={true}
showBackButtonShow back button in header.showBackButton
showCloseButtonShow close button in header.showCloseButton
onBackButtonClickedBack button handler.onBackButtonClicked={() => {}}
onCloseButtonClickedClose button handler.onCloseButtonClicked={() => {}}
onSendButtonClickSend button handler.onSendButtonClick={() => {}}
onErrorError handler.onError={handleError}
emptyViewCustom empty state for the list.emptyView={<Empty/>}
loadingViewCustom loading view.loadingView={<Loading/>}
errorViewCustom error view.errorView={<Error/>}
emptyChatGreetingViewCustom empty title (default uses metadata.greetingMessage or user name).emptyChatGreetingView={<h3/>}
emptyChatIntroMessageViewCustom empty subtitle (default uses metadata.introductoryMessage).emptyChatIntroMessageView={<p/>}
emptyChatImageViewCustom empty image.emptyChatImageView={<img/>}
aiAssistantToolsProvide tool/function handlers for the assistant.aiAssistantTools={tools}
loadLastAgentConversationLoads the most recent existing agent conversation if one is available.loadLastAgentConversation={true}
parentMessageIdThe parent message ID to load a specific agent conversation. Takes priority over loadLastAgentConversation.parentMessageId={12345}

​
Advanced

Header Views
Customize header sections using the following props: headerItemView, headerTitleView, headerSubtitleView, headerLeadingView, headerTrailingView, and headerAuxiliaryButtonView. These customizations are done in the similar way as the Message Header component.
The header’s “New Chat” and “History” buttons are built-in. You can override them by providing a custom headerAuxiliaryButtonView.
Assistant Tools
Pass an instance of CometChatAIAssistantTools to enable tool/function calls during assistant replies. 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
import { CometChatAIAssistantTools } from "@cometchat/chat-uikit-react";

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

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

    const tools = new CometChatAIAssistantTools({
        getCurrentWeather: ({ location }: { location: string }) => {
            // call your backend or a public API
            console.log("Fetching weather for", location);
        },
        createTicket: ({ title }: { title: string }) => {
            // open your internal ticketing flow
            console.log("Create ticket:", title);
        },
    });

    if (!agent) return null;

    return (
        <CometChatAIAssistantChat user={agent} aiAssistantTools={tools} />
    );
What this does: Shows the code for this step.
Empty Chat Image View
Provide a custom image for the empty state using emptyChatImageView. 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

    React.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} />}
        />
    );
}
What this does: Shows the code for this step.
Empty Chat Greeting View
Override the empty state greeting message view using the emptyChatGreetingView prop. 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

    React.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>
            }
        />
    );
}
What this does: Shows the code for this step.
Empty Chat Intro Message View
You can override the empty chat intro message view using the emptyChatIntroMessageView prop. 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

    React.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>
            }
        />
    );
}
What this does: Shows the code for this step.
Templates
CometChatMessageTemplate is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to CometChatMessageTemplate. You can set message Templates to AIAssistantChat by using the following code snippet. 
import React from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatAIAssistantChat,
  ChatConfigurator
} from "@cometchat/chat-uikit-react";

export function AIAssistantChatDemo() {
  const [chatUser, setChatUser] = React.useState<CometChat.User>();
  React.useEffect(() => {
    CometChat.getUser("uid").then((user) => {
      setChatUser(user);
    });
  }, []);

  const getTemplates = () => {
    let templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
    templates.map((data) => {
      data.footerView = (message) => {}; //custom view here
    });
    return templates;
  };

  return chatUser ? (
    <div>
      <CometChatAIAssistantChat user={chatUser} templates={getTemplates()} />
    </div>
  ) : null;
}
What this does: Shows the code for this step.
SymptomCauseFix
Component doesn’t renderCometChatUIKit.init() not called or not awaitedEnsure init completes before rendering. See Methods
Component renders but shows nothinguser prop not provided or is nullPass a valid CometChat.User object fetched via CometChat.getUser("assistant_uid")
No streaming responseAI agent not configured in CometChat DashboardSet up an AI agent in the Dashboard and use its UID
Callback not firingWrong prop name or signatureCheck the Actions section for exact prop name and parameter types
Custom view not appearingReturning null or undefined from view propEnsure view function returns valid JSX
SSR hydration errorComponent uses browser APIs on serverWrap in useEffect or dynamic import with ssr: false. See Next.js Integration

​
Customization matrix

What you want to changeWhereProperty/APIExample
Set agentCometChatAIAssistantChatuseruser={agent}
Streaming speedCometChatAIAssistantChatstreamingSpeedstreamingSpeed={30}
Suggested messagesCometChatAIAssistantChatsuggestedMessagessuggestedMessages={["Help"]}

​
Common pitfalls and fixes

SymptomCauseFix
Assistant does not renderAgent user missingFetch the agent CometChat.User first
Init/login missingSDK not initializedCall CometChatUIKit.init() and login()
No suggestionssuggestedMessages emptyProvide an array of suggestions

​
FAQ

Do I need a CometChat user for the agent? Yes. Pass the AI agent as a CometChat.User. Can I change suggestions dynamically? Yes. Update suggestedMessages prop.

​
Next steps