@cometchat/skills-native

Add CometChat to any React Native project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 30+ more agents.

The cometchat dispatcher in this package is identical to the one in @cometchat/skills — install whichever package matches your project, or both for monorepos with web + native. One slash, /cometchat, works for every framework either package supports.

Install

npx @cometchat/skills-native add

Supported IDEs: Claude Code (default), Cursor, Kiro, VS Code Copilot. Use --ide <name> to target a specific one, or --ide all.

Then in your IDE:

/cometchat add chat to my expo app

Supported frameworks

| Framework | Status | |---|---| | Expo (managed workflow) | ✅ | | Expo Router (file-based routing) | ✅ | | Bare React Native (CLI) | ✅ |

The dispatcher uses cometchat detect to pick the right pattern skills; nothing to configure manually.

What gets installed

The cometchat-skills-native add command writes 13 skills into your IDE's skills directory (.claude/skills/ for Claude Code, .cursor/skills/ for Cursor, etc.):

| Skill | Purpose | |---|---| | cometchat | Shared dispatcher — detects framework, runs onboarding, writes integration code, surfaces the iteration menu | | cometchat-native-core | Init / login order, four-wrapper provider chain, env vars, anti-patterns | | cometchat-native-components | Component catalog — names, props, slot views, request builders | | cometchat-native-placement | Where to put chat — Stack screen / BottomTab / Modal / BottomSheet / Embedded | | cometchat-native-expo-patterns | Expo managed workflow — expo install, app.json config, gesture handler, Expo Router | | cometchat-native-bare-patterns | Bare RN — pod install, native modules, iOS Privacy Manifest, permissions | | cometchat-native-theming | CometChatThemeProvider, dark mode, per-component style objects | | cometchat-native-features | Calls, extensions, AI agent, reactions, polls — what each requires | | cometchat-native-customization | Custom text formatters, events, request-builder filtering, DataSource decorators | | cometchat-native-production | Server-minted auth tokens, user management CRUD, external-backend recipes | | cometchat-native-push | APNs + FCM setup, dashboard providers, client registration, tap-to-deep-link | | cometchat-native-testing | Jest + RNTL mocking, component tests, E2E with Detox or Maestro, CI | | cometchat-native-troubleshooting | Metro cache, pod install, iOS privacy manifest, native module linking |

What happens

1. Detects your project — Expo managed vs Expo Router vs bare RN; React Native version; existing navigation library; existing auth system
2. Onboards you to CometChat in the terminal — no browser round-trip. Signup, login, app creation all via the CLI.
3. Asks what you're building (messaging, marketplace, SaaS, social, support, or just exploring) and where chat should live — Bottom tab? Stack screen? Modal? BottomSheet?
4. Shows the plan — every file to create, every file to modify, every file untouched — and waits for your approval
5. Writes the provider, four-wrapper chain, chat screen(s), and navigation wiring
6. Saves .env with the correct prefix (EXPO_PUBLIC_* for Expo, plain for bare RN paired with react-native-dotenv) and records your choices in .cometchat/config.json

No templates, no experiences to pick — the agent writes real code that fits your app.

After the first integration

Re-run /cometchat anytime to pick from the iteration menu:

• Customize look & feel — colors, typography, dark mode toggle wiring (useColorScheme, custom Context, react-native-paper, restyle, tamagui)
• Add a feature — calls (via @cometchat/calls-sdk-react-native), reactions, polls, AI agent, smart replies
• Customize a component — custom message bubbles, headers, composer actions, empty states
• Add another placement — modal, bottom sheet, or another tab on top of the existing integration
• Set up push notifications — APNs (iOS) + FCM (Android), CometChat dashboard provider config, client registration, foreground/background, tap-to-deep-link
• Set up production auth — server-minted auth tokens (Express, Hono, Cloud Functions, Firebase Functions)
• Set up user management — server endpoints for creating/updating/deleting CometChat users
• Set up testing — Jest + RNTL mocks, component tests, E2E via Detox or Maestro
• Troubleshoot — Metro cache, pod install, privacy manifest, native module linking

Recommended: CometChat Docs MCP

For deeper component customization (custom views, SDK events, request builders), install the docs MCP:

Claude Code:

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

Not required for the initial integration — the skill handles Phase A without it.

CLI

The skills call @cometchat/[email protected]+ under the hood (RN-aware detect, provision setup, doctor, verify). You can also run commands directly:

npx @cometchat/skills-cli detect            # framework + expo_mode + RN version
npx @cometchat/skills-cli auth signup       # create account in terminal
npx @cometchat/skills-cli provision setup \
  --name my-rn-chat --region us \
  --industry online_marketplaces \
  --framework expo                          # or `react-native` for bare

Prerequisites

• An AI coding agent (Claude Code, Cursor, Kiro, VS Code Copilot, or any skills.sh-compatible agent)
• Node.js 18+
• React Native 0.70+ (0.72+ recommended)
• Expo SDK 49+ (if using Expo)

No CometChat account required before starting — the skill walks you through signup from the terminal.

License

MIT