> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# React UI Kit
> Prebuilt React components for chat, voice, and video calling. Supports React.js, Next.js, React Router, and Astro.
| 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](https://github.com/cometchat/cometchat-uikit-react/tree/v6) |
| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
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](https://github.com/cometchat/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. One slash — `/cometchat` — works for React, Next.js, React Router, Astro, Expo, bare React Native, Angular, Android, Flutter, and iOS.
Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
```bash theme={null}
npx @cometchat/skills add
```
Use `--ide ` 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
For deeper component customization (custom views, SDK events, request builders), install the docs MCP:
**Claude Code:**
```bash theme={null}
claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp
```
**Cursor** (`.cursor/mcp.json`):
```json theme={null}
{ "mcpServers": { "cometchat-docs": { "url": "https://www.cometchat.com/docs/mcp" } } }
```
**Windsurf:**
```json theme={null}
{ "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.
AI-first integration for any React project
Claude Code · Cursor · Kiro · VS Code Copilot · Windsurf · Cline
***
## Try It
Try the full chat experience in your browser
Fork, add your credentials, and start building
***
## Get Started
Pick your framework and follow the step-by-step integration guide:
Vite or Create React App
} href="/ui-kit/react/next-js-integration">
App Router with client-side rendering
} href="/ui-kit/react/react-router-integration">
SPA with React Router v6+
} href="/ui-kit/react/astro-integration">
React islands with client:only directive
***
## Explore
Browse all prebuilt UI components
Chat, calling, AI, and extensions
Colors, fonts, dark mode, and custom styling
Threaded messages, new chat, search, and more
***
## Resources
Working reference app
Full UI Kit source on GitHub
Design resources and prototyping
Common issues and fixes
Open a support ticket
Upgrading from v5
***
## Integrate with AI Coding Agents
Use [CometChat Skills](https://github.com/cometchat/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. One slash — `/cometchat` — works for React, Next.js, React Router, Astro, Expo, bare React Native, Angular, Android, Flutter, and iOS.
Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
```bash theme={null}
npx @cometchat/skills add
```
Use `--ide