Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions ui-kit/react/astro-integration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ description: "Add CometChat to an Astro app in 5 steps: create project, install,
| CSS | `import "@cometchat/chat-uikit-react/css-variables.css"` in your React island |
| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [Next.js](/ui-kit/react/next-js-integration) · [React Router](/ui-kit/react/react-router-integration) |
| AI Skills | `npx skills add cometchat/cometchat-skills --all` — [GitHub](https://github.com/cometchat/cometchat-skills) |
| AI Skills | `npx skills add cometchat/cometchat-skills` — [GitHub](https://github.com/cometchat/cometchat-skills) |

</Accordion>

Expand All @@ -35,15 +35,17 @@ CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). In A
Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. It auto-detects Astro, sets up `@astrojs/react` if needed, and scaffolds a complete chat integration using React islands with `client:only="react"`.

```bash
npx skills add cometchat/cometchat-skills --all
npx skills add cometchat/cometchat-skills
```

Then ask your agent to "integrate CometChat" or run `/cometchat`. It will:
1. Detect Astro and verify `@astrojs/react` is configured
2. Present three chat experience options (Conversation List, One-to-One, Tab-Based)
2. Present three chat experiences — multi-conversation, single thread, or full messenger
3. Create a React island in `src/cometchat/ChatApp.tsx` with CSS imported inside the component (Astro constraint), and an `.astro` page with `client:only="react"`
4. Verify with AST checks (init order, no leaked auth keys, error UI, etc.)
5. Show the Phase B menu: theme presets, 40+ features, component customization, floating widget, production auth, and diagnostics

Works with Claude Code, Cursor, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.
Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/vercel-labs/skills).

---

Expand Down
10 changes: 6 additions & 4 deletions ui-kit/react/next-js-integration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ description: "Add CometChat to a Next.js app in 5 steps: create project, install
| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS |
| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) |
| AI Skills | `npx skills add cometchat/cometchat-skills --all` — [GitHub](https://github.com/cometchat/cometchat-skills) |
| AI Skills | `npx skills add cometchat/cometchat-skills` — [GitHub](https://github.com/cometchat/cometchat-skills) |

</Accordion>

Expand All @@ -39,15 +39,17 @@ CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). In N
Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. It auto-detects Next.js (App Router or Pages Router), collects credentials from `.env.local`, and scaffolds a complete chat integration with `dynamic(..., { ssr: false })`, `"use client"` directives, and TypeScript types.

```bash
npx skills add cometchat/cometchat-skills --all
npx skills add cometchat/cometchat-skills
```

Then ask your agent to "integrate CometChat" or run `/cometchat`. It will:
1. Detect your Next.js version and router type (App Router vs Pages Router)
2. Present three chat experience options (Conversation List, One-to-One, Tab-Based)
2. Present three chat experiences — multi-conversation, single thread, or full messenger
3. Create components in `src/app/cometchat/`, set up SSR prevention with `dynamic` + `ssr: false`, and import CSS in `globals.css`
4. Verify with AST checks (init order, no leaked auth keys, error UI, etc.)
5. Show the Phase B menu: theme presets, 40+ features, component customization, floating widget, production auth, and diagnostics

Works with Claude Code, Cursor, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.
Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/vercel-labs/skills).

---

Expand Down
47 changes: 42 additions & 5 deletions ui-kit/react/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ description: "Prebuilt React components for chat, voice, and video calling. Supp
| 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 skills add cometchat/cometchat-skills --all` — [GitHub](https://github.com/cometchat/cometchat-skills) |
| AI Skills | `npx skills add cometchat/cometchat-skills` — [GitHub](https://github.com/cometchat/cometchat-skills) |

</Accordion>

Expand All @@ -28,22 +28,59 @@ The CometChat React UI Kit provides prebuilt, customizable components for adding

## Integrate with AI Coding Agents

Use [CometChat Skills](https://github.com/cometchat/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 — conversations, one-to-one chat, or tab-based chat — with the correct SSR pattern, TypeScript types, and error handling.
Use [CometChat Skills](https://github.com/cometchat/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, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.
Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/vercel-labs/skills).

```bash
npx skills add cometchat/cometchat-skills --all
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.

<Accordion title="Recommended: CometChat Docs MCP">

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

**Claude Code:**
```bash
claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp
```

**Cursor** (`.cursor/mcp.json`):
```json
{ "mcpServers": { "cometchat-docs": { "url": "https://www.cometchat.com/docs/mcp" } } }
```

**Windsurf:**
```json
{ "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.

</Accordion>

<CardGroup cols={2}>
<Card title="CometChat Skills" icon="wand-magic-sparkles" href="https://github.com/cometchat/cometchat-skills">
Auto-detect framework, scaffold chat integration
</Card>
<Card title="Supported Agents" icon="robot">
Claude Code · Cursor · Kiro · VS Code Copilot · Codex
Claude Code · Cursor · Codex · VS Code Copilot · Windsurf · Cline · Kiro
</Card>
</CardGroup>

Expand Down
10 changes: 6 additions & 4 deletions ui-kit/react/react-js-integration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ description: "Add CometChat to a React.js app in 5 steps: create project, instal
| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS |
| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
| Other frameworks | [Next.js](/ui-kit/react/next-js-integration) · [React Router](/ui-kit/react/react-router-integration) · [Astro](/ui-kit/react/astro-integration) |
| AI Skills | `npx skills add cometchat/cometchat-skills --all` — [GitHub](https://github.com/cometchat/cometchat-skills) |
| AI Skills | `npx skills add cometchat/cometchat-skills` — [GitHub](https://github.com/cometchat/cometchat-skills) |

</Accordion>

Expand All @@ -34,15 +34,17 @@ This guide walks you through adding CometChat to a React.js app. By the end you'
Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. It auto-detects React.js / Vite / CRA, collects credentials from `.env`, and scaffolds a complete chat integration with the correct file layout and TypeScript types.

```bash
npx skills add cometchat/cometchat-skills --all
npx skills add cometchat/cometchat-skills
```

Then ask your agent to "integrate CometChat" or run `/cometchat`. It will:
1. Detect your bundler (Vite or CRA) and set the correct env prefix (`VITE_` or `REACT_APP_`)
2. Present three chat experience options (Conversation List, One-to-One, Tab-Based)
2. Present three chat experiences — multi-conversation, single thread, or full messenger
3. Scaffold init → login → render in `main.tsx`, create components in `src/cometchat/`, and import CSS
4. Verify with AST checks (init order, no leaked auth keys, error UI, etc.)
5. Show the Phase B menu: theme presets, 40+ features, component customization, floating widget, production auth, and diagnostics

Works with Claude Code, Cursor, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.
Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/vercel-labs/skills).

---

Expand Down
10 changes: 6 additions & 4 deletions ui-kit/react/react-router-integration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ description: "Add CometChat to a React Router app in 5 steps: create project, in
| CSS | `@import url("@cometchat/chat-uikit-react/css-variables.css");` in global CSS |
| Calling | Optional. Install `@cometchat/calls-sdk-javascript` to enable |
| Other frameworks | [React.js](/ui-kit/react/react-js-integration) · [Next.js](/ui-kit/react/next-js-integration) · [Astro](/ui-kit/react/astro-integration) |
| AI Skills | `npx skills add cometchat/cometchat-skills --all` — [GitHub](https://github.com/cometchat/cometchat-skills) |
| AI Skills | `npx skills add cometchat/cometchat-skills` — [GitHub](https://github.com/cometchat/cometchat-skills) |

</Accordion>

Expand All @@ -35,15 +35,17 @@ CometChat UI Kit requires browser APIs (`window`, `WebSocket`, `document`). In R
Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. It auto-detects React Router v6 or v7, collects credentials from `.env`, and scaffolds a complete chat integration with `lazy()` + `Suspense` + `mounted` guard for SSR prevention.

```bash
npx skills add cometchat/cometchat-skills --all
npx skills add cometchat/cometchat-skills
```

Then ask your agent to "integrate CometChat" or run `/cometchat`. It will:
1. Detect your React Router version (v6 JSX routing vs v7 file-based routing)
2. Present three chat experience options (Conversation List, One-to-One, Tab-Based)
2. Present three chat experiences — multi-conversation, single thread, or full messenger
3. Create components in `app/cometchat/`, register a `/chat` route in `app/routes.ts` (v7) or add a `<Route>` (v6), and import CSS
4. Verify with AST checks (init order, no leaked auth keys, error UI, etc.)
5. Show the Phase B menu: theme presets, 40+ features, component customization, floating widget, production auth, and diagnostics

Works with Claude Code, Cursor, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.
Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/vercel-labs/skills).

---

Expand Down