Skip to main content
UI Kit Builder streamlines integrating CometChat’s Flutter UI Kit into your cross-platform app. Design the experience visually, export platform-ready assets, and connect them to your Flutter project with just a few steps.

​
Complete Integration Workflow

  1. Design your chat experience in UI Kit Builder.
  2. Export your Flutter package with configuration JSON, assets, and helper files.
  3. Enable advanced features in the CometChat Dashboard if your experience requires them.
  4. Optionally explore the sample module to preview the UI Kit Builder experience.
  5. Integrate the UI Kit Builder module into your Flutter project.
  6. Customize the UI further with the Flutter UI Kit components and styling APIs.

​
Launch the UI Kit Builder

  1. Log in to your CometChat Dashboard: https://app.cometchat.com
  2. Select your application.
  3. Go to Integrate → Flutter → Launch UI Kit Builder.

​
Enable Features in CometChat Dashboard

If your app needs any of these, enable them from your Dashboard: https://app.cometchat.com
  • Stickers
  • Polls
  • Collaborative whiteboard
  • Collaborative document
  • Message translation
  • AI User Copilot: Conversation starter, Conversation summary, Smart reply
How to enable:
  1. Log in to the Dashboard.
  2. Select your app.
  3. Navigate to Chat → Features.
  4. Toggle ON the required features and Save.

​
Integration with CometChat UI Kit Builder

Follow these steps to wire the Builder output into your existing Flutter app.

​
Step 1: Download the Builder package

From the Dashboard export, download the Flutter Builder bundle. Inside you will find a chat_builder module, assets, and helper utilities.

​
Step 2: Add the Builder module to your project

Copy the chat_builder directory into the root of your Flutter project (for example, next to your lib, ios, and android folders).

​
Step 3: Copy Builder assets

Move the contents of chat_builder/assets/ into your app’s assets/ directory. Keep the folder structure intact so fonts, JSON files, and images resolve correctly.

​
Step 4: Update pubspec.yaml

Point to the local Builder module and register the assets and fonts supplied by the export: 
dependencies:
  # other dependencies
  chat_builder:
    path: ./chat_builder

flutter:
  uses-material-design: true
  assets:
    - assets/
    - assets/sample_app/
  fonts:
    - family: arial
      fonts:
        - asset: assets/fonts/arial_regular.ttf
        - asset: assets/fonts/arial_medium.ttf
        - asset: assets/fonts/arial_bold.ttf
    - family: inter
      fonts:
        - asset: assets/fonts/inter_regular.otf
        - asset: assets/fonts/inter_medium.otf
        - asset: assets/fonts/inter_bold.otf
    - family: roboto
      fonts:
        - asset: assets/fonts/roboto_regular.ttf
        - asset: assets/fonts/roboto_medium.ttf
        - asset: assets/fonts/roboto_bold.ttf
    - family: times New Roman
      fonts:
        - asset: assets/fonts/times_new_roman_regular.ttf
        - asset: assets/fonts/times_new_roman_medium.otf
        - asset: assets/fonts/times_new_roman_bold.otf
Ensure indentation is consistent—Flutter’s asset and font declarations are whitespace sensitive.

​
Step 5: Install dependencies

Run the following commands at the root of your project: 
flutter pub get
cd ios && pod install
If your project uses scripting for iOS installs, adapt the second command accordingly.

​
Step 6: Initialize Builder settings before runApp

Import the helper from the Builder module and load settings during app startup: 
import 'package:flutter/widgets.dart';
import 'package:chat_builder/utils/builder_settings_helper.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await BuilderSettingsHelper.loadFromAsset();
  runApp(const MyApp());
}
This ensures generated constants, themes, and resources are ready when your widgets build.

​
Step 7: Launch UI Kit Builder screens as needed

Use the ChatBuilder APIs to open preconfigured experiences.
  • If CometChat is not initialized or the user is not logged in: 
    import 'package:chat_builder/chat_builder.dart';

ChatBuilder.launchBuilder(context);
  • If CometChat is initialized and the user is logged in: 
    ChatBuilder.launchMessages(
  context: context,
  user: user, // instance of CometChatUser
);

ChatBuilder.launchMessages(
  context: context,
  group: group, // instance of CometChatGroup
);

​
Step 8: Refresh settings after configuration updates

Whenever you export a new Builder configuration, replace the generated JSON, fonts, and assets in your project, then rerun flutter pub get to pick up changes.

​
Available Builder Settings Categories

  • Core Messaging Experience — typing indicators, attachments, media, polls.
  • Deeper User Engagement — reactions, message translation, stickers, extensions.
  • AI User Copilot — smart replies, conversation starters, summaries.
  • Group Management — creation, roles, member controls.
  • Moderator Controls — kick, ban, mute, report workflows.
  • Voice & Video Calling — one-to-one and group calling toggles.
  • Layout & Styling — colors, fonts, corner radii, spacing.

​
Benefits of Using CometChat UI Kit Builder

  • Easy configuration: Update experiences without touching Flutter code.
  • Type-safe constants: Generated Dart helpers keep settings discoverable.
  • Consistent styling: Centralized theming across modules.
  • Feature toggling: Enable or disable capabilities dynamically.
  • Faster iteration: Designers and developers stay aligned via visual config.

​
Alternative: Import the CometChatBuilder Sample App as a Module

Prefer a plug-and-play starting point? Import the preconfigured sample module to explore the experience before wiring it into production.
  1. Download the sample from the CometChat Dashboard.
  2. Open the sample in your IDE and run flutter pub get followed by flutter run to preview the flows.
  3. When ready, add the sample module to your workspace and reference it from your main app via path dependencies.
  4. Gradually migrate screens or copy utilities (like BuilderSettingsHelper) into your production package.

​
Run the App

After integrating the module, run your Flutter project on an emulator or device: 
flutter run
Ensure a CometChat user is created and logged in via your authentication flow before launching message screens.

​
Additional Notes

  • Keep the Builder assets in sync with the latest export whenever you change configuration in the dashboard.
  • Fonts supplied by the Builder can be swapped for your brand fonts—update the font family definitions in pubspec.yaml.
  • For macOS or web targets, guard Builder-specific code with platform checks until those exports are supported.

​
Troubleshooting

  • Builder package not found: Confirm the chat_builder directory path in pubspec.yaml is correct.
  • Assets missing at runtime: Verify the asset paths in pubspec.yaml and rerun flutter pub get.
  • iOS build issues: Make sure you ran pod install inside the ios directory after adding the new dependency.
  • Undefined symbols: Reimport or regenerate the BuilderSettingsHelper if package paths changed.

​
Next Steps