Skip to main content
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 and Angular UI Kit v5 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.

​
Prerequisites

  • Node.js 18+ — the installer runs through npx, so there’s nothing to install globally.
  • A CometChat account — sign up free to get an app’s App ID, Region, and Auth Key.
  • An existing React or Angular app:
    • React 18+ — Vite, Create React App, Next.js, React Router, or Astro.
    • Angular 17–21 — Angular CLI or Nx. (Angular 22 is not yet installable: the UI Kit’s peer range is <22.0.0.)
  • One of the supported AI coding agents below.
The skills target the React UI Kit v7 and the Angular UI Kit v5 today. The installer tells you if it can’t detect a supported setup — it never guesses or scaffolds a throwaway project. In an empty or ambiguous project the agent asks which framework you’re building rather than assuming one.

​
Install

Run the installer in your project root:
It detects your React or Angular 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:

​
Supported agents

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:
or type the dispatcher directly:
The cometchat dispatcher detects your framework 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 that family’s core skill (cometchat-react-v7-core or cometchat-angular-v5-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

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 runs the standalone 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 can also run the CLI yourself — it works on its own, in a script, or in CI.
  • 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.
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 for the full command surface.

​
What’s in the pack

Task-shaped skills the agent loads on demand — two shared, then one set per framework: Angular UI Kit v5

​
Example prompts

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 voice and video calling with a click-to-call button.”
  • “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 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

  • 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

​
Compatibility

React Angular
Angular 22 is not yet installable — the UI Kit’s peer range is >=17.0.0 <22.0.0, so npm install fails with ERESOLVE on Angular 22. Scaffold with @angular/cli@21 until a kit release widens the range.

​
Next steps

CLI Reference

Authenticate, provision credentials, and manage the skills from your terminal

MCP Integration

Connect CometChat to any Model Context Protocol–compatible agent

React Integration

The manual React UI Kit setup the skills automate

Angular Integration

The manual Angular UI Kit setup the skills automate

React Components

Browse all prebuilt React components

Angular Components

Browse all prebuilt Angular components