ContextQMD
Back to Copilotkit

Bots

showcase/shell-docs/src/content/reference/bot/index.mdx

1.60.13.2 KB
Original Source

The bot stack turns any AG-UI agent into a chat-platform bot. Three packages, three jobs:

PackageRole
@copilotkit/botThe platform-agnostic engine: createBot, handler registration, the agent run/tool/interrupt loop, and action binding. Re-exports the @copilotkit/bot-ui vocabulary.
@copilotkit/bot-uiA pure JSX runtime + cross-platform component vocabulary for rich messages — no React.
@copilotkit/bot-slackThe Slack adapter: Socket Mode ingress, JSX → Block Kit via slack(), chat.update streaming.
sh
pnpm add @copilotkit/bot @copilotkit/bot-ui @copilotkit/bot-slack
<Callout type="info"> New to the stack? Start with the [Slack quickstart](/slack) — zero to a working bot, then come back here for the API surface. </Callout>

Setup

The packages ship as ES modules only ("type": "module" required). To author messages as JSX, point the TypeScript JSX factory at @copilotkit/bot-ui and write .tsx files:

json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@copilotkit/bot-ui"
  }
}

The package ships its own JSX namespace via @copilotkit/bot-ui/jsx-runtime, so JSX is statically type-checked: unknown attributes, wrong prop values, and bad children are compile-time errors.

Start here

<Cards> <Card title="createBot()" description="Create the bot: adapters, agent, tools, context, commands, and the handler surface." href="/reference/bot/functions/createBot" icon={<LinkIcon />} /> <Card title="Thread" description="The per-conversation handle: post, stream, runAgent, awaitChoice, and capability-gated platform methods." href="/reference/bot/classes/Thread" icon={<LinkIcon />} /> <Card title="Components" description="The JSX vocabulary for rich messages: Message, Header, Section, Button, Select, Table, and friends." href="/reference/bot/components/Message" icon={<LinkIcon />} /> <Card title="slack()" description="The Slack adapter: options, Block Kit budgets, streaming, and mrkdwn translation." href="/reference/bot/slack" icon={<LinkIcon />} /> </Cards>

How the pieces fit

A turn flows through three stages. The adapter normalizes a platform event into a turn and hands it to your handler, which calls thread.runAgent(). The engine drives the run loop — streaming text into the thread, executing tools when the agent calls them, capturing interrupts. Anything you post is JSX lowered to the BotNode intermediate representation (plain serializable data), which the adapter translates to the platform's native format — with interactive handlers bound through the ActionStore.