LangGraph / Features / Generative UI

Generative UI

Let your agent generate interactive React components on the fly.

Tool-Based Approach

Register a frontend tool with useFrontendTool and the agent calls it to render components.

useFrontendTool({ name: "render_chart", parameters: z.object({...}), handler: async ({ data }) => {...} });

Agentic Approach

For long-running tasks, the agent orchestrates multi-step workflows and renders progress UI.

Declarative (BYOC)

Use A2UI, Hashbrown, JSON Render, or other declarative renderers for schema-driven UI generation.

Tool-Based Generative UI● Live

PreviewCode

💬 Live demo iframe
Always visible alongside the docs

LangGraph / Features / Generative UI

Generative UI

Let your agent generate interactive React components on the fly.

▶ Try Live Demo

Tool-Based Approach

Register a frontend tool with useFrontendTool and the agent calls it to render components. The agent determines when to invoke the tool based on the user's request.

useFrontendTool({ name: "render_chart", parameters: z.object({ data: z.array(...), type: z.enum(["bar", "pie"]) }), handler: async ({ data, type }) => { return { rendered: true }; }, });

When the agent calls this tool, CopilotKit renders the component you defined. The user sees an interactive chart appear in the chat.

Agentic Approach

For long-running tasks, the agent orchestrates multi-step workflows and renders progress UI along the way.

▶ Try Agentic GenUI Demo

Declarative (BYOC)

Use A2UI, Hashbrown, JSON Render, or other declarative renderers for schema-driven UI generation. The agent sends a schema, your renderer turns it into components.

Tool-Based Generative UI PreviewCodeGuide

✕

💬 Live demo iframe
Slides in when you click "Try Demo"

LangGraph / Features / Generative UI

Generative UI

Let your agent generate interactive React components on the fly.

Tool-Based Approach

Register a frontend tool with useFrontendTool and the agent calls it to render components.

useFrontendTool({ name: "render_chart", parameters: z.object({ data: z.array(...) }), handler: async ({ data }) => { ... } });

Tool-Based Generative UI● Live ↗ Full Screen

💬 Live demo embedded in the doc flow
Try it right here, then keep reading

When the agent calls this tool, CopilotKit renders the component you defined. The user sees an interactive chart appear in the chat.

Agentic Approach

For long-running tasks, the agent orchestrates multi-step workflows and renders progress UI along the way.

Agentic Generative UI● Live ↗ Full Screen

⚡ Another live demo inline
Each feature section has its own demo

Declarative (BYOC)

Use A2UI, Hashbrown, JSON Render, or other declarative renderers. The agent sends a schema, your renderer turns it into components.

This approach gives you the most flexibility while keeping a structured contract between agent and UI.