Generative UI

Let your agent generate interactive React components on the fly. Tool-based, controlled, or fully agent-driven — choose the pattern that fits your use case.

Overview

Generative UI allows your agent to render custom React components in the chat. Instead of plain text responses, the agent can produce interactive charts, forms, cards, and any component you define.

There are three approaches, each suited to different use cases:

import { useFrontendTool } from "@copilotkit/react-core/v2";
import { z } from "zod";

useFrontendTool({
  name: "render_chart",
  description: "Render a data visualization",
  parameters: z.object({
    data: z.array(z.object({ label: z.string(), value: z.number() })),
    type: z.enum(["bar", "pie", "line"]),
  }),
  handler: async ({ data, type }) => {
    // The agent calls this tool and the UI renders the chart
    return { rendered: true };
  },
});

Approaches

Tool-Based Generative UI — The agent calls a frontend tool that renders a component. Best for structured, predictable UI patterns like charts and forms. Try the demo →

Agentic Generative UI — The agent orchestrates long-running tasks and renders progress UI. Best for multi-step workflows. Try the demo →

Open Generative UI — The agent generates arbitrary HTML/components. Maximum flexibility, less control.

API Reference

Key hooks: useFrontendTool, useRenderTool, useComponent. See full reference →