React UI Kit - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react` v6.3.x
Peer deps	`react` >=18, `react-dom` >=18, `rxjs` ^7.8.1
Calling	Optional — `@cometchat/calls-sdk-javascript`
SSR	Client-side only. Use `ssr: false` or `client:only="react"`
Localization	19 languages built-in
Source	GitHub
AI Skills	`npx skills add cometchat/cometchat-skills` — GitHub

The CometChat React UI Kit provides prebuilt, customizable components for adding chat, voice, and video calling to any React app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout.

Integrate with AI Coding Agents

Use CometChat Skills to integrate the React UI Kit using your AI coding agent. Skills auto-detect your framework, collect credentials, and scaffold a complete chat integration — multi-conversation, single thread, or full messenger — with the correct SSR pattern, TypeScript types, and error handling. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 30+ more agents.

npx skills add cometchat/cometchat-skills

Then ask your agent to “integrate CometChat” or run /cometchat — it handles the rest.

#	Experience	What it is	Use case
1	Multi-conversation	Two-panel: conversation list + active thread	Messaging apps, team chat, inboxes
2	Single thread	One chat window for two known users or a group	Support widgets, marketplace chat, embedded consult
3	Full messenger	Bottom tab bar: Chats / Calls / Users / Groups	Social apps, community platforms, dating

/cometchat 1    # Multi-conversation
/cometchat 2    # Single thread
/cometchat 3    # Full messenger

After the initial integration, the skill continues with a Phase B menu: theme presets (slack / whatsapp / discord / notion), 40+ features (calls, polls, reactions, AI smart replies), component customization, floating chat widget, production auth, server-side user management, and diagnostics.

Recommended: CometChat Docs MCP

For the best Phase B experience (component customization, SDK events, request builders), install the docs MCP:Claude Code:

claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp

Cursor (.cursor/mcp.json):

{ "mcpServers": { "cometchat-docs": { "url": "https://www.cometchat.com/docs/mcp" } } }

Windsurf:

{ "mcpServers": { "cometchat-docs": { "type": "sse", "serverUrl": "https://www.cometchat.com/docs/mcp" } } }

No authentication required. Not needed for the initial integration — the CLI handles Phase A without it.

CometChat Skills

Auto-detect framework, scaffold chat integration

Supported Agents

Claude Code · Cursor · Codex · VS Code Copilot · Windsurf · Cline · Kiro

Try It

Live Demo

Try the full chat experience in your browser

CodeSandbox

Fork, add your credentials, and start building

Get Started

Pick your framework and follow the step-by-step integration guide:

React.js

Vite or Create React App

Next.js

App Router with client-side rendering

React Router

SPA with React Router v6+

Astro

React islands with client:only directive

Explore

Components

Browse all prebuilt UI components

Features

Chat, calling, AI, and extensions

Theming

Colors, fonts, dark mode, and custom styling

Guides

Threaded messages, new chat, search, and more

Resources

Sample App

Working reference app

Source Code

Full UI Kit source on GitHub

Figma

Design resources and prototyping

Troubleshooting

Common issues and fixes

Support

Open a support ticket

Migration Guide

Upgrading from v5

​Integrate with AI Coding Agents