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 @cometchat/skills add` — 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 add chat to any React project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 30+ more agents.

npx @cometchat/skills add

Use --ide <name> to target a specific IDE (e.g. --ide cursor), or --ide all to install for all supported IDEs. Then in your IDE:

/cometchat add chat to my app

The skill detects your framework, router, env prefix, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI with no browser round-trip. It reads your routes, nav, and components before proposing a placement, shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. After the first integration, re-run /cometchat anytime to pick from the iteration menu:

Customize look & feel — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
Add a feature — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
Customize a component — custom message bubbles, headers, composer actions, empty/loading states
Add a floating widget — overlay chat button + drawer on top of your existing app
Set up production auth — replace the dev Auth Key with a server-side token endpoint
Set up user management — server endpoints for creating/updating/deleting CometChat users
Run diagnostics — verify, drift detection, symptom-to-cause lookup

Recommended: CometChat Docs MCP

For deeper component customization (custom views, 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 skill handles it without the MCP.

CometChat Skills

AI-first integration for any React project

Supported IDEs

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

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

Documentation Index

​Integrate with AI Coding Agents