Add Conversation Starters

Display AI-generated opening messages to help users start new conversations.

AI Agent Component Spec

{
  "component": "CometChatConversationStarter",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatConversationStarter } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Displays AI-generated conversation starter suggestions when a chat is empty, helping users initiate meaningful conversations.",
  "cssRootClass": ".cometchat-conversation-starter",
  "dashboardSetup": "Enable Conversation Starter in CometChat Dashboard > Extensions > Smart Chat Features",
  "autoIntegration": "Automatically appears in empty CometChatMessageList when enabled"
}

Overview

This guide shows you how to add AI-powered conversation starters to your chat. When users open a new or empty conversation, they’ll see suggested opening messages to help break the ice.

Time estimate: 5 minutes
Difficulty: Beginner

Prerequisites

• React.js setup complete
• Messaging configured
• CometChat Pro or Enterprise plan (AI features)

Steps

Step 1: Enable Conversation Starter in Dashboard

1. Go to your CometChat Dashboard
2. Navigate to Extensions → Smart Chat Features
3. Enable Conversation Starter

Step 2: Auto-Integration

Once enabled, conversation starters automatically appear in empty chats:

import {
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ChatWithStarters({ user }: { user: CometChat.User }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      {/* Conversation starters appear here when chat is empty */}
      <CometChatMessageList user={user} />
      <CometChatMessageComposer user={user} />
    </div>
  );
}

export default ChatWithStarters;

When the message list is empty, AI-generated conversation starters appear automatically.

Step 3: Handle Starter Selection

When a user clicks a conversation starter, it populates the message composer:

import { useEffect } from "react";
import {
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatUIEvents,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ChatWithStarterTracking({ user }: { user: CometChat.User }) {
  useEffect(() => {
    // Track when users select conversation starters
    const subscription = CometChatUIEvents.ccConversationStarterClicked?.subscribe(
      (starter: string) => {
        console.log("User selected starter:", starter);
        // Analytics tracking
      }
    );

    return () => subscription?.unsubscribe();
  }, []);

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <CometChatMessageList user={user} />
      <CometChatMessageComposer user={user} />
    </div>
  );
}

Complete Example

Full implementation with conversation starters:

import { useState, useEffect } from "react";
import {
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatMessageHeader,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ConversationStarterChat() {
  const [user, setUser] = useState<CometChat.User | null>(null);

  useEffect(() => {
    CometChat.getUser("USER_ID").then(setUser);
  }, []);

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

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <CometChatMessageHeader user={user} />
      
      <div style={{ flex: 1, overflow: "hidden" }}>
        {/* Starters appear when this list is empty */}
        <CometChatMessageList user={user} />
      </div>
      
      <CometChatMessageComposer user={user} />
    </div>
  );
}

export default ConversationStarterChat;

Advanced Configuration

Fetch Conversation Starters Programmatically

Get starters via the SDK:

import { CometChat } from "@cometchat/chat-sdk-javascript";

async function getConversationStarters(
  receiverId: string,
  receiverType: string
): Promise<string[]> {
  try {
    const response = await CometChat.callExtension(
      "conversation-starter",
      "POST",
      "v1/suggest",
      {
        receiverId,
        receiverType,
      }
    );
    return response.data?.suggestions || [];
  } catch (error) {
    console.error("Error fetching starters:", error);
    return [];
  }
}

Custom Conversation Starters UI

Build a custom starters component:

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

interface ConversationStartersProps {
  user: CometChat.User;
  onStarterSelect: (starter: string) => void;
}

function CustomConversationStarters({ user, onStarterSelect }: ConversationStartersProps) {
  const [starters, setStarters] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    CometChat.callExtension(
      "conversation-starter",
      "POST",
      "v1/suggest",
      {
        receiverId: user.getUid(),
        receiverType: CometChat.RECEIVER_TYPE.USER,
      }
    )
      .then((response) => {
        setStarters(response.data?.suggestions || []);
      })
      .finally(() => setLoading(false));
  }, [user]);

  if (loading) {
    return <div className="starters-loading">Generating suggestions...</div>;
  }

  if (starters.length === 0) return null;

  return (
    <div className="custom-conversation-starters">
      <h4>Start the conversation</h4>
      <div className="starters-list">
        {starters.map((starter, index) => (
          <button
            key={index}
            className="starter-chip"
            onClick={() => onStarterSelect(starter)}
          >
            {starter}
          </button>
        ))}
      </div>
    </div>
  );
}

Disable Conversation Starters

Control when starters appear:

import { CometChatMessageList } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function ChatWithoutStarters({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageList
      user={user}
      disableConversationStarter={true}
    />
  );
}

Styling

Customize conversation starters appearance:

.cometchat-conversation-starter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.cometchat-conversation-starter__title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.cometchat-conversation-starter__subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}

.cometchat-conversation-starter__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 400px;
}

.cometchat-conversation-starter__suggestion {
  padding: 10px 16px;
  border-radius: 20px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.cometchat-conversation-starter__suggestion:hover {
  background: #6852d6;
  color: #ffffff;
  border-color: #6852d6;
}

Common Issues

Conversation Starters require a CometChat Pro or Enterprise plan. The feature won’t appear without proper plan access.

Issue	Solution
Starters not appearing	Verify extension is enabled in Dashboard
Empty suggestions	AI needs context; may not work for all users
Slow loading	AI processing takes 1-2 seconds
Feature unavailable	Upgrade to Pro or Enterprise plan

Next Steps

Smart Replies

AI-generated response suggestions

AI Assistant

Full AI chat assistant

Related Guides

AI Assistant Chat

Messaging

Conversations