> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-card-builder.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Card Messages

> Let your agent reply with rich, interactive cards — designed in Card Builder — instead of plain text.

The **Card Messages** tool lets your agent reply with flexible, interactive cards — buttons, images, progress bars, layouts — instead of plain text. You design each card once in [Card Builder](/card-builder/overview) so it always renders uniformly, then tell the agent when to send it.

## Enable the Card Messages tool

1. Open your agent and go to **Tools**.
2. Find **Card Messages** (a built-in system tool) and toggle it **on**.
3. A **Design interactive cards with Card Builder** prompt appears — click **Open Card Builder** to start designing.

## How it works

Card Messages is a built-in **system tool**. When you enable it, the agent can call the tool to fetch a **card reference — working examples plus a field reference** (describing the structure documented in the [Card JSON Schema](/card-builder/schema)) — and then generate a conforming card in its reply.

That means the agent *can* compose cards freely — but free-form generation drifts in layout and styling from one reply to the next. To keep every card consistent, **design it once in Card Builder and give the agent the exported JSON** to reuse, as shown below.

<Note>
  You supply **what** card to send — the **how** is automatic. Enabling the tool also teaches the agent the format CometChat uses to recognize a card in its reply, so cards render with no extra work. This holds even when you paste a predefined card into the Instructions: keep the tool **on** — that's what supplies the format. With the tool off, pasted card JSON won't render as a card.
</Note>

<Note>
  A reply is delivered as an ordered sequence of **elements** — plain-text segments and at most **one card**. So an agent can send a card on its own, or with text before and/or after it, in a single reply. To present multiple sections *inside* the card, use layout elements (`row`, `column`, `grid`, `tabs`, `accordion`) rather than sending a second card.
</Note>

## Design a card and add it to your agent

Once the tool is on, the workflow is:

1. **Design your card** visually in [Card Builder](/card-builder/overview) — see [Building an Order Status Card](/card-builder/example-order-status) for a full walkthrough.
2. Use **Export → Copy Card JSON** to copy the finished card.
3. Add the JSON to the agent's **[Instructions](/ai-agents/agent-builder/instructions)** and specify **when** to send it.

<Note>
  A fixed card renders exactly as designed. If it includes `{{placeholder}}` variables, instruct the agent to fill them in before sending.
</Note>

<Tip>
  With several card types, you can return the card JSON from a **[Custom API Tool](/ai-agents/agent-builder/tools/overview)** instead of pasting it into the instructions — keeping the agent's instructions concise and focused.
</Tip>

## Design cards in Card Builder

Card Builder is the visual editor where you compose and save your cards.

<CardGroup>
  <Card title="Open Card Builder" icon="window-restore" href="/card-builder/overview">
    Learn the editor — palette, canvas, elements, actions, and variables.
  </Card>

  <Card title="Worked example" icon="list-check" href="/card-builder/example-order-status">
    Build an interactive Order Status card from scratch, step by step.
  </Card>

  <Card title="Card JSON Schema" icon="code" href="/card-builder/schema">
    The complete schema a card's JSON must conform to.
  </Card>
</CardGroup>