renderToIR

Overview

renderToIR is the bridge from JSX to data: it recursively invokes component functions until only intrinsic string-typed nodes remain, producing the serializable BotNode[] IR an adapter translates into its native format. You rarely call it directly — thread.post renders for you — but it's the core primitive for testing components or building custom adapters.

Signature

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

function renderToIR(ui: Renderable): BotNode[];

Parameters

Return Value

Usage

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

function Greeting({ name }: { name: string }) {
  return (
    <Message>
      <Header>Hello {name}</Header>
    </Message>
  );
}

const ir = renderToIR(<Greeting name="Ada" />);
// [{ type: "message", props: { children: [{ type: "header", props: { … } }] } }]

Behavior

• Component functions are invoked with their props until the tree is intrinsic-only; Fragment flattens its children.
• Strings and numbers in children become { type: "text", props: { value } }; false / null / undefined render nothing (so {cond && <Section>…</Section>} works).
• { raw } short-circuits: renderToIR({ raw: payload }) passes through as { type: "raw", props: { value: payload } }, for handing an adapter a native payload (e.g. hand-built Block Kit) directly.
• Purity is required — components must be pure functions of serializable props: same props in, same tree out. This is what makes content-stable action binding and cold-path re-render rehydration possible (see ActionStore).

Related

• BotNode — the IR shape
• Message — the component vocabulary
• ActionStore — why purity matters