State Rendering - Copilotkit

import { IntegrationGrid } from "@/components/content/integration-grid"; import { Callout } from "fumadocs-ui/components/callout";

What is this?

State rendering lets you build UI that reflects your agent's state in real-time. As your agent progresses through nodes and emits state updates, your frontend renders those changes — showing progress, drafts, or intermediate results.

<Callout type="info"> **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended). </Callout>

When should I use this?

Use state rendering when you want to:

Show real-time progress (e.g. "Researching... 2/5 complete")
Display drafts that update as the agent works
Build dashboards that reflect agent state
Render structured output outside of the chat

Choose your AI backend