Skip to content

renderToIR.mdx

Latest commit

 

History

History
58 lines (41 loc) · 2.46 KB

renderToIR.mdx

File metadata and controls

58 lines (41 loc) · 2.46 KB
Raw
title renderToIR
description Render bot JSX to the serializable BotNode IR that platform adapters translate to native payloads.

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

What to render: a JSX element (`BotNode`), an array of them, a plain `string`, or the `{ raw }` escape hatch (see Behavior).

Return Value

The flattened IR: every node has an intrinsic string `type` and serializable `props`. See [BotNode](/reference/bot/types/BotNode).

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