React UI Kit - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react` v6.3.x
Peer deps	`react` >=18, `react-dom` >=18, `rxjs` ^7.8.1
Calling	Optional — `@cometchat/calls-sdk-javascript`
SSR	Client-side only. Use `ssr: false` or `client:only="react"`
Localization	19 languages built-in
Source	GitHub
AI Skills	`npx skills add cometchat/cometchat-skills --all` — GitHub

The CometChat React UI Kit provides prebuilt, customizable components for adding chat, voice, and video calling to any React app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout.

Integrate with AI Coding Agents

Use CometChat Skills to integrate the React UI Kit using your AI coding agent. Skills auto-detect your framework, collect credentials, and scaffold a complete chat integration — conversations, one-to-one chat, or tab-based chat — with the correct SSR pattern, TypeScript types, and error handling. Works with Claude Code, Cursor, Kiro, VS Code Copilot, Codex, and any agent that reads markdown context.

npx skills add cometchat/cometchat-skills --all

Then ask your agent to “integrate CometChat” or run /cometchat — it handles the rest.

CometChat Skills

Auto-detect framework, scaffold chat integration

Supported Agents

Claude Code · Cursor · Kiro · VS Code Copilot · Codex

Try It

Live Demo

Try the full chat experience in your browser

CodeSandbox

Fork, add your credentials, and start building

Get Started

Pick your framework and follow the step-by-step integration guide:

React.js

Vite or Create React App

Next.js

App Router with client-side rendering

React Router

SPA with React Router v6+

Astro

React islands with client:only directive

Explore

Components

Browse all prebuilt UI components

Features

Chat, calling, AI, and extensions

Theming

Colors, fonts, dark mode, and custom styling

Guides

Threaded messages, new chat, search, and more

Resources

Sample App

Working reference app

Source Code

Full UI Kit source on GitHub

Figma

Design resources and prototyping

Troubleshooting

Common issues and fixes

Support

Open a support ticket

Migration Guide

Upgrading from v5

React.js Integration

⌘I

​Integrate with AI Coding Agents