Open Generative UI
An open-source framework for building rich, interactive AI-generated UI with CopilotKit and LangChain Deep Agents.
Evidence shows: sandboxed iframes isolate generated UI, restricting localStorage/cookies and same-origin fetch, but no detailed least-privilege explanation; user confirmation mechanism not mentioned; data flow transparency partially described in README, but data retention or third-party sharing not specified; sensitive data handling not explicit; dependency security has CI and pinned dependencies, but no vulnerability scanning mentioned; external effects have sandbox restrictions, but network access control not explicit; rollback mechanism not mentioned; source attribution has MIT license and copyright, but publisher unverified. Deductions: lack of user confirmation, sensitive data policy, rollback mechanism, and explicit least-privilege.
Evidence shows: README and test files are consistent, tests cover key functionality, but no runtime reliability evidence; dependency availability has CI builds, but no availability guarantees; failure messages not explicit. Deductions: static review cannot verify runtime reliability, failure message documentation insufficient.
Evidence shows: README clearly defines target audience and scenarios, provides decision matrix; capability boundaries via skill files and prompt restrictions; trigger precision via prompts and tests; environment fit supports multiple models and deployment options. Deductions: no multi-environment configuration details.
Evidence shows: clear information architecture with architecture diagram and directory structure; detailed install instructions; naming stability not explicit; examples and FAQ in README and tests; known limitations documented for model requirements; license is MIT; versioning changelog missing; maintenance responsibility has CI and Slack notifications, but publisher unverified. Deductions: missing versioning changelog, naming stability not explicit.
Evidence shows: high output usability, generated UI directly usable; high marginal value, unique features; cost-benefit not quantified, but depends on multiple external services. Deductions: cost-benefit not quantified.
Evidence shows: README and test files traceable, but no external verification; cross-source corroboration limited; fact-inference separation not explicit. Deductions: static review cannot verify runtime behavior, external verification insufficient.
- Publisher identity unverified; assess supply chain risk carefully.
- Dependency security lacks vulnerability scanning; check dependencies for known vulnerabilities.
- User confirmation and sensitive data handling mechanisms absent; clarify before deployment.
- Versioning changelog missing; hard to track change history.
What does this agent do, and when should you use it?
Open Generative UI is an open-source showcase for building rich, interactive AI-generated UI. It leverages CopilotKit and LangChain Deep Agents to render algorithm visualizations, 3D animations, charts, and interactive widgets as live HTML/SVG inside a sandboxed iframe. The repository is a Turborepo monorepo with three packages: a Next.js frontend, a skills-based Deep Agent backend, and a standalone MCP server. The agent uses a skills architecture with SKILL.md files for on-demand loading of instructions, and generates UI via the `generateSandboxedUi` tool and OpenGenerativeUIMiddleware. The frontend streams updates using CopilotKit v2's `openGenerativeUI` and `renderActivityMessages`. It requires a high-capability model (e.g., Claude) and provides a full local development environment with make or pnpm commands.
The agent generates interactive UI components based on user prompts. It receives user requests, processes them via create_deep_agent from LangChain Deep Agents, which uses skills from SKILL.md files to decide the output type. When a visualization is needed, it calls the generateSandboxedUi tool (provided by the CopilotKit runtime), which accepts streaming parameters: initialHeight, placeholderMessages, css, html, jsFunctions, and jsExpressions. The OpenGenerativeUIMiddleware in the runtime translates these into open-generative-ui activity events that the frontend subscribes to. The frontend renders the HTML stream via renderActivityMessages, morphing updates into a preview iframe with Idiomorph, then boots the final websandbox iframe with shared design-system CSS and CDN importmap. Generated UI calls back into the host via Zod-validated sendPrompt and openLink sandbox functions, and auto-sizing is handled by a ResizeObserver.
- Educators who want to visualize algorithms (e.g., binary search, sorting) directly in a chat interface.
- Developers building AI assistants that need interactive data dashboards or charts.
- Product teams integrating 3D animations or complex data visualizations into web applications.
- Users who want to generate UI components in MCP-compatible clients like Claude Desktop or Claude Code.
- AI application developers needing to explore visual representations like flowcharts, diagrams, and network graphs.
- Technical professionals prototyping interactive UI widgets within a CopilotKit project.
What are this agent's strengths and limitations?
- Provides a full open-source framework for generating rich interactive UI, not just text responses.
- Modular architecture: frontend, agent, and MCP server are separate, allowing customization and extension.
- Skills-based design enables progressive disclosure, reducing token usage and improving focus.
- Supports a wide range of visualization types, including algorithms, 3D, charts, and interactive simulations.
- Includes automatic theming, responsive sizing, and progressive reveal animations out of the box.
- Well-documented commands and configurations for multiple environments (make, pnpm, Claude Desktop, Cursor).
- Requires high-capability models (like Claude) to reliably generate complex HTML/SVG; weaker models produce broken output.
- Dependence on CopilotKit and LangChain ecosystems, which may introduce learning curves and potential breaking changes.
- Agent is primarily tuned for Claude; switching model providers may require code and configuration changes (e.g., model.py).
- Local development requires running multiple services (frontend, agent, MCP) simultaneously, which may be resource-intensive.
- Generating UI relies on network access for CDN imports, which may not be suitable for constrained environments.
- Documented model names (e.g.,
claude-fable-5) may be fictional or future models; users may need to adjust actual model names.
How do you install or deploy this agent?
- Clone the repository and run
make setupto install dependencies and create a.envtemplate. - Edit
apps/agent/.envwith your Anthropic API key (and optionally setLLM_MODELorOPENAI_API_KEY). - Run
make devto start all services. Ensure Node.js and pnpm are installed.
How do you use this agent?
- After starting the dev servers, open
http://localhost:3000(app) andhttp://localhost:8123(agent API). - In the chat UI, send a request like 'Visualize binary search' or 'Create a pie chart'.
- The agent will generate an interactive HTML/SVG component rendered in a sandboxed iframe.
- To use the MCP server with Claude Desktop or Claude Code, follow the configuration in
apps/mcp/README.md, using stdio or HTTP (runpnpm devfor HTTP).
How does this agent compare with similar options?
This project explicitly differentiates from standard generative UI in CopilotKit, which uses useComponent for simple components, versus this full sandboxed HTML/SVG via generateSandboxedUi. It also contrasts with typical LangGraph agents by using LangChain Deep Agents for deeper planning and skills.
FAQ
What credentials are needed to run this project?
apps/agent/.env) as the default model is claude-fable-5. If you set a gpt-* model, you need an OpenAI API key. You can customize models, but it may require code changes in model.py.Can I deploy the generated UI to production?
What happens if I use a weaker model?
Can I use Claude Desktop or Claude Code as a frontend?
assemble_document tool to generate iframe-ready documents.Do I always need to run all services?
make dev). But you can start them individually with make dev-app, make dev-agent, or make dev-mcp if you only need specific parts.