Posting JSX as images

How it's routed#

thread.post expands component functions once per operation and classifies their output:

• Channel components such as <Message>, <Header>, and <Button> stay native, including when wrapped in your own component or a React fragment.
• Host markup such as <div>, <span>, and <svg> becomes a PNG through Takumi.
• To combine a snapshot with native text or buttons, put the snapshot inside <Render>.

/** @jsxImportSource @copilotkit/channels-ui */
import { Message, Header, Section } from "@copilotkit/channels-ui";

await thread.post(
  <Message>
    <Header>Deploy complete</Header>
    <Section>Shipped v2.4.0 to production.</Section>
  </Message>,
);

await thread.post(
  <div style={{ display: "flex", padding: 32, backgroundColor: "white" }}>
    <span style={{ fontSize: 48, color: "black" }}>MRR: $48,200</span>
  </div>,
  { altText: "Monthly recurring revenue is $48,200" },
);

Use pure presentational components. Top-level component functions are expanded outside React's hook dispatcher, so hooks, browser APIs, and effects are unsupported. A reused native element renders again on each post or update; its output is not cached.

Configure the renderer, fonts, and styling once#

Takumi is a static, browser-free rasterizer with no system fonts, only a built-in Latin (Geist) fallback. Register the renderer, your fonts, and your compiled CSS once on createChannel({ render }), and every image post picks them up:

import { createChannel } from "@copilotkit/channels";
import { takumiRenderer } from "@copilotkit/channels/takumi";
import { readFileSync } from "node:fs";

const bot = createChannel({
  name: "support", // managed channel configured in Intelligence
  agent: (threadId) => /* ... */,
  render: {
    renderer: takumiRenderer, // required to post images
    fonts: [
      { name: "Inter", data: readFileSync("./fonts/Inter-Regular.woff2"), weight: 400 },
      { name: "Inter", data: readFileSync("./fonts/Inter-SemiBold.woff2"), weight: 600 },
    ],
    stylesheets: [readFileSync("./styles/global.css", "utf8")], // compiled Tailwind
    width: 720, // default canvas width; height defaults to 480
  },
});

stylesheets takes your compiled CSS as plain strings; class selectors, var(), and @media resolve. This example loads it with node:fs so it runs as-is under Node or tsx. If your build already emits the CSS as an importable string (Vite's ?inline suffix, say), that is a bundler-only variant and will not run under plain tsx/node:

import appCss from "./styles/global.css?inline"; // compiled Tailwind, resolved by the bundler

// ...same createChannel call as above, with stylesheets: [appCss]

Control what the renderer may fetch#

Remote resource fetching is disabled by default. This includes remote images, CSS resources, and emoji sheets referenced by a snapshot. A blocked resource fails the entire snapshot with a URL-policy error. Plain text, inline markup, and configured font bytes can render without network access, but Takumi normally renders emoji through remote images: text such as Success 🎉 also needs the emoji source to be explicitly allowed. Use text without emoji for an offline snapshot.

To include remote resources, opt in to an origin you control with allowImageUrl. This setting applies to server-side snapshot rendering; it does not restrict native <Image url> messages rendered by Slack or Teams.

const bot = createChannel({
  // ...
  render: {
    // Allow resources only from a trusted CDN.
    allowImageUrl: (url) => new URL(url).origin === "https://cdn.example.com",
  },
});

Override per post#

Canvas dimensions, fonts, and stylesheets can be overridden for a single post, handy for a wider dashboard, a taller card, or an extra font just for that message:

await thread.post(<WideDashboard data={rows} />, { width: 1200 });
await thread.post(<CjkReport data={rows} />, { fonts: [notoSansJP] });
await thread.post(<MrrCard value="$48,200" delta={12} />, {
  filename: "mrr.png",
  title: "MRR",
  altText: "Monthly recurring revenue card",
});

filename, title, and altText are upload metadata passed straight through to postFile. They do not affect rendering.

Author cards with plain JSX#

Write host tags (<div>, <span>, <svg>) and app or chart components (<Sparkline/>, <BarChart/>, your own components) as plain JSX. No createElement needed. The channels JSX runtime compiles the whole tree to nodes, and the image renderer materializes it back to React for Takumi.

A component nested inside a host card is resolved for you, so you can compose freely:

function Kpi({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex flex-col gap-1.5 p-4 bg-card border rounded-xl">
      <span className="text-sm text-muted-foreground">{label}</span>
      <span className="text-3xl font-bold">{value}</span>
    </div>
  );
}

await thread.post(
  <div className="flex gap-3 p-6 bg-background">
    <Kpi label="Stars" value="22.4k" />
    <Kpi label="Downloads" value="118k" />
  </div>,
);

Know the limits#

Takumi is a static SSR rasterizer. It calls your components with server-render semantics, not a real browser. Keep this in mind:

• No runtime-JS chart or diagram libraries. Recharts, Chart.js, and Mermaid measure or paint the live DOM (useEffect, canvas, layout measurement), and none of that runs under Takumi. Use your own pure presentational markup instead.
• update() and postEphemeral() do not accept arbitrary JSX. An uploaded image cannot be edited in place, so both reject host image markup; React wrappers that return native channel components remain supported. Post a new image instead.
• Snapshots inside native messages support post() and update(). Use <Render> for this form. postEphemeral() rejects <Render> snapshots rather than silently dropping them.
• Managed image uploads do not return an addressable message reference. A successful image post currently returns { id: "" } and warns once. Do not pass this reference to update(), delete(), or react(). Native messages, including messages containing <Render>, keep their normal references.
• The canvas has a fixed size. It defaults to 720 by 480. Pass width/height globally via render, or per post, for anything else.