CometChat UI Kit Builder For Flutter

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 Flutter-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 Flutter module based on your configuration.

3. Integrate

Drop the exported module into your Flutter 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

Next Steps

Integration

Step-by-step guide to integrate the UI Kit Builder.

Builder Settings

Understand the settings file and feature toggles.

Customizations

Adjust component props, behavior, and UI elements.

Directory Structure

See how the exported code is organized.

Helpful Resources

Flutter Sample App

Try the fully featured Flutter sample for reference implementations.

UI Kit Source Code

Explore the complete Flutter UI Kit source code.

CometChat Dashboard

Configure features, manage users, and launch the UI Kit Builder.

Need Help?

Developer Community: https://community.cometchat.com/
Support Portal: https://help.cometchat.com/hc/en-us/requests/new

UI Kit Builder Integration

⌘I

​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