Message.mdx

title	Message
description	Root container for a single posted bot message, with an optional accent color rail.

Overview

Message is the root container for one posted message. Every card you post with thread.post starts with a Message wrapping the blocks that make it up — headers, sections, fields, action rows.

Import

import { Message } from "@copilotkit/bot-ui";

Props

Accent color (hex, e.g. `"#27AE60"`) for the message's colored rail. On Slack, Block Kit has no native accent, so an accented message is posted as an attachment with a colored left bar (`attachments: [{ color, blocks }]`). The message's blocks: [`Header`](/reference/bot/components/Header), [`Section`](/reference/bot/components/Section), [`Fields`](/reference/bot/components/Fields), [`Context`](/reference/bot/components/Context), [`Actions`](/reference/bot/components/Actions), [`Image`](/reference/bot/components/Image), [`Divider`](/reference/bot/components/Divider), [`Table`](/reference/bot/components/Table).

Usage

import { Message, Header, Section, Context } from "@copilotkit/bot-ui";

function IssueCard({ id, title }: { id: string; title: string }) {
  return (
    <Message accent="#5865F2">
      <Header>{id}</Header>
      <Section>{title}</Section>
      <Context>Updated just now</Context>
    </Message>
  );
}

On Slack

Renders as the message's blocks array — capped at 50 blocks per message (SLACK_LIMITS.blocksPerMessage); the renderer clamps overflow instead of failing. With accent, the blocks move into a colored attachment.

Related

• Thread.post — posting a rendered message
• renderToIR — how JSX becomes the BotNode IR
• renderBlockKit — Block Kit translation and budgets