Add CometChat to any React project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 30+ more agents.
npx skills add cometchat/cometchat-skillsThen in your IDE:
/cometchat
Your agent detects the framework, asks which experience you want, integrates CometChat, installs dependencies, and sets up your env file — all through the CLI under the hood.
| # | Name | What it is | Use case |
|---|---|---|---|
| 1 | Multi-conversation | Two-panel: conversation list + active thread (header, message list, composer) | Messaging apps, team chat, inboxes |
| 2 | Single thread | One chat window for two known users or a group. No conversation list | 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
| Framework | Status |
|---|---|
| React.js / Vite / CRA | ✅ |
| Next.js (App Router + Pages Router) | ✅ |
| React Router v6 / v7 | ✅ |
| Astro (React islands) | ✅ |
| React Native | 🔜 Coming soon |
| Flutter | 🔜 Coming soon |
| Android / iOS | 🔜 Coming soon |
- Detects your framework, version, router, env prefix, package manager
- Asks which experience (1, 2, or 3)
- Applies the integration — writes files, patches CSS, wires routes
- Installs
@cometchat/chat-uikit-react+@cometchat/chat-sdk-javascript - Verifies with 5 AST checks (init order, no leaked auth keys, error UI, etc.)
- Creates
.envwith placeholder values + adds it to.gitignore - Shows the Phase B menu: theme, features, search, details, threads, widget, production auth, diagnostics
The skill keeps going. Pick from the menu:
- a. Theme —
slack/whatsapp/imessage/discord/notionpresets or custom colors - b. Features — 40 features (calls, polls, reactions, AI smart replies, etc.)
- c. Customize — search, user details, group details, threaded messages (uses the v6 sample app's reference implementations)
- d. Floating chat widget
- e. Production auth (server-side token endpoint)
- f. Server-side user management
- g. Diagnostics (
cometchat doctor) - h. Progress checklist (
cometchat status)
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/mcpCursor (.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.
The skill calls @cometchat/skills-cli commands. You can also run them directly:
npx @cometchat/skills-cli@latest init --install # One-command setup
npx @cometchat/skills-cli@latest detect --json # Framework detection
npx @cometchat/skills-cli@latest apply-theme --preset slack
npx @cometchat/skills-cli@latest production-auth
npx @cometchat/skills-cli@latest add-widget
npx @cometchat/skills-cli@latest doctor # Diagnostics
npx @cometchat/skills-cli@latest status # Progress checklist
npx @cometchat/skills-cli@latest --help # All 17 commands- An AI coding agent (Claude Code, Cursor, Kiro, VS Code Copilot, or any skills.sh-compatible agent)
- A CometChat account — create a free app
- Node.js 18+, React 18+
MIT