CometChat UI Kit Builder For Next.js

It provides a set of prebuilt, production-ready messaging components backed by CometChat’s real-time infrastructure. With CometChat UI Kit Builder, you can:

Configure chat and calling features
Apply theming and layout options
Export Next.js-ready code

The exported UI connects to CometChat’s SDK and infrastructure, which manages message transport, sync, and backend scaling.

What You Can Configure

Toggle these features on or off directly in the UI Kit Builder. For a full reference of each setting, see UI Kit Builder Settings.

Chat Features

Category	Includes
Core Messaging Experience	Typing indicators, threads, media sharing (photos, video, audio, files), edit & delete messages, read receipts, search, quoted replies, mark as unread
Deeper User Engagement	Mentions, @all mentions, reactions, message translation, polls, collaborative whiteboard & document, voice notes, emojis, stickers, user & group info
AI User Copilot	Conversation starters, conversation summaries, smart replies
User Management	Friends-only mode
Group Management	Create groups, add members, join/leave, delete groups, view members
Moderation	Content moderation, report messages, kick/ban users, promote/demote members
Private Messaging Within Groups	Direct messages between group members
In-App Sounds	Incoming & outgoing message sounds

Call Features

Category	Includes
Voice & Video Calling	1:1 voice calling, 1:1 video calling, group voice conference, group video conference

Layout

Category	Includes
Sidebar	With Sidebar or Without Sidebar mode
Tabs	Conversations, Call Logs, Users, Groups

Theming

Category	Includes
Theme	System, Light, or Dark mode
Colors	Brand color, primary & secondary text colors (light & dark)
Typography	Font family, text sizing (default, compact, comfortable)

How to Use UI Kit Builder

1. Design

Configure your chat layout, toggle features, and pick a theme using the UI Kit Builder.

2. Export

Click Export Code to generate a production-ready Next.js codebase based on your configuration.

3. Integrate

Drop the exported code into your Next.js project, add your CometChat credentials, and run the app. See the Integration Guide for full steps.

Try Live Demo

Experience the CometChat UI Kit Builder in action:

Launch Live Demo

or follow the video walkthrough below:

​What You Can Configure

​Chat Features

​Call Features

​Layout

​Theming

​How to Use UI Kit Builder

​1. Design

​2. Export

​3. Integrate

​Try Live Demo