> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# CometChat UI Kit Builder For Next.js

> CometChat UI Kit Builder for Next.js is a low-code development tool to design and configure fully-featured chat experiences.

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.

## Requirements

| | |
| - | - |
| Next.js | 15 or 16, App Router |
| React | 19 |
| UI Kit | `@cometchat/chat-uikit-react` v7 — see the [React UI Kit v7](https://www.cometchat.com/docs/ui-kit/react/overview.md) docs |

The Builder exports a React code package; [Integration](https://www.cometchat.com/docs/chat-builder/nextjs/integration.md) covers dropping it into a Next.js project, which mainly means keeping it out of server rendering.

## 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](https://www.cometchat.com/docs/chat-builder/nextjs/builder-settings.md).

### 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.

![](https://mintcdn.com/cometchat-22654f5b/dJPACx1AKXUTpAHt/images/uikit-builder-preview.png?fit=max\&auto=format\&n=dJPACx1AKXUTpAHt\&q=85\&s=8a801797bb6c3c9af164502d41708a4a)

### 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](https://www.cometchat.com/docs/chat-builder/nextjs/integration.md) for full steps.

***

## Try Live Demo

Experience the CometChat UI Kit Builder in action:

> **[Launch Live Demo](https://preview.cometchat.com/)**

or follow the video walkthrough below:

[YouTube video](https://www.youtube.com/embed/0mmX_3Ohnz8)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.