Enable Smart Replies

Add AI-generated response suggestions based on conversation context.

AI Agent Component Spec

{
  "component": "CometChatSmartReplies",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatSmartReplies } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Displays AI-generated response suggestions based on conversation context, allowing users to quickly reply with contextually relevant messages.",
  "cssRootClass": ".cometchat-smart-replies",
  "dashboardSetup": "Enable Smart Replies in CometChat Dashboard > Extensions > Smart Chat Features",
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "required": true },
      "replies": { "type": "string[]", "default": "[]" }
    },
    "callbacks": {
      "onReplyClick": "(reply: string) => void",
      "onClose": "() => void"
    }
  },
  "autoIntegration": "Automatically appears in CometChatMessageList when enabled in Dashboard"
}

Overview

This guide shows you how to enable AI-powered smart reply suggestions using CometChat’s Smart Replies feature. Smart replies analyze conversation context and suggest relevant responses that users can send with a single click.

Time estimate: 5 minutes
Difficulty: Beginner

Prerequisites

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

Steps

Step 1: Enable Smart Replies in Dashboard

1. Go to your CometChat Dashboard
2. Navigate to Extensions → Smart Chat Features
3. Enable Smart Replies
4. Configure the AI model settings if needed

Step 2: Smart Replies Auto-Integration

Once enabled, smart replies automatically appear in CometChatMessageList:

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

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

export default ChatWithSmartReplies;

Smart reply suggestions appear above the message composer when you receive a new message.

Step 3: Handle Smart Reply Selection

The message composer automatically handles smart reply clicks, but you can customize the behavior:

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 ChatWithSmartReplyTracking({ user }: { user: CometChat.User }) {
  useEffect(() => {
    // Track when users select smart replies
    const subscription = CometChatUIEvents.ccSmartReplyClicked?.subscribe(
      (reply: string) => {
        console.log("User selected smart reply:", reply);
        // Analytics tracking, etc.
      }
    );

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

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

Complete Example

Full chat implementation with smart replies:

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 SmartRepliesChat() {
  const [user, setUser] = useState<CometChat.User | null>(null);

  useEffect(() => {
    // Fetch a user to chat with
    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" }}>
        <CometChatMessageList user={user} />
      </div>
      
      {/* Smart replies appear above the composer automatically */}
      <CometChatMessageComposer user={user} />
    </div>
  );
}

export default SmartRepliesChat;

Advanced Configuration

Fetch Smart Replies Programmatically

Get smart reply suggestions via the SDK:

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

async function getSmartReplies(messageId: number): Promise<string[]> {
  try {
    const response = await CometChat.getSmartReplies(messageId);
    return response.getSmartReplies() || [];
  } catch (error) {
    console.error("Error fetching smart replies:", error);
    return [];
  }
}

Custom Smart Replies UI

Build a custom smart replies component:

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

interface CustomSmartRepliesProps {
  message: CometChat.BaseMessage;
  onReplySelect: (reply: string) => void;
}

function CustomSmartReplies({ message, onReplySelect }: CustomSmartRepliesProps) {
  const [replies, setReplies] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    CometChat.getSmartReplies(message.getId())
      .then((response) => {
        setReplies(response.getSmartReplies() || []);
      })
      .finally(() => setLoading(false));
  }, [message]);

  if (loading) return <div className="smart-replies-loading">Loading suggestions...</div>;
  if (replies.length === 0) return null;

  return (
    <div className="custom-smart-replies">
      <span className="label">Suggested replies:</span>
      <div className="replies-container">
        {replies.map((reply, index) => (
          <button
            key={index}
            className="reply-chip"
            onClick={() => onReplySelect(reply)}
          >
            {reply}
          </button>
        ))}
      </div>
    </div>
  );
}

Disable Smart Replies for Specific Conversations

Control when smart replies appear:

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

function ChatWithConditionalSmartReplies({ 
  user,
  enableSmartReplies = true 
}: { 
  user: CometChat.User;
  enableSmartReplies?: boolean;
}) {
  return (
    <CometChatMessageList
      user={user}
      disableSmartReplies={!enableSmartReplies}
    />
  );
}

Styling

Customize smart replies appearance:

.cometchat-smart-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}

.cometchat-smart-replies__reply {
  padding: 8px 16px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.cometchat-smart-replies__reply:hover {
  background: #6852d6;
  color: #ffffff;
  border-color: #6852d6;
}

Common Issues

Smart Replies requires a CometChat Pro or Enterprise plan. Ensure the feature is enabled in your Dashboard.

Issue	Solution
No suggestions appearing	Verify Smart Replies is enabled in Dashboard
Irrelevant suggestions	AI improves with more conversation context
Slow response	AI processing takes 1-2 seconds; this is normal
Feature not available	Upgrade to Pro or Enterprise plan

Next Steps

Conversation Starters

AI-generated opening messages

AI Assistant

Full AI chat assistant

Related Guides

AI Assistant Chat

Messaging

Message Composer