# Generative UI

Render your agent's behavior with custom UI components.

![Demo of Generative UI showing a meeting scheduling agent](https://docs.copilotkit.aihttps://cdn.copilotkit.ai/docs/copilotkit/images/coagents/AgenticGenerativeUI.gif)

This example shows our [Research Canvas](https://docs.copilotkit.ai/coagents/videos/research-canvas) making use of Generative UI!

## [What is Generative UI?](https://docs.copilotkit.ai/coagents/generative-ui\#what-is-generative-ui)

Generative UI lets you render your agent's state, progress, outputs, and tool calls with custom UI components in real-time. It bridges the gap between AI
agents and user interfaces. As your agent processes information and makes decisions, you can render custom UI components that:

- Show loading states and progress indicators
- Display structured data in tables, cards, or charts
- Create interactive elements for user input
- Animate transitions between different states

## [How can I use this?](https://docs.copilotkit.ai/coagents/generative-ui\#how-can-i-use-this)

There are two main variants of Generative UI.

[Agentic\\
\\
Render your agent's state, progress, and outputs with custom UI components.](https://docs.copilotkit.ai/coagents/generative-ui/agentic)

[Tool-based\\
\\
Render your agent's tool calls with custom UI components.](https://docs.copilotkit.ai/coagents/generative-ui/tool-based)

[Previous\\
\\
Chat with an Agent](https://docs.copilotkit.ai/coagents/agentic-chat-ui) [Next\\
\\
Agentic Generative UI](https://docs.copilotkit.ai/coagents/generative-ui/agentic)

### On this page

[What is Generative UI?](https://docs.copilotkit.ai/coagents/generative-ui#what-is-generative-ui) [How can I use this?](https://docs.copilotkit.ai/coagents/generative-ui#how-can-i-use-this)

[Edit on GitHub](https://github.com/CopilotKit/CopilotKit/blob/main/docs/content/docs/coagents/generative-ui/index.mdx)

![](https://static.scarf.sh/a.png?x-pxid=ffc9f65d-0186-4575-b065-61d62ea9d7d3)

## CopilotKit Quickstart Guide
CrewAI CrewAI support is here! Checkout the [Crew](https://docs.copilotkit.ai/crewai-crews) and [Flow](https://docs.copilotkit.ai/crewai-flows) documentation.

Search docs

`⌘`  `K`

On this pageInstall CopilotKit