CopilotKit

BYOC — JSON Render

Bring your own component library. Have the agent emit a JSON spec and let json-render render it against a Zod-validated catalog of React components.

"""Strands agent specialization for the byoc-json-render demo (Wave 2).Emits a single JSON object shaped like `@json-render/react`'s flat specformat (`{ root, elements }`). The frontend validates against aZod-validated catalog of MetricCard, BarChart, PieChart.This module defines the system prompt as the canonical source of truth.The prompt is mirrored on the frontend (via `useAgentContext`) so theshared Strands agent emits the right shape even without a per-demo Agentinstance on the backend."""BYOC_JSON_RENDER_SYSTEM_PROMPT = """\You are a sales-dashboard UI generator for a BYOC json-render demo.When the user asks for a UI, respond with **exactly one JSON object** andnothing else — no prose, no markdown fences, no leading explanation. Theobject must match this schema (the "flat element map" format consumed by@json-render/react):{  "root": "<id of the root element>",  "elements": {    "<id>": {      "type": "<component name>",      "props": { ... component-specific props ... },      "children": [ "<id>", ... ]    },    ...  }}Available components (use each name verbatim as "type"):- MetricCard  props: { "label": string, "value": string, "trend": string | null }- BarChart  props: {    "title": string,    "description": string | null,    "data": [ { "label": string, "value": number }, ... ]  }- PieChart  props: {    "title": string,    "description": string | null,    "data": [ { "label": string, "value": number }, ... ]  }Rules:1. Output only valid JSON. No markdown code fences. No text outside the   object.2. Every id referenced in root or any children array must be a key in   elements.3. For a multi-component dashboard, use a root MetricCard and list the   charts in its children array.4. Use realistic sales-domain values.5. Never invent component types outside the three listed above."""def build_byoc_json_render_agent():    """Build a dedicated Strands Agent for the byoc-json-render demo.    Mirrors build_byoc_hashbrown_agent() in sibling module. Not currently    wired into agent_server.py; the frontend injects this prompt via    useAgentContext so the shared agent produces the right output shape.    """    from strands import Agent    from strands.models.openai import OpenAIModel    import os    api_key = os.getenv("OPENAI_API_KEY", "")    if not api_key:        raise RuntimeError(            "OPENAI_API_KEY must be set for the byoc-json-render Strands agent"        )    model = OpenAIModel(        client_args={"api_key": api_key},        model_id="gpt-4o-mini",    )    return Agent(        model=model,        system_prompt=BYOC_JSON_RENDER_SYSTEM_PROMPT,        tools=[],    )

You have a chat surface and you want the agent to draw a dashboard from a typed JSON spec. By the end of this guide, the agent will emit a { root, elements } object, @json-render/react will validate it against a Zod-described catalog, and the user sees the dashboard render as a single React tree.

When to use this#

  • Structured UI with a typed contract where the agent's output is validated against a known schema before it touches the DOM.
  • Tolerance for prose preamble + code fences in the agent's output (json-render's parser handles them).
  • Cases where you already use json-render elsewhere or prefer Zod-validated catalogs.

If you'd rather have a streaming progressive render rather than a one-shot validated render, see the sibling page BYOC — Hashbrown for the same scenario with @hashbrownai/react.

Frontend#

The integration point is <CopilotChat>'s messageView.assistantMessage slot. Swap the default renderer for a json-render-backed one:

frontend/src/app/page.tsx
import {
  CopilotKit,
  CopilotChat,
  useConfigureSuggestions,
} from "@copilotkit/react-core/v2";
import { JsonRenderAssistantMessage } from "./json-render-renderer";

export default function ByocJsonRenderDemo() {
  useConfigureSuggestions({
    suggestions: [
      { title: "Sales dashboard", message: "Show me a sales dashboard." },
      { title: "Region breakdown", message: "Break down sales by region." },
    ],
    available: "always",
  });

  return (
    <CopilotKit runtimeUrl="/api/copilotkit-byoc-json-render" agent="byoc_json_render">
      <CopilotChat
        messageView={{ assistantMessage: JsonRenderAssistantMessage }}
      />
    </CopilotKit>
  );
}

The custom renderer parses the streaming assistant content (tolerating partial tokens, code fences, and prose preamble), validates each element against a Zod-typed catalog, and feeds the resulting spec into <Renderer />:

frontend/src/app/json-render-renderer.tsx
import { Renderer } from "@json-render/react";
import { catalog } from "./registry";

export function JsonRenderAssistantMessage({ message }: { message: AssistantMessage }) {
  const spec = parseSpec(message.content ?? "");
  if (!spec) return null;
  return <Renderer spec={spec} catalog={catalog} />;
}

function parseSpec(content: string) {
  const cleaned = stripCodeFencesAndPrelude(content);
  const partial = tolerantJsonParse(cleaned);
  return validateAgainstCatalog(partial);
}

The catalog lives next to the renderer and pairs each component with a Zod schema describing its props:

frontend/src/app/registry.tsx
import { z } from "zod";
import { MetricCard } from "./metric-card";
import { BarChart } from "./charts/bar-chart";
import { PieChart } from "./charts/pie-chart";

export const catalog = {
  MetricCard: {
    component: MetricCard,
    propsSchema: z.object({
      title: z.string(),
      value: z.number(),
      delta: z.number().optional(),
    }),
  },
  BarChart: {
    component: BarChart,
    propsSchema: z.object({
      data: z.array(z.object({ label: z.string(), value: z.number() })),
    }),
  },
  PieChart: {
    component: PieChart,
    propsSchema: z.object({
      data: z.array(z.object({ label: z.string(), value: z.number() })),
    }),
  },
};

Validation is the safety net: anything the agent emits that doesn't match a registered schema is rejected before it hits React, so the chat can't render arbitrary garbage.

Backend#

The agent emits a { root, elements } JSON object as the assistant message content. root references a top-level element id; elements maps each id to a { type, props, children } triple matching the catalog.

example agent output
{
  "root": "dashboard",
  "elements": {
    "dashboard": {
      "type": "Stack",
      "children": ["revenue-card", "by-region"]
    },
    "revenue-card": {
      "type": "MetricCard",
      "props": { "title": "Total revenue", "value": 184302 }
    },
    "by-region": {
      "type": "BarChart",
      "props": { "data": [...] }
    }
  }
}

Anything else (free-form text, code fences around the JSON, a "Here's your dashboard:" preamble) is stripped by the renderer's tolerant parser before validation. The agent doesn't need to be perfectly clean.

Comparing the two patterns#

Both byoc-json-render and byoc-hashbrown solve the same problem with two different rendering libraries. The agent contract is similar; the React glue, validation strategy, and rendering behaviour differ.

On this page

When to use thisFrontendBackendComparing the two patterns