> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-correction-sticker-button-react-v7-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Extensions

> Overview of CometChat extensions for React UI Kit, including engagement, collaboration, security, support, and smart chat features.

<Accordion title="AI Integration Quick Reference">
  | Field                | Value                                                                                                                                                                                                                                                                       |
  | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Package              | `@cometchat/chat-uikit-react`                                                                                                                                                                                                                                               |
  | Required setup       | Wrap app in `CometChatProvider` with valid credentials + Extensions enabled in [CometChat Dashboard](/fundamentals/extensions-overview)                                                                                                                                     |
  | Extension categories | User Experience, User Engagement, Collaboration, Security, Customer Support, Smart Chat Features                                                                                                                                                                            |
  | Key components       | `CometChatMessageComposer` → [Message Composer](/ui-kit/react/components/message-composer) (Stickers, Polls, Whiteboard, Document), `CometChatMessageList` → [Message List](/ui-kit/react/components/message-list) (Translation, Link Preview, Thumbnails)                  |
  | Activation           | Enable each extension from the CometChat Dashboard — no additional code required. Note that the Stickers, Polls, Collaborative Document, Collaborative Whiteboard, and Translate entry points render in the UI regardless of activation; activation is what makes them work |
</Accordion>

## Overview

CometChat UI Kit includes built-in support for extensions that add interactive, secure, and efficient features to chat. Extensions are activated from the [CometChat Dashboard](https://app.cometchat.com/) and integrate into UI Kit components without additional code.

Extensions fall into two groups, which behave differently when an extension is *not* activated:

* **Entry-point extensions** — Stickers, Polls, Collaborative Document, Collaborative Whiteboard, and Message Translation. Their buttons and menu options render unconditionally. Activation determines whether the underlying action succeeds, not whether the control appears. Hide the ones you don't offer using the Message Composer and Message List props noted in each section below.
* **Data-driven extensions** — Link Preview and Thumbnail Generation. These render only when the extension has attached data to a message, so they appear on their own once activated and are invisible until then.

<Note>
  Ensure your app is wrapped in `CometChatProvider` with valid credentials. Extensions must be activated from the [CometChat Dashboard](/fundamentals/extensions-overview).
</Note>

## Built-in Extensions

The grouping below mirrors the CometChat Dashboard.

### User Experience

#### Bitly

Shortens long URLs in text messages using Bitly. See [Bitly Extension](/fundamentals/bitly).

#### Link Preview

Displays a summary (title, description, thumbnail) for URLs shared in chat. See [Link Preview Extension](/fundamentals/link-preview).

Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/components/message-list) when activated.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/2QCrpOecq_DQ6OoU/images/0219d225-extension_link_preview_web_screens-3c9e0774d6a45316df0ee48ee2338c2d.png?fit=max&auto=format&n=2QCrpOecq_DQ6OoU&q=85&s=fd62ed8ff6d1d0fb26548dbfeb3a4653" width="1282" height="802" data-path="images/0219d225-extension_link_preview_web_screens-3c9e0774d6a45316df0ee48ee2338c2d.png" />
</Frame>

#### Message Shortcuts

Sends predefined messages using short codes (e.g., `!hb` expands to `Happy birthday!`). See [Message Shortcuts Extension](/fundamentals/message-shortcuts).

#### Pin Message

Pins important messages in a conversation for easy access. See [Pin Message Extension](/fundamentals/pin-message).

#### Rich Media Preview

Generates rich preview panels for URLs using iFramely. See [Rich Media Preview Extension](/fundamentals/rich-media-preview).

#### Save Message

Bookmarks messages for later reference. Saved messages are private to the user. See [Save Message Extension](/fundamentals/save-message).

#### Thumbnail Generation

Creates smaller preview images for shared images, reducing bandwidth. See [Thumbnail Generation Extension](/fundamentals/thumbnail-generation).

Auto-integrates into the Message Bubble of [MessageList](/ui-kit/react/components/message-list) when activated.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/WraZB454_T_a9sEO/images/382b5743-extension_thumbnail_generation_web_screens-b660bc307ecd540c0a7301e65ca0af5b.png?fit=max&auto=format&n=WraZB454_T_a9sEO&q=85&s=62ebef4e265b64707fc1ab05c21ba304" width="1282" height="802" data-path="images/382b5743-extension_thumbnail_generation_web_screens-b660bc307ecd540c0a7301e65ca0af5b.png" />
</Frame>

#### TinyURL

URL shortening using TinyURL. See [TinyURL Extension](/fundamentals/tinyurl).

#### Voice Transcription

Converts audio messages to text. See [Voice Transcription Extension](/fundamentals/voice-transcription).

### User Engagement

#### Giphy

Search and share GIFs from Giphy. See [Giphy Extension](/fundamentals/giphy).

#### Message Translation

Translates messages into the local locale. See [Message Translation Extension](/fundamentals/message-translation).

The Translate option is always present in the message options menu of [MessageList](/ui-kit/react/components/message-list) for text messages, regardless of whether the extension is activated — activation is what makes the translation request succeed. Use `hideTranslateMessageOption` on the Message List to remove it.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/CtNBPrd2Ig8XnZUd/images/0baa8eed-extension_message_translation_web_screens-4e96a6b7bc989197532d49ca83f77977.png?fit=max&auto=format&n=CtNBPrd2Ig8XnZUd&q=85&s=e84cde5019f1eb761d39e5672e333714" width="1282" height="802" data-path="images/0baa8eed-extension_message_translation_web_screens-4e96a6b7bc989197532d49ca83f77977.png" />
</Frame>

#### Polls

Creates polls in group discussions with predefined answer options. See [Polls Extension](/fundamentals/polls).

The Polls option is always present in the attachment menu of [Message Composer](/ui-kit/react/components/message-composer), regardless of whether the extension is activated — activation is what makes poll creation succeed. Use `hideAttachmentOptions={{ polls: true }}` on the Message Composer to remove it.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/OQ1jUHWCbA5mUxFa/images/cc12b78b-extension_poll_web_screens-d48dc40c1a77ad81b6382607d7721b19.png?fit=max&auto=format&n=OQ1jUHWCbA5mUxFa&q=85&s=974647b759ad5cff60d5f747ce4b18e6" width="1282" height="802" data-path="images/cc12b78b-extension_poll_web_screens-d48dc40c1a77ad81b6382607d7721b19.png" />
</Frame>

#### Reminders

Sets reminders for messages or creates personal reminders. A bot sends a notification when due. See [Reminders Extension](/fundamentals/reminders).

#### Stickers

Sends pre-designed stickers in chat. See [Sticker Extension](/fundamentals/stickers).

The sticker button is always rendered in [Message Composer](/ui-kit/react/components/message-composer), regardless of whether the extension is activated. Use `hideStickersButton` on the Message Composer to remove the button entirely.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/9R09AJMYhE6K_Goe/images/f3262629-extension_sticker_web_screens-6e10335c8a82dea2b11cc875c44b606e.png?fit=max&auto=format&n=9R09AJMYhE6K_Goe&q=85&s=13e97f2b787acfd4b6e62515c3cc31d6" width="1282" height="802" data-path="images/f3262629-extension_sticker_web_screens-6e10335c8a82dea2b11cc875c44b606e.png" />
</Frame>

#### Stipop

Integrates Stipop's sticker library. See [Stipop Extension](/fundamentals/stickers-stipop).

#### Tenor

Search and share GIFs from Tenor. See [Tenor Extension](/fundamentals/tenor).

### Collaboration

#### Collaborative Document

Shared document editing for real-time collaboration. See [Collaborative Document Extension](/fundamentals/collaborative-document).

The Collaborative Document option is always present in the attachment menu of [Message Composer](/ui-kit/react/components/message-composer), regardless of whether the extension is activated — activation is what makes document creation succeed. Use `hideAttachmentOptions={{ collaborativeDocument: true }}` on the Message Composer to remove it.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/0dx6VA7P_LZj2wr4/images/ed4f9ead-extension_collaborative_document_web_screens-b636764a036d286a66cf81bf43cadf19.png?fit=max&auto=format&n=0dx6VA7P_LZj2wr4&q=85&s=1dd1f38188b8d2c9620cf093340beadb" width="1282" height="802" data-path="images/ed4f9ead-extension_collaborative_document_web_screens-b636764a036d286a66cf81bf43cadf19.png" />
</Frame>

#### Collaborative Whiteboard

Real-time shared whiteboard for drawing and brainstorming. See [Collaborative Whiteboard Extension](/fundamentals/collaborative-whiteboard).

The Collaborative Whiteboard option is always present in the attachment menu of [Message Composer](/ui-kit/react/components/message-composer), regardless of whether the extension is activated — activation is what makes whiteboard creation succeed. Use `hideAttachmentOptions={{ collaborativeWhiteboard: true }}` on the Message Composer to remove it.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/CF1TPyQ0VsVo2G9g/images/6baee6d6-extension_whiteboard_web_screens-5ab03b904a0a2f6550d86c701c5fcda2.png?fit=max&auto=format&n=CF1TPyQ0VsVo2G9g&q=85&s=535b75057c4791d4615e5eed24c214f1" width="1282" height="802" data-path="images/6baee6d6-extension_whiteboard_web_screens-5ab03b904a0a2f6550d86c701c5fcda2.png" />
</Frame>

### Security

#### Disappearing Messages

Messages auto-delete after a specified interval. Works for 1:1 and group messages. See [Disappearing Messages Extension](/fundamentals/disappearing-messages).

### Customer Support

#### Chatwoot

Routes user messages to Chatwoot for customer support. See [Chatwoot Extension](/fundamentals/chatwoot).

#### Intercom

Integrates Intercom for in-app customer support. See [Intercom Extension](/fundamentals/intercom).

### Smart Chat Features

#### Conversation Starter

AI-generated opening messages for new chats. See [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter) and [AI Features](/ui-kit/react/ai-features).

#### Smart Replies

AI-generated response suggestions based on conversation context. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) and [AI Features](/ui-kit/react/ai-features).

#### Conversation Summary

AI-generated recap of long conversations. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) and [AI Features](/ui-kit/react/ai-features).

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Message Composer" icon="pen-to-square" href="/ui-kit/react/components/message-composer">
    Customize the composer where most extensions appear
  </Card>

  <Card title="Message List" icon="messages" href="/ui-kit/react/components/message-list">
    Customize the message list for extension-rendered content
  </Card>

  <Card title="Core Features" icon="comments" href="/ui-kit/react/core-features">
    Core chat features like messaging and reactions
  </Card>

  <Card title="AI Features" icon="robot" href="/ui-kit/react/ai-features">
    AI-powered chat capabilities
  </Card>
</CardGroup>