# cometchat-uikit-react ships the chat UI, not the chat backend

> The CometChat React UI Kit is a set of prebuilt, customizable components that drop real-time messaging and calling into an existing React application, which means it only makes sense if you are also using CometChat as a service. Its most interesting engineering is in the test setup, where Playwright suites run against a live app with pinned dashboard extensions and seeded users.

**cometchat/cometchat-uikit-react** — Voice & Video Calling and Text Chat App for React (JavaScript/Web)

- Repository: https://github.com/cometchat/cometchat-uikit-react
- Website: https://www.cometchat.com
- Stars: 920 · Forks: 395
- Language: TypeScript
- License: NOASSERTION
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/cometchat-cometchat-uikit-react

## A component kit bound to one backend

The README states the value proposition in one sentence: the CometChat React UI Kit provides pre-built, customizable UI components that developers can use to quickly integrate real-time messaging and calling into any React application.
The important word is CometChat. This is not a chat library that talks to a protocol of your choosing. It is the presentation layer for a specific hosted service, and the pieces you need from that service are the App ID, the Region and the Auth Key you get when you create a new app in the CometChat Dashboard.
That constraint decides who should use it. If you are building a product on CometChat, this kit saves you from writing a conversation list, a message list with reactions and threads, a call screen and an AI assistant panel from scratch. If you are not already committed to CometChat as a backend, the components have nothing to talk to and the dependency is dead weight.
The sample app is the fastest way to judge the work. The README points to a Sample App in the repository that shows the UI Kit in action with a fully functional chat experience including conversations, messaging, calling and AI features.
The package is published as @cometchat/chat-uikit-react, version 7.2.4, written in TypeScript, and the repository ships a webpack.config.js alongside a tsup.config.ts, so the build tooling covers both bundler and library consumers.

## What the components actually cover

The features list in the README is short and specific, which is a good sign for a UI kit.
Conversations covers listing and managing one-on-one and group chats. Messages is a rich message list with reactions, threads and read receipts. Calling is voice and video calling with call logs. AI Features covers an AI-powered assistant chat and smart replies.
Then there are two features that are less about chat and more about how the kit fits your product. Theming is done with CSS custom properties, which the README describes as full visual customization. Localization is built-in multi-language support.
The CSS custom properties decision has a practical consequence worth understanding. Because theming runs through custom properties rather than through a JavaScript configuration object, you can override colours and spacing with plain CSS in your own stylesheet, and the components will follow. That also means the kit ships CSS as a side effect entry point, which the package.json makes explicit. The exports map has a root entry with types and both import and require conditions, plus a separate ./styles entry pointing at dist/index.css, and the sideEffects array lists only *.css, which tells bundlers that dropping CSS is safe but dropping the rest is not.
That is a small detail with a real effect. A package whose sideEffects are only its stylesheet is one your bundler will tree shake properly, so the import cost is proportional to what you use.

## Getting started: two prerequisites and one npm install

The setup path is short. The prerequisites are Node.js 18 or later, npm 9 or later, and React 18 or later.
Then you register at the CometChat Dashboard to create an account, and create a new app to get your App ID, Region and Auth Key.
The installation is one command.
```sh
npm install @cometchat/chat-uikit-react
```
Nothing else in the README describes the first render, which tells you something about where the documentation lives. The heavy lifting for wiring is in the sample app rather than in the README, and the components are meant to be read as well as used, which is what the Storybook setup in the testing section is for.
There is also a second, newer path that is worth knowing about because it changes how the integration work happens. The README documents CometChat Agent Skills, which teach an AI coding agent how to build with the UI Kit in React 18+ apps built with Vite, Create React App, Next.js, React Router or Astro. The claim is that you ask the agent to add chat to my app and it detects your project setup, walks you through a short plan for approval, and writes the integration code into your existing app following the official guides. The skills work with Claude Code, Cursor, GitHub Copilot, Codex, Windsurf and other agents.
The installer runs in your project root and needs Node.js 18 or later.
```sh
npx @cometchat/skills add
```
By default the skills are installed for Claude Code, and you pass --ide with an agent name for a different one. After that you open the project in your agent and prompt it, or run /cometchat.

## Three test suites, and the E2E one that needs a live app

The testing section is the most detailed part of the README, and it describes three separate suites with different costs.
Unit tests use Vitest and live alongside the source files as *.spec.ts and *.spec.tsx files, covering individual components, hooks and utilities. Running them takes one command, and no browser or running server is required.
```sh
npm test
```
There is a coverage variant as well.
```sh
npm run test:coverage
```
Storybook provides the interactive development environment for building and testing components in isolation, opening at http://localhost:6006 in dev mode, with a static build script available separately.
```sh
npm run storybook
```
The E2E suite is the demanding one. Those tests live in sample-app/e2e/ and run against the live sample app, covering full user journeys: login, messaging, reactions, threads, groups, calls, search and more. They need a CometChat app of their own or one dedicated to E2E testing, with the App ID, Region, Auth Key and REST API Key noted down from the Dashboard.
Then several dashboard extensions must be enabled, including Stickers with sticker packs added from settings, Calling, Conversation and Advanced Search, Polls, Collaborative Document and Collaborative Whiteboard. Under Chat and Messaging, Settings, General Configuration and Media URL Access, you select Presigned URLs, and the README calls this out as required for every attachment flow, since without it the upload tray never resolves and those tests time out.
An AI agent user has to exist too, with UID ai-agent-e2e, name AI Agent E2E and role @agentic, created under the Dashboard's BYO Agents section.
The environment is then configured from an example file.
```bash
cd sample-app
cp .env.e2e.example .env.e2e
```
```env
COMETCHAT_APP_ID=your-app-id
COMETCHAT_REGION=us
COMETCHAT_AUTH_KEY=your-auth-key
COMETCHAT_API_KEY=your-rest-api-key
AI_AGENT_UID=ai-agent-e2e
```
Playwright browsers are installed with npx playwright install, and the suites are run with npm run e2e, with interactive and headed variants e2e:ui and e2e:headed, a debug mode, and a way to run one file directly with npx playwright test.

## Seed data is designed around which chats the tests mutate

The test data strategy table is worth reading because it explains a whole class of flaky test failures.
Three chats are read only. Bob Smith with the UID e2e-user-2 is a static one to one used by read only tests, the Design Team group e2e-group-1 is a static group for pagination and group details, and the CI/CD group e2e-group-33 exists to deliver incoming messages for the message-privately and pin-conversation tests.
Three are mutable. The Strategy group e2e-group-35 takes send, edit, delete, thread and reaction traffic. The Engineering group is the chat the pin-conversation tests pin and unpin, and Testing is a secondary mutable group.
The Engineering and Testing groups have an exact naming requirement. They must be public groups named exactly Engineering and exactly Testing, with any guids, and e2e-user-1 has to be added to Engineering and e2e-user-2 to Testing, because the tests send a message as e2e-user-1 to bring that user into the list before pinning.
The optional per-suite flags follow the same discipline. E2E_BLOCKED_MIME_TYPE gates the blocked-MIME test in multi-attachment, the E2E_PIN_MESSAGES_LIMIT and the participant pin denial flags gate the pin and save suite, and GROUP_AGENT_1_UID, GROUP_AGENT_2_UID, AGENTIC_GROUP_1_ID and AGENTIC_GROUP_2_ID gate the agentic group chat suite. Each of them self-skips its tests when left blank, so an unconfigured environment produces skips rather than failures.
Seeding is a one-time, idempotent step with npm run e2e:seed, and npm run e2e:cleanup deletes everything the suite created so the app can be reset.

## Licence, versions and the runtime dependency footprint

The licence field on the repository says Other, with the note that it is a custom licence GitHub cannot classify and that the LICENSE file holds the terms. There is a LICENSE.md file at the root of the tree alongside SECURITY.md and SUPPORT.md. If you are shipping this inside a commercial product, read that licence file directly rather than assuming a standard permissive licence, because a kit that renders a vendor's chat interface is exactly the kind of component where the terms were written deliberately.
On versions, the release cadence is quick. v7.2.4 was published on 2026-10-09, v7.2.3 on 2026-09-29 and v7.2.2 on 2026-09-25, and the default branch is v7 rather than main, which tells you the 7.x line is where the work happens. The last push was on 2026-10-09, the same day as the newest tag, and the repository is not archived.
The runtime dependency list is short. The package declares @cometchat/cards-react at about 1.0.0 and dompurify at 3.3.1 as its dependencies. The second one is worth noting: DOMPurify is a sanitiser, and its presence tells you that the kit renders message content that came from other users, which is exactly the place you need sanitising. The chat and calls SDKs, @cometchat/chat-sdk-javascript and @cometchat/calls-sdk-javascript, appear as devDependencies, so they are used by the sample app and the tests rather than being pulled into your bundle.
The build itself is tsup, the tests are vitest run, linting is eslint src/, and formatting is prettier. The prepare script runs husky, so pre-commit hooks are installed on install.

## Conclusion

Adopt cometchat-uikit-react when you are building a React application on top of CometChat and want a working chat and calling interface in days rather than months. Do not adopt it if you want a self hosted chat system you can run without a vendor account, because the kit expects a CometChat app with an App ID, a Region and an Auth Key. Before you build, check the dashboard features the components depend on, particularly calling and the media URL access setting, since a missing extension shows up as a broken attachment flow rather than a clear error.

## FAQ

### How do I install the CometChat React UI Kit?

Run npm install @cometchat/chat-uikit-react. The prerequisites are Node.js 18 or later, npm 9 or later and React 18 or later, and you need an App ID, a Region and an Auth Key from a new app in the CometChat Dashboard.

### How do I theme the CometChat React components?

Theming uses CSS custom properties for full visual customization, and the package exposes a ./styles export pointing at dist/index.css. The package declares only *.css as side effects, so the stylesheet is the intended override surface.

### What does the CometChat React UI Kit include?

The feature list covers conversations for one-to-one and group chats, a rich message list with reactions, threads and read receipts, voice and video calling with call logs, AI-powered assistant chat and smart replies, CSS custom property theming, and built-in multi-language support.

### How do I run the end to end tests for the CometChat UI Kit?

The Playwright tests live in sample-app/e2e/ and run against the live sample app. Create a CometChat app, enable the required dashboard extensions including Calling and set Media URL Access to Presigned URLs, copy .env.e2e.example to .env.e2e, install the browsers with npx playwright install, then run npm run e2e.

### Can an AI coding agent set up the CometChat React integration?

Yes. The README documents CometChat Agent Skills, installed with npx @cometchat/skills add in the project root. The skills work with Claude Code by default and with Cursor, GitHub Copilot, Codex, Windsurf and other agents, and support React 18+ apps built with Vite, Create React App, Next.js, React Router or Astro.

## Sources

- [cometchat/cometchat-uikit-react on GitHub](https://github.com/cometchat/cometchat-uikit-react)
- [Issues](https://github.com/cometchat/cometchat-uikit-react/issues)
- [Project website](https://www.cometchat.com)
- [README](https://github.com/cometchat/cometchat-uikit-react/blob/v7/README.md)
- [Releases](https://github.com/cometchat/cometchat-uikit-react/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/cometchat-cometchat-uikit-react