AI Plugin - CometChat Docs

AI Integration Quick Reference

Field	Value
Plugin ID	`ai`
Package	`@cometchat/chat-uikit-react`
Message Types	`assistant`, `toolArguments`, `toolResults`, `run_started`
Message Categories	`agentic`, `custom`
Included by Default	No (add via `plugins` prop)
Bubble Component	`CometChatAIAssistantBubble`, `CometChatStreamMessageBubble`, `CometChatToolCallArgumentBubble`, `CometChatToolCallResultBubble`
Conversation Preview	First 80 chars of response / Tool call / Tool result
Context Menu	None

Overview

The AI plugin handles messages in the agentic category. It renders three types of AI-generated content:

Assistant messages — completed AI responses with markdown formatting
Tool call arguments — JSON display of arguments passed to a tool
Tool results — JSON display of results returned by a tool
Streaming messages — real-time streaming bubble while the AI is generating a response

Installation

The AI plugin is NOT included in the default plugins. Add it explicitly:

import { CometChatProvider } from "@cometchat/chat-uikit-react";
import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai";

<CometChatProvider
  appId="YOUR_APP_ID"
  region="us"
  authKey="YOUR_AUTH_KEY"
  uid="cometchat-uid-1"
  plugins={[CometChatAIPlugin]}
>
  <MyChatApp />
</CometChatProvider>

Message Types

Type	Category	What it renders
`assistant`	`agentic`	Completed AI response with markdown
`toolArguments`	`agentic`	Tool call arguments as formatted JSON
`toolResults`	`agentic`	Tool call results as formatted JSON
`run_started`	`custom`	Streaming placeholder while AI generates

Bubble Rendering

Assistant Bubble

Renders the AI response with full markdown support (headings, lists, code blocks, bold, italic, links). Uses CometChatAIAssistantBubble.

Streaming Bubble

Shows a real-time streaming animation while the AI is generating. Connects to the streaming service keyed by chatId. Uses CometChatStreamMessageBubble.

Tool Call Bubbles

Display tool invocation details as collapsible JSON blocks. Useful for debugging AI agent workflows. All bubble components are lazy-loaded — they’re not included in the initial bundle until an AI message is actually rendered.

None — AI messages are system-generated and have no context menu options.

Conversation Preview

Type	Preview text
`assistant`	First 80 characters of the response (markdown stripped)
`toolArguments`	”Tool call”
`toolResults`	”Tool result”

Preloading

The AI Assistant Chat panel can be preloaded on hover/focus to reduce perceived latency:

import { preloadAIAssistantChat } from "@cometchat/chat-uikit-react/plugins/ai";

// Call on AI button hover
onMouseEnter={() => preloadAIAssistantChat()}

CSS Selectors

Target	Selector
Assistant bubble	`.cometchat-ai-assistant-bubble`
Streaming bubble	`.cometchat-stream-message-bubble`
Tool argument bubble	`.cometchat-tool-call-argument-bubble`
Tool result bubble	`.cometchat-tool-call-result-bubble`

​Overview

​Installation

​Message Types

​Bubble Rendering

​Assistant Bubble

​Streaming Bubble

​Tool Call Bubbles

​Context Menu Options

​Conversation Preview

​Preloading

​CSS Selectors