Build agent-powered interfaces

Docs, live demos, and code for every major agent framework. Find your integration and start building.

⌕

📖 Quickstart

Get running in 5 minutes with any framework

🔌 By Framework

LangGraph, Mastra, CrewAI, and 23 more

🎯 Live Demos

Try features hands-on before you build

📊 Feature Matrix

Compare 46 features across all integrations

LangGraphMastraCrewAIPydanticAIGoogle ADKAWS StrandsClaude SDK+19 more

46 features 26 integrations 575 doc pages 9 live demos

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.

▶ Try Live Demo

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:

page.tsx

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 chartreturn{ 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 →

← Generative UI GuideTool-Based Generative UI● Live

PreviewCode Guide

💬

Live demo loads here via iframe

langgraph-python.onrender.com/demos/gen-ui-tool-based

← Back to Generative UI guide

Feature Matrix

46 features across 26 integrations. Click any checkmark to try the live demo.

Integration	Chat	Gen UI	HITL	State	Streaming	Sub-Agents	MCP	Voice
LangGraph (Python)
Agent Framework	✓	✓	✓	✓	✓	✓	—	—
Mastra
Agent Framework	○	○	○	—	—	—	—	—
Google ADK
Enterprise	○	○	○	—	—	—	—	—
CrewAI
Agent Framework	○	—	○	—	—	—	—	—

View Front Door Guide Page Demo ViewerMatrix