CometChat × Vercel Template

A blank Next.js (App Router) app with CometChat AI-coding skills pre-installed. Deploy to Vercel, clone the resulting GitHub repo, open it in Claude Code / Cursor / any AI coding IDE, and ask "add chat to my app" — the agent walks you through signup, app creation, and writes a working chat integration. No CometChat account required up front.

Deploy

The Deploy button creates a Vercel project + a GitHub repo from this Template. The .env.example declares three env vars; you can leave them blank at deploy time — the /cometchat skill fills them in when you run it.

Use this Template

1. Click Deploy with Vercel above (or fork cometchat-vercel-template on GitHub).
2. Clone the resulting repo locally.
3. Open it in your AI coding IDE.
4. Ask the agent: add chat to my app
5. Answer 4–5 setup questions (account, app name, region, intent, placement).
6. Watch the agent write the integration into app/.

The agent reads .agents/skills/cometchat/SKILL.md, detects this is a Next.js App Router project, runs cometchat detect, then writes the provider, the routes, and the env vars.

IDE-specific install step

This Template bundles skills at .agents/skills/ — Replit Agent, Cursor, Cline, Codex, Copilot, and Windsurf read from there directly.

Claude Code reads .claude/skills/ instead. After cloning, run once:

npx @cometchat/skills add

This copies the same skills into .claude/skills/ so Claude Code picks them up. (Future iteration: postinstall hook will do this automatically.)

What's pre-installed

.agents/skills/
├── cometchat/                    Dispatcher — detects framework, gathers requirements, writes code
├── cometchat-core/               Init / login / provider / env vars / SSR safety
├── cometchat-components/         60+ component catalog with props and slot views
├── cometchat-placement/          Where to put chat (route, modal, drawer, widget)
├── cometchat-react-patterns/     React + Vite integration patterns
├── cometchat-nextjs-patterns/    Next.js App Router + Pages Router patterns
├── cometchat-react-router-patterns/
├── cometchat-astro-patterns/
├── cometchat-theming/            5 presets (Slack / WhatsApp / iMessage / Discord / Notion) + brand colors
├── cometchat-features/           40+ features — calls, polls, AI, reactions, file sharing
├── cometchat-customization/      Custom message bubbles, headers, composer actions
├── cometchat-production/         Server-minted auth tokens, user management
└── cometchat-troubleshooting/    Diagnostics — verify, drift, doctor

What you can build

• Marketplace chat (buyer ↔ seller drawer + inbox page)
• SaaS productivity chat (modal from navbar + full messages page)
• Social / community (full messenger with Chats / Calls / Users / Groups tabs)
• Customer support (floating widget bubble in the bottom-right)
• Just messaging (dedicated /messages route with two-pane layout)

The agent picks the placement based on what you say you're building.

After the first integration

Re-run /cometchat (or just ask the agent "add reactions" / "switch to dark mode" / "set up production auth") to pick from the iteration menu:

• Customize look & feel — theme presets or brand color
• Add a feature — calls, reactions, polls, AI smart replies, file sharing
• Customize a component — custom message bubbles, headers, composer actions
• Add another placement — additional chat surface without touching the existing integration
• Set up production auth — replace the dev Auth Key with a server-minted token endpoint at app/api/cometchat-token/route.ts

Recommended: CometChat Docs MCP

For deeper component customization, install the docs MCP in your IDE:

Claude Code:

claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp

Cursor (.cursor/mcp.json):

{ "mcpServers": { "cometchat-docs": { "url": "https://www.cometchat.com/docs/mcp" } } }

No authentication required.

Refresh skills to the latest published version

The bundled .agents/skills/ is a snapshot taken when this Template was published. To pull the latest skills from npm into your forked project:

npm run setup-skills

That runs npx @cometchat/skills@latest add --family web --clean, which wipes the existing cometchat-* skill dirs and writes the latest published skills into .claude/skills/. Useful when CometChat ships a new minor and you want updates without re-forking the Template.

The unified @cometchat/skills package (v4+) auto-detects framework — --family web is set explicitly here because Vercel deploys can run in environments where detection might miss the signal.

Source

• Skills: github.com/cometchat/cometchat-skills
• UI Kit: @cometchat/chat-uikit-react
• Docs: cometchat.com/docs

License

MIT