cometchat-react-v7-core

Ground truth: @cometchat/chat-uikit-react@7 + @cometchat/chat-sdk-javascript@^4.1.9. Symbols sourced from live v7 docs. This file is the THIN map loaded every run; deep detail is in references/* loaded ONLY when the task needs it. Anything marked [v7-verify] is a v6 carry-over to confirm against v7 docs/catalog before shipping.

Use this skill when

"add chat to my React app", "set up CometChat credentials", "integrate CometChat in React", "show a conversations + messages UI", "build a full chat app". An unscoped "add chat" means a production-ready core chat surface (a CometChatConversations list ↔ a message pane, wrapped in CometChatErrorBoundary, sized, affordances wired-or-hidden, mobile collapse) — NOT a bare two-pane demo, and NOT the whole combined app. See the golden path below. It grows on request (users/groups/calls tabs, a details/thread/search side panel, calls) to the full combined app — that recipe lives in cometchat-react-v7-placement.

Install

npm i @cometchat/chat-uikit-react@7 @cometchat/chat-sdk-javascript@4 dompurify (keep the @7/@4 major pins — a bare install resolves to latest and can pull the wrong major). dompurify is required by the kit — the docs install includes it. Voice/video calling also needs @cometchat/calls-sdk-javascript (see cometchat-react-v7-features).

Setup & credentials (essentials — full detail: references/setup-credentials.md)

1. Detect React + bundler (Vite→VITE_, CRA→REACT_APP_, Next→NEXT_PUBLIC_/.env.local). Reuse existing .cometchat/env if present (skip re-setup).
2. version_conflict — STOP if a non-v7 UI Kit is installed; reconcile first (never mix majors — RULES.md).
3. Credentials — OFFER the dashboard fetch FIRST, default to it (never silently "paste it yourself", never defer to a "to finish, add them yourself" TODO — AUDIT-039). Reuse existing .cometchat/env if present (skip). Else offer both, defaulting to fetch: (a) dashboard fetch (recommended) — load the CLI on demand: npx @cometchat/skills-cli@3 auth login, pick an EXISTING app (provision list --json; never auto-create), provision use --app-id <id> --json returns the creds + writes a neutral .cometchat/config.json (NOT an env file); (b) manual paste — Dashboard → Credentials (dev-only Auth Key). Then the SKILL writes the framework env (§4) — the CLI stops at the fetch; framework detection, env-writing, and codegen are the SKILL's job, never the CLI's (AUDIT-059). Ask & wait if the user must choose or the CLI can't run. Full flow: references/setup-credentials.md.
4. Write env (correct prefix), gitignore it, never echo the Auth Key. Prod → server-side auth token, not the Auth Key.
5. Authorize = init() + login() resolve; auth error usually means wrong Region.

Integration ordering (BAKED — invariant; docs: "init() must resolve before login()")

init() once at startup → login(UID) after init resolves (guard with the sync CometChatUIKit.getLoggedInUser()) → render inside CometChatProvider.