CometChat UI Kit Builder For Angular

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 an Angular-ready codebase

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, rich text, multiple attachments
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
Composer	Standard or compact message composer

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 to generate a complete, standalone Angular application based on your configuration.

3. Integrate

Run the export as its own app, or drop the <cometchat-app /> component into an Angular project you already have. See the Integration Guide for full steps.

What You Get

The export is a complete Angular application, not a fragment. Your App ID, region and feature choices are already written into it, so it runs as-is. That gives you two ways in, and you do not have to choose up front:

Approach	When it fits
Run it as its own app	A standalone support console, an internal tool, or evaluating the feature set before you integrate
Embed `<cometchat-app />`	You already have an Angular app and need the chat inside it, not another shell around it

The export requires Node.js 20.19+, 22.12+ or 24+ (Angular 21’s supported ranges) and ships with Angular 21 in its package.json. A package-lock.json is included — use npm ci to install the exact tree the app was built and type-checked against.

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

​What You Get

​Try Live Demo

Launch Live Demo

What You Can Configure

Chat Features

Call Features

Layout

Theming

How to Use UI Kit Builder

1. Design

2. Export

3. Integrate

What You Get

Try Live Demo