From 6c545160a0d9fa13bc853119baf862d39c8a269d Mon Sep 17 00:00:00 2001 From: rajdubey Date: Mon, 17 Aug 2026 16:04:39 +0530 Subject: [PATCH 1/4] Added CLI Docs --- agent-skills.mdx | 166 ++++++++++++++++++++++++++++++++++++++++++++ cli.mdx | 174 +++++++++++++++++++++++++++++++++++++++++++++++ docs.json | 7 ++ 3 files changed, 347 insertions(+) create mode 100644 agent-skills.mdx create mode 100644 cli.mdx diff --git a/agent-skills.mdx b/agent-skills.mdx new file mode 100644 index 000000000..db9ecb38f --- /dev/null +++ b/agent-skills.mdx @@ -0,0 +1,166 @@ +--- +title: "Build CometChat with AI Agent Skills" +sidebarTitle: "Agent Skills" +description: "Install the CometChat agent skills and let your AI coding agent — Claude Code, Cursor, GitHub Copilot, Replit, and more — add production-grade chat and calling to your React app from natural-language prompts." +canonical: "https://www.cometchat.com/docs/agent-skills" +--- + +**CometChat Agent Skills** teach your AI coding agent how to build with CometChat. +Install the skills once, then open your project and say *"add chat to my app"* — +the agent has a short conversation with you (framework, intent, placement, +credentials), then writes production-grade integration code directly into the +files you already have. + +The skills author against the official **React UI Kit v7** task guides and verify +their output against them, so what the agent writes builds and runs against the +current published UI Kit — not a hallucinated API. + + +The skills work **inside your existing project** with your existing agent. They +don't scaffold a throwaway demo — they detect your setup and integrate CometChat +into the app you're already building. + + +## Install + +Run the installer in your project root: + +```bash +npx @cometchat/skills add +``` + +It detects your React setup and opens a picker to install the skills for the AI +agent(s) you use. To pin a single agent — useful in CI or a Dockerfile — pass +`--ide`: + +```bash +npx @cometchat/skills add --ide claude # Claude Code → .claude/skills/ +npx @cometchat/skills add --ide cursor # Cursor → ./.cometchat/skills + router +npx @cometchat/skills add --ide replit # Replit Agent → .agents/skills/ +npx @cometchat/skills add --ide all # every supported agent +``` + +### Supported agents + +| Agent | Install with | +| --- | --- | +| Claude Code | `--ide claude` | +| Cursor | `--ide cursor` | +| GitHub Copilot | `--ide copilot` | +| Windsurf | `--ide windsurf` | +| Replit Agent | `--ide replit` | +| Cline | `--ide cline` | +| Codex | `--ide codex` | +| Gemini | `--ide gemini` | +| Continue | `--ide continue` | +| Aider | `--ide aider` | +| Kiro | `--ide kiro` | +| Antigravity | `--ide antigravity` | + + +Claude Code, Kiro, and Replit get a native `SKILL.md` tree. The other agents get +an orienting router plus a `./.cometchat/skills` tree. Add `--global` (Claude +Code, Kiro, and Replit only) to install into your user-level directory instead of +the project. + + +## Use it + +Open your project in your agent and prompt it: + +``` +add chat to my app +``` + +or type the dispatcher directly: + +``` +/cometchat +``` + +The `cometchat` dispatcher detects React and routes to `cometchat-onboarding`, +which walks a short **discover → understand → plan → approve** flow. Once you +approve the plan, it hands a scoped build directive to `cometchat-react-v7-core` +and pulls in the other skills as the plan needs them (components, placement, +theming, features, calls, push). + +Keep iterating in plain language afterward: + +- *"Add message reactions and threaded replies."* +- *"Switch the chat to dark mode and match my brand color."* +- *"Add a group details side panel."* +- *"Set up production authentication."* + +## Connect your credentials + +The skills can pull your **App ID / Region / Auth Key** from the CometChat +dashboard through the companion CLI, so you never paste them by hand: + +```bash +npx @cometchat/skills-cli auth login +npx @cometchat/skills-cli provision run +``` + +`provision run` fetches your credentials and writes a neutral +`.cometchat/config.json` that the skills read when they wire up init and login. +The CLI is dashboard/API-only — the skills do all framework detection, +env-file writing, and code generation. See the [CLI reference](/cli) for the +full command surface. + +## What's in the pack + +Eleven task-shaped skills the agent loads on demand: + +| Skill | Purpose | +| --- | --- | +| `cometchat` | Thin dispatcher — detect React and route | +| `cometchat-onboarding` | Discover → understand → plan → approve (the front door) | +| `cometchat-react-v7-core` | Install · credentials · init → login → render · the golden-path chat surface | +| `cometchat-react-v7-components` | The v7 component catalog + props / slots | +| `cometchat-react-v7-placement` | Where chat lives — full app / sidebar / popup / embed | +| `cometchat-react-v7-customization` | Theming · brand · light/dark · view slots | +| `cometchat-react-v7-patterns` | Vite / Next.js / React Router / Astro glue (env · SSR · routing) | +| `cometchat-react-v7-features` | Enable a feature — reactions · polls · AI · moderation · … | +| `cometchat-react-v7-calls` | Voice / video calling | +| `cometchat-react-v7-push` | Web push (Notifications product) | +| `cometchat-react-v7-migration` | Upgrade a v6 UI Kit → v7 | + +## Example prompts + +Once the skills are installed, try prompts like these in a fresh agent conversation: + +- *"Add a two-panel chat — conversation list on the left, messages on the right."* +- *"Put a Chats / Calls / Users tab bar in my React app."* +- *"Add voice and video calling with a click-to-call button."* +- *"Let project members talk in a group chat with file sharing."* +- *"Add presence indicators and typing dots to my conversation list."* +- *"Migrate my v6 UI Kit to v7."* + +The agent plans the change with you, then writes the integration into your +existing files. + +## Compatibility + +| Dependency | Version | +| --- | --- | +| `@cometchat/chat-uikit-react` | `7.x` (verified 7.1.x) | +| `@cometchat/chat-sdk-javascript` | `4.x` | +| `@cometchat/calls-sdk-javascript` | `5.x` (calling) | +| React | `≥ 18` | + +## Next steps + + + + Authenticate, provision credentials, and manage the skills from your terminal + + + Connect CometChat to any Model Context Protocol–compatible agent + + + The manual React UI Kit setup the skills automate + + + Browse all prebuilt UI components + + diff --git a/cli.mdx b/cli.mdx new file mode 100644 index 000000000..0888642a7 --- /dev/null +++ b/cli.mdx @@ -0,0 +1,174 @@ +--- +title: "CometChat CLI" +sidebarTitle: "CLI" +description: "Authenticate against the CometChat dashboard, provision app credentials, toggle features, and manage the AI agent skills — all from your terminal, with JSON output for scripting and CI." +canonical: "https://www.cometchat.com/docs/cli" +--- + +CometChat ships two complementary command-line tools: + +| CLI | Package | What it does | +| --- | --- | --- | +| **Credentials CLI** | `@cometchat/skills-cli` | Dashboard authentication + app-credential provisioning + feature toggles | +| **Skills CLI** | `@cometchat/skills` | Install, list, and verify the [AI Agent Skills](/agent-skills) | + + +Neither CLI writes framework code. The credentials CLI is a pure dashboard/API +client — it authenticates and hands your app credentials to the +[agent skills](/agent-skills), which own all framework detection, env-file +writing, and code generation. + + +Both run through `npx` with no global install, and every command accepts `--json` +for machine-readable output. + +--- + +## Credentials CLI — `@cometchat/skills-cli` + +Its only job is authenticating against the CometChat dashboard and fetching your +**App ID / Region / Auth Key**, then writing a neutral `.cometchat/config.json` +the skills build on. + +### Quick start + +```bash +# 1. Authenticate against the dashboard (opens your browser) +npx @cometchat/skills-cli auth login + +# 2. List the apps on your account +npx @cometchat/skills-cli provision list --json + +# 3. Pick or create an app, fetch creds, write .cometchat/config.json +npx @cometchat/skills-cli provision run + +# 4. Inspect the local config the skills read +npx @cometchat/skills-cli config show --json +``` + +### Authenticate + +```bash +npx @cometchat/skills-cli auth login +``` + +Opens your browser at the CometChat dashboard for device authentication and +stores the bearer token in your OS keychain (falling back to a `chmod 600` file). + +| Command | Purpose | +| --- | --- | +| `auth login` | Sign in via the dashboard (device auth) | +| `auth status` | Show whether you're signed in | +| `auth me` | Print the authenticated account | +| `auth logout` | Clear the stored token | +| `auth signup` | Create a CometChat account | + +### Provision credentials + +```bash +npx @cometchat/skills-cli provision run +``` + +Fetches your **App ID / Region / Auth Key**, prints them as JSON, and writes a +neutral `.cometchat/config.json`. It writes **no** framework env file — the skill +reads `config.json` and writes the framework-specific env (`.env` / `VITE_` / +`NEXT_PUBLIC_` …) itself. + +| Command | Purpose | +| --- | --- | +| `provision run` | Interactive: pick or create an app, fetch creds, write config | +| `provision list` | List the apps on your account | +| `provision create` | Create a new app | +| `provision use --app-id ` | Select a specific app by id | + +The config file `provision` writes: + +```json +{ + "version": 1, + "appId": "…", + "region": "us", + "authKey": "…", + "appName": "My Chat", + "plan": "…", + "industry": "…" +} +``` + +### Manage config + +Read and edit the local `.cometchat/config.json` (credential/app state only): + +| Command | Purpose | +| --- | --- | +| `config init` | Create an empty config | +| `config get ` | Read a single value | +| `config set ` | Write a single value | +| `config show` | Print the full config | +| `config path` | Print the config file location | + +### Toggle features + +Enable or disable app features from the terminal: + +| Command | Purpose | +| --- | --- | +| `features list` | List available features and their state | +| `features enable ` | Turn a feature on | +| `features disable ` | Turn a feature off | +| `features ai-key` | Manage the AI provider key | + +--- + +## Skills CLI — `@cometchat/skills` + +Installs and manages the [AI Agent Skills](/agent-skills) that let your coding +agent build with CometChat. + +```bash +npx @cometchat/skills add +``` + +| Command | Purpose | +| --- | --- | +| `detect` | Probe the current project (framework, UI Kit, version conflicts) | +| `add [--ide ]` | Install the skills for an AI agent (default: Claude Code) | +| `list` | List the skills this pack ships | +| `info ` | Show a skill's triggers + compatibility | +| `verify [tier]` | Run the skill quality gates | +| `catalog` | Refresh the component catalog from the installed UI Kit | +| `doctor` | Environment health check | + +See [Agent Skills](/agent-skills) for the install picker, supported agents, and +the prompt-driven workflow. + +--- + +## Scripting and CI + +Every command supports `--json`, and `add` can be pinned to one agent with +`--ide`, so the whole flow runs non-interactively: + +```bash +# Authenticate, select a known app, and install the skills for Claude Code +npx @cometchat/skills-cli auth login +npx @cometchat/skills-cli provision use --app-id "$COMETCHAT_APP_ID" --json +npx @cometchat/skills add --ide claude +``` + +## Next steps + + + + Install the skills and build CometChat from natural-language prompts + + + Connect CometChat to any Model Context Protocol–compatible agent + + + The manual React UI Kit setup, credentials and all + + + Open the CometChat dashboard + + diff --git a/docs.json b/docs.json index cb43da08b..af1d5ab9b 100644 --- a/docs.json +++ b/docs.json @@ -42,6 +42,13 @@ "product": "Home", "pages": [ "index", + { + "group": "Developer Tools", + "pages": [ + "agent-skills", + "cli" + ] + }, { "group": "Docs MCP", "hidden": true, From 00e320395d626b3104809c87bf7bf0ab1b59dd09 Mon Sep 17 00:00:00 2001 From: rajdubey Date: Mon, 17 Aug 2026 16:21:42 +0530 Subject: [PATCH 2/4] Added CLI Docs --- docs.json | 30 +++++++++++++++--------------- index.mdx | 8 ++++++++ 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/docs.json b/docs.json index af1d5ab9b..5cb0ba072 100644 --- a/docs.json +++ b/docs.json @@ -41,27 +41,27 @@ { "product": "Home", "pages": [ - "index", - { - "group": "Developer Tools", - "pages": [ - "agent-skills", - "cli" - ] - }, - { - "group": "Docs MCP", - "hidden": true, - "pages": [ - "mcp-server" - ] - } + "index" ] }, { "product": "Home", "hidden": true, "tabs": [ + { + "tab": "Developer Tools", + "hidden": true, + "pages": [ + { + "group": "Developer Tools", + "pages": [ + "agent-skills", + "cli", + "mcp-server" + ] + } + ] + }, { "tab": "On-Premise Deployment", "hidden": true, diff --git a/index.mdx b/index.mdx index bdfa093c2..2ae62f464 100644 --- a/index.mdx +++ b/index.mdx @@ -141,6 +141,14 @@ canonical: "https://cometchat.com/docs" Add CometChat Docs MCP to your AI tools for instant documentation access. + + Let your AI coding agent add CometChat chat & calling to your React app. + + + + Authenticate, provision credentials, and manage the skills from your terminal. + + From bfda1f194284c7ca61f4b7f41ec32d3b2d4279e3 Mon Sep 17 00:00:00 2001 From: rajdubey Date: Mon, 17 Aug 2026 16:39:14 +0530 Subject: [PATCH 3/4] Added CLI Docs --- agent-skills.mdx | 73 ++++++++++++++++++++++++++++++++++++++++-------- cli.mdx | 17 +++++++++++ 2 files changed, 78 insertions(+), 12 deletions(-) diff --git a/agent-skills.mdx b/agent-skills.mdx index db9ecb38f..3afdf18d0 100644 --- a/agent-skills.mdx +++ b/agent-skills.mdx @@ -21,6 +21,19 @@ don't scaffold a throwaway demo — they detect your setup and integrate CometCh into the app you're already building. +## Prerequisites + +- **Node.js 18+** — the installer runs through `npx`, so there's nothing to install globally. +- A **CometChat account** — [sign up free](https://app.cometchat.com) to get an app's App ID, Region, and Auth Key. +- An **existing React app** on React 18 or newer. Supported setups: **Vite**, **Create React App**, **Next.js**, **React Router**, and **Astro**. +- One of the [supported AI coding agents](#supported-agents) below. + + +The skills target the **React UI Kit v7** today. The installer tells you if it +can't detect a supported React setup — it never guesses or scaffolds a throwaway +project. + + ## Install Run the installer in your project root: @@ -93,19 +106,37 @@ Keep iterating in plain language afterward: ## Connect your credentials -The skills can pull your **App ID / Region / Auth Key** from the CometChat -dashboard through the companion CLI, so you never paste them by hand: - -```bash -npx @cometchat/skills-cli auth login -npx @cometchat/skills-cli provision run -``` +You don't paste your **App ID / Region / Auth Key** by hand. During the build, +when the skill notices they're missing, it offers two paths and defaults to +fetching them from your dashboard: + +- **Fetch from your dashboard (recommended)** — the skill **installs and runs the + CometChat CLI for you, on demand**. It opens the dashboard login in your + browser, lets you pick one of your **existing** apps, pulls the credentials, + and writes a neutral `.cometchat/config.json`. You don't install or run the CLI + yourself. +- **Paste manually** — copy App ID, Region, and Auth Key from **Dashboard → Your + App → Credentials** if you'd rather not log in. + +Either way, the **skill** then writes the framework env file (`.env` / `VITE_` / +`NEXT_PUBLIC_` …) from those credentials — the CLI only fetches them and never +touches your framework code. + + +**Keep credentials out of version control.** Both `.cometchat/config.json` and +the generated env file contain your **Auth Key**. Make sure they're in +`.gitignore` — Vite, CRA, and Astro ignore only `*.local` (not `.env`), so add +`.env` yourself; Next.js ignores `.env.local` by default. The Auth Key is for +**development only**: in production, mint a short-lived per-user **auth token** on +your backend and log in with `loginWithAuthToken()` — never ship the Auth Key to +a production client. + -`provision run` fetches your credentials and writes a neutral -`.cometchat/config.json` that the skills read when they wire up init and login. -The CLI is dashboard/API-only — the skills do all framework detection, -env-file writing, and code generation. See the [CLI reference](/cli) for the -full command surface. + +Prefer to drive it yourself? The credential CLI is also a standalone tool — +`npx @cometchat/skills-cli auth login`, then `provision run`. See the +[CLI reference](/cli) for the full command surface. + ## What's in the pack @@ -139,6 +170,24 @@ Once the skills are installed, try prompts like these in a fresh agent conversat The agent plans the change with you, then writes the integration into your existing files. +## Manage the skills + +- **Update** — re-run `npx @cometchat/skills add` to pull the latest skills; it overwrites the installed skill tree in place. +- **Inspect** — `npx @cometchat/skills list` shows the installed skills, and `npx @cometchat/skills doctor` runs an environment health check. +- **Uninstall** — delete the installed skill directory for your agent (for example `.claude/skills/cometchat*`, `.agents/skills/`, or `./.cometchat/skills`). +- **Version control** — commit the skill files so your whole team shares the same setup. Do **not** commit `.cometchat/config.json` or the generated env file — they hold your Auth Key. + +## Troubleshooting + +| Symptom | Likely cause | Fix | +| --- | --- | --- | +| The agent doesn't pick up the skills | Installed for a different agent, or a router-based agent needs pointing at the tree | Re-run `npx @cometchat/skills add --ide `. For router agents (Cursor, Copilot, …) open `.cometchat/skills/cometchat/SKILL.md` to orient it. | +| Blank screen, no errors | A UI Kit component rendered before `init()` + `login()` resolved, or the wrong Region / env prefix | The `init → login → render` order is required. Check that the Region matches your dashboard app and the env prefix matches your bundler (`VITE_` / `NEXT_PUBLIC_` / `PUBLIC_`). | +| `login()` fails — "user not found" | Logging in a UID that doesn't exist in the app | Use a UID that exists (Dashboard → your app → **Users**; fresh apps seed `cometchat-uid-1`). | +| Auth error on init / login | Region mismatch between your code and the dashboard app | Re-check the Region (`us` / `eu` / `in`) in both the dashboard and your env file. | +| `ERROR_API_KEY_NOT_FOUND` | An env var is empty or not picked up by the bundler | Confirm the env file uses the right prefix for your bundler, then restart the dev server. | +| Version conflict during install | An older **v6** UI Kit is already installed | Ask the agent to migrate — the `cometchat-react-v7-migration` skill upgrades v6 → v7. | + ## Compatibility | Dependency | Version | diff --git a/cli.mdx b/cli.mdx index 0888642a7..c1bf3f938 100644 --- a/cli.mdx +++ b/cli.mdx @@ -22,6 +22,11 @@ writing, and code generation. Both run through `npx` with no global install, and every command accepts `--json` for machine-readable output. +## Prerequisites + +- **Node.js 18+** — both CLIs run through `npx`. +- A **CometChat account** — [sign up free](https://app.cometchat.com). `auth login` opens the dashboard in your browser to authenticate. + --- ## Credentials CLI — `@cometchat/skills-cli` @@ -95,6 +100,13 @@ The config file `provision` writes: } ``` + +`.cometchat/config.json` contains your **Auth Key** — add it to `.gitignore`. The +Auth Key is for **development only**; in production, mint a per-user **auth +token** on your backend and log in with `loginWithAuthToken()` instead of +shipping the Auth Key to a client. + + ### Manage config Read and edit the local `.cometchat/config.json` (credential/app state only): @@ -156,6 +168,11 @@ npx @cometchat/skills-cli provision use --app-id "$COMETCHAT_APP_ID" --json npx @cometchat/skills add --ide claude ``` +Commands **exit non-zero on failure** and surface dashboard errors verbatim (for +example `ACCESS_DENIED`, `EXPIRED`, `TIMEOUT`, `ABORTED`), so a broken auth or +provisioning step fails the CI job loudly instead of continuing with empty +credentials. + ## Next steps From f21c6afd7c61018ee89e34b4ae1d7c13a6ee1516 Mon Sep 17 00:00:00 2001 From: rajdubey Date: Mon, 17 Aug 2026 20:36:26 +0530 Subject: [PATCH 4/4] Added CLI Docs --- agent-skills.mdx | 48 +++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/agent-skills.mdx b/agent-skills.mdx index 3afdf18d0..55100a1b2 100644 --- a/agent-skills.mdx +++ b/agent-skills.mdx @@ -158,17 +158,51 @@ Eleven task-shaped skills the agent loads on demand: ## Example prompts -Once the skills are installed, try prompts like these in a fresh agent conversation: +Everything starts from one prompt — **"add chat to my app"** — then you refine in +plain language. Example prompts, grouped by goal: + +**Get started** + +- *"Add chat to my app."* — the default: a conversation list + message view +- *"Add 1:1 direct messaging between my users."* +- *"Add group chat with file sharing."* +- *"Build a full chat app with Chats, Users, and Calls tabs."* + +**Where chat lives** + +- *"Add a support chat widget in the bottom-right corner."* +- *"Add a floating chat popup I can toggle open and closed."* +- *"Put chat in a sidebar next to my app."* +- *"Embed a chat panel on my dashboard page."* + +**Features** + +- *"Add message reactions, typing indicators, and read receipts."* +- *"Add threaded replies and @mentions."* +- *"Add image and file sharing."* +- *"Add message search."* +- *"Add polls and stickers."* + +**Calling & AI** -- *"Add a two-panel chat — conversation list on the left, messages on the right."* -- *"Put a Chats / Calls / Users tab bar in my React app."* - *"Add voice and video calling with a click-to-call button."* -- *"Let project members talk in a group chat with file sharing."* -- *"Add presence indicators and typing dots to my conversation list."* +- *"Add smart replies and conversation summaries."* +- *"Add an AI assistant to the chat."* +- *"Turn on moderation so banned words are blocked before delivery."* + +**Look & feel** + +- *"Switch the chat to dark mode and match my brand color."* +- *"Make the chat follow the user's system light/dark setting."* + +**Ship it** + +- *"Set up production authentication with auth tokens."* +- *"Add web push notifications."* - *"Migrate my v6 UI Kit to v7."* -The agent plans the change with you, then writes the integration into your -existing files. +The agent plans each change with you, then writes the integration into your +existing files — you don't have to know the component or prop names. ## Manage the skills