How it works
Four steps from your AI agent to interactive UI components.
Connect MCP to your AI agent
Pass the GenUI MCP server to your AI agent — works with LangChain, Vercel AI SDK, CrewAI, or any MCP-compatible framework.
AI Agent
LangChain / Vercel AI
MCP Server
Component Registry
Install the frontend package
Add the GenUI renderer package to your frontend. Available for React, Angular, Vue, Svelte, and more.
AI generates UI AST
Your AI agent uses the MCP tools to generate a compact UI AST — a tree of { type, props, children }. No framework code needed.
Renderer builds the UI
The AST is passed to the GenUI Renderer, which renders it as native interactive components inside your AI response.
Why GenUI?
Built for the era of AI-generated interfaces.
67% fewer tokens
The GenUI AST is purpose-built for LLM generation — compact, typed, and framework-agnostic. Less tokens means faster responses and lower costs.
3x faster rendering
No JSON parsing overhead. The runtime reconciles directly against the AST tree, generating minimal patches for each update.
Safe by default
No arbitrary code execution. Components are rendered through a controlled, validated pipeline — no eval, no injection.
Works everywhere
One AST renders natively in React, Vue, Angular, Svelte, React Native, Flutter, and SwiftUI. No adapter code to write.