Enable Built-in Extensions

Activate CometChat extensions for stickers, polls, translation, link previews, and more

AI Agent Component Spec

{
  "package": "@cometchat/chat-uikit-react",
  "requiredSetup": "CometChatUIKit.init() + CometChatUIKit.login() + Extensions enabled in Dashboard",
  "categories": ["User Experience", "User Engagement", "Collaboration", "Security", "Customer Support", "Smart Chat Features"],
  "keyComponents": {
    "CometChatMessageComposer": ["Stickers", "Polls", "Whiteboard", "Document"],
    "CometChatMessageList": ["Translation", "Link Preview", "Thumbnails"]
  },
  "activation": "Enable from CometChat Dashboard - UI Kit auto-integrates"
}

Overview

CometChat UI Kit includes built-in support for extensions that add interactive features to your chat. Extensions are activated from the CometChat Dashboard and auto-integrate into UI Kit components.

Time estimate: 5 minutes
Difficulty: Beginner

Prerequisites

• React.js integration completed
• Access to CometChat Dashboard

Steps

Step 1: Access the Dashboard

1. Log in to CometChat Dashboard
2. Select your app
3. Navigate to Extensions in the sidebar

Step 2: Enable extensions

Toggle on the extensions you want to use. They auto-integrate into the UI Kit.

After enabling an extension, ensure your app calls CometChatUIKit.init() and CometChatUIKit.login() for the extension to activate.

Available Extensions

User Experience

Link Preview

Displays a summary (title, description, thumbnail) for URLs shared in chat.

Auto-integrates into CometChatMessageList.

Thumbnail Generation

Creates smaller preview images for shared images, reducing bandwidth.

Auto-integrates into CometChatMessageList.

Message Shortcuts

Sends predefined messages using short codes (e.g., !hb expands to Happy birthday!).

Pin Message

Pins important messages in a conversation for easy access.

Save Message

Bookmarks messages for later reference. Saved messages are private to the user.

Voice Transcription

Converts audio messages to text.

User Engagement

Stickers

Sends pre-designed stickers in chat.

Auto-integrates into CometChatMessageComposer.

Polls

Creates polls in group discussions with predefined answer options.

Auto-integrates into CometChatMessageComposer action sheet.

Message Translation

Translates messages into the local locale.

Auto-integrates into CometChatMessageList action sheet.

Giphy / Tenor

Search and share GIFs from Giphy or Tenor.

Reminders

Sets reminders for messages. A bot sends a notification when due.

Collaboration

Collaborative Whiteboard

Real-time shared whiteboard for drawing and brainstorming.

Auto-integrates into CometChatMessageComposer action sheet.

Collaborative Document

Shared document editing for real-time collaboration.

Auto-integrates into CometChatMessageComposer action sheet.

Security

Disappearing Messages

Messages auto-delete after a specified interval. Works for 1:1 and group messages.

Smart Chat Features

These AI-powered features require additional configuration:

Feature	Description
Conversation Starter	AI-generated opening messages for new chats
Smart Replies	AI-generated response suggestions
Conversation Summary	AI-generated recap of long conversations

See the AI Features guide for setup.

Complete Example

No code changes needed! Extensions auto-integrate after enabling in the Dashboard:

import { useEffect, useState } from "react";
import {
  CometChatUIKit,
  UIKitSettingsBuilder,
  CometChatConversationsWithMessages,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

const COMETCHAT_CONSTANTS = {
  APP_ID: "YOUR_APP_ID",
  REGION: "YOUR_REGION",
  AUTH_KEY: "YOUR_AUTH_KEY",
};

function App() {
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    const init = async () => {
      const UIKitSettings = new UIKitSettingsBuilder()
        .setAppId(COMETCHAT_CONSTANTS.APP_ID)
        .setRegion(COMETCHAT_CONSTANTS.REGION)
        .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
        .subscribePresenceForAllUsers()
        .build();

      await CometChatUIKit.init(UIKitSettings);
      await CometChatUIKit.login("USER_UID");
      setIsInitialized(true);
    };

    init();
  }, []);

  if (!isInitialized) return <div>Loading...</div>;

  // Extensions are automatically available in the UI
  return (
    <div style={{ height: "100vh" }}>
      <CometChatConversationsWithMessages />
    </div>
  );
}

export default App;

Extension Integration Points

Extension	Component	Location
Stickers	MessageComposer	Attachment menu
Polls	MessageComposer	Action sheet
Whiteboard	MessageComposer	Action sheet
Document	MessageComposer	Action sheet
Translation	MessageList	Message action sheet
Link Preview	MessageList	Message bubble
Thumbnails	MessageList	Image messages

Common Issues

Extensions must be enabled in the Dashboard before they appear in the UI Kit. Changes may take a few minutes to propagate.

Issue	Solution
Extension not showing	Verify it’s enabled in Dashboard
Extension not working	Check init() and login() completed
Missing action in menu	Some extensions require specific message types

Next Steps

AI Features

Enable AI-powered chat features

Custom Formatters

Build custom text formatters

Related Guides

Message Composer

Message List

AI Assistant