Flutter UI Kit

Prebuilt Flutter widgets for chat, voice, and video calling. Works on iOS and Android.

🚀 V6 Available — The Flutter UI Kit V6 is now available with BLoC state management, clean architecture, and improved performance. Check out the V6 Overview →

AI Agent Component Spec

Field	Value
Package	cometchat_chat_uikit v5.2.x
Calling	Optional — cometchat_calls_uikit
Platforms	iOS 13.0+, Android API 21+
Flutter	3.0+ recommended
Localization	Built-in support
Source	GitHub
AI Skills	npx @cometchat/skills add — GitHub

The CometChat Flutter UI Kit provides prebuilt, customizable widgets for adding chat, voice, and video calling to any Flutter app. Each widget 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 add chat to any Flutter project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.

Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 30+ more agents.

npx @cometchat/skills add

Use --ide <name> to target a specific IDE (e.g. --ide cursor), or --ide all to install for all supported IDEs.

Then in your IDE:

/cometchat add chat to my app

The skill detects your Flutter project structure, navigation setup, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved as a Dart const file or via --dart-define.

After the first integration, re-run /cometchat anytime to pick from the iteration menu:

• Customize look & feel — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
• Add a feature — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
• Customize a component — custom message bubbles, headers, composer actions, empty/loading states
• Set up production auth — replace the dev Auth Key with a server-side token endpoint
• Set up user management — server endpoints for creating/updating/deleting CometChat users
• Run diagnostics — verify, drift detection, symptom-to-cause lookup

---

Try It

Sample App

Clone and run the Flutter sample project

---

Get Started

Getting Started

Install, initialize, and build your first chat screen

---

Explore

Components

Browse all prebuilt UI widgets

Features

Chat, calling, AI, and extensions

Theming

Colors, fonts, dark mode, and custom styling

Key Concepts

Understand CometChat’s core concepts

---

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 v4