Awesome Generative UI

A curated list of resources for AI-generated user interfaces — systems where LLMs dynamically create, compose, and render UI components.

Generative UI represents a paradigm shift from "AI assists coding" to "AI generates interfaces directly." Instead of writing components, you describe what you need and the AI produces a working UI.

Contents

• What is Generative UI
• Key Concepts
• Research
• Benchmarks & Datasets
• Specifications & Protocols
• Frameworks & SDKs
• Tools & Platforms
• Security & Sandboxing
• Evaluation & Testing
• Schemas & Patterns
• Component Libraries
• Examples & Demos
• Articles & Talks
• Related Concepts

---

What is Generative UI

Generative UI is the practice of using AI models (typically LLMs) to dynamically generate user interface components at runtime, rather than having developers hand-code every interface.

The Spectrum

Why It Matters

Generative UI enables personalization at scale, rapid prototyping, and natural language interfaces (e.g., "Show me sales by region" produces an actual chart), while reducing development time by shifting effort from implementation details to intent.

Challenges

Challenges include Consistency (generated UIs may look different each time), Performance (generation takes time; streaming helps), Safety (arbitrary code generation has security implications), and Hallucination (AI might generate components that don't exist).

---

Key Concepts

Component Registry

A predefined set of UI components the AI can use. Instead of generating arbitrary HTML/CSS, the AI selects from known, tested components.

Registry: [BarChart, LineChart, DataTable, KPICard]
Prompt: "Show monthly revenue"
Output: { component: "BarChart", props: { data: [...] } }

Query Registry

A predefined set of data sources the AI can query. Prevents hallucinated API calls.

Registry: [getUsers, getRevenue, getOrders]
Prompt: "Show top customers"
Output: { query: "getUsers", params: { sort: "revenue", limit: 10 } }

Streaming UI

Rendering UI components as they're generated, rather than waiting for complete output.

Server Components

React Server Components enable streaming UI from server to client, making generative UI more practical.

Structured Output

Using JSON schemas or function calling to ensure AI outputs valid, parseable UI descriptions.

Constrained vs Unconstrained Generation

A fundamental design decision in generative UI systems:

Constrained systems are safer and more consistent — the AI can only use pre-approved components with known behavior. Trade-off: less flexible, requires component development upfront.

Unconstrained systems are more powerful — the AI can create anything. Trade-off: needs sandboxing (iframe, E2B), potential for inconsistency, and security considerations.

Google's research (see below) suggests unconstrained generation may become the dominant approach as models improve. They found users preferred AI-generated HTML/CSS over markdown 83% of the time, calling it an "emergent capability" — models produce good UIs without UI-specific training.

In practice, the 2025–2026 wave of production systems has leaned the other way. AG-UI, Google's own A2UI spec, the MCP Apps extension, and SDKs like Crayon and assistant-ui all standardize on constrained / declarative output — agents emit allow-listed components rather than raw code — for safety and consistency. Both ends of the spectrum are advancing in parallel rather than one cleanly winning.

---

Research

Papers

• Generative UI: LLMs are Effective UI Generators - Google (2025). Foundational paper making the case for unconstrained UI generation. Key findings: (1) Users preferred AI-generated HTML/CSS/JS over markdown 83% of the time, (2) UI generation is an "emergent capability" requiring no UI-specific training, (3) Vision of "infinite ephemeral interfaces" - every query gets a custom UI. (Project page).
• WebArena: A Realistic Web Environment for Building Autonomous Agents - CMU (2023). Framework for evaluating web agents, relevant to UI generation and interaction.
• Pix2Struct: Screenshot Parsing as Pretraining for Visual Language Understanding - Google (2023). Vision-language model pretrained on web screenshots. Foundation for screenshot-to-code approaches.

Note: Generative UI is an emerging field. Much knowledge lives in blog posts, SDKs, and industry practice rather than academic papers.

---

Benchmarks & Datasets

Benchmarks for evaluating UI generation and datasets that enable screenshot-to-code, layout understanding, and web-agent interaction.

• Design2Code - Benchmark for converting designs/screenshots into front-end code (Stanford/Google, 2024).
• StructEval - Benchmark for LLM generation and conversion across 18 structured formats, including rendered HTML, React, and SVG (TIGER-AI-Lab, TMLR 2025).
• WebArena - Realistic web environment and benchmark for agents interacting with live websites.
• VisualWebArena - Vision-grounded WebArena variant for UI understanding and interaction.
• Mind2Web - Dataset and benchmark for generalist web agents grounded in real webpages.
• MiniWoB++ - Standard suite of web UI interaction tasks used for agent evaluation.
• RICO - Large-scale dataset of mobile app UIs (screens + view hierarchies).
• pix2code - Early reference paper on UI screenshot-to-code generation (Tony Beltramelli, 2017).

---

Specifications & Protocols

Open Specifications

• Model Context Protocol (MCP) - Anthropic. Protocol for connecting AI models to external data sources and tools.
• Model Context Protocol (MCP) Servers - Reference implementations of MCP servers and tooling.
• MCP Apps (UI Extension) - The official MCP extension for interactive UI: tools return UI resources that render in an iframe inside the host client. Builds on mcp-ui and the OpenAI Apps SDK (announcement).
• OpenAI Apps SDK - OpenAI. Build apps that render interactive React UI inline in ChatGPT; extends MCP with a UI layer via the MCP Apps bridge.
• mcp-ui - Ido Salomon and Liad Yosef. Community SDK (TypeScript, Ruby, Python) for serving interactive UI over MCP; pioneered the pattern that fed the official MCP Apps spec.

Agent-to-UI Protocols

Protocols that connect agent backends to front ends and describe the UI that agents emit.

• AG-UI (Agent-User Interaction Protocol) - CopilotKit. Open, event-based protocol that streams agent activity and shared state to front ends over SSE. Adopted by Google, LangChain, AWS, Microsoft, Mastra, and PydanticAI.
• A2UI - Google. Declarative, streaming (JSONL) generative-UI spec: agents request allow-listed components that the client renders natively (Flutter, Angular, Lit). A data format, not executable code (site).

How the Layers Fit Together

These specs are largely complementary rather than competing — they standardize different layers of the same stack:

---

Frameworks & SDKs

Generative UI Frameworks

Purpose-built for streaming AI-generated interfaces:

• Vercel AI SDK - Vercel. TypeScript toolkit with streamUI() for server-streamed components and multi-provider support; v5 adds React/Vue/Svelte parity and SSE-based streaming.
• Tambo - Generative UI SDK for React, purpose-built for streaming AI-generated components.
• Hashbrown - Framework for building generative user interfaces in Angular and React.
• Cuttlekit - Fully generative UI framework, framework agnostic, optimised for performance and real-time UI generation.
• mdocUI - Streaming generative UI using Markdoc {% %} tag syntax. Framework-agnostic core with React renderer, 24 theme-neutral components, and Zod schema validation.
• CopilotKit - Full-stack framework for in-app agents and generative UI across React, Angular, mobile, and Slack; makers of the AG-UI protocol.
• assistant-ui - TypeScript/React primitives for AI chat with a first-class generative-UI primitive that renders agent-described components from a consumer-provided allowlist.
• Thesys C1 - Thesys. OpenAI-compatible API that returns rendered UI instead of text, paired with the MIT-licensed Crayon React toolkit (built on Radix and shadcn/ui patterns).
• OpenUI Lang (Thesys) - MIT-licensed, streaming-first DSL and React runtime for model-generated UI; a compact, token-efficient alternative to emitting component JSON.

Supporting Libraries

Building blocks for reliable generation:

• Instructor - Structured output extraction; useful with UI schemas for reliable generation.
• Mitosis - Builder.io. Write components once and compile to React/Vue/Svelte/etc.

---

Tools & Platforms

Component Generators

"Describe a component, get code."

• v0.dev - Vercel (commercial). Generate React/Tailwind components from prompts; known for shadcn/ui integration.
• OpenUI (Weights & Biases) - Describe UI in natural language and see it rendered live.
• openv0 - Open source v0 clone that generates React/Tailwind components from prompts.

App Builders

"Describe an app, get a deployable project."

• Bolt.new - StackBlitz (commercial). Generate full-stack applications in-browser with live preview.
• Lovable - Generate and deploy web apps from descriptions (commercial).
• Cofounder - Open source full-stack app generator with generative UI, databases, and APIs.

Design-to-Code

"Convert visuals to working code."

• Screenshot-to-Code - Convert screenshots or designs to HTML/React/Vue code.
• tldraw make-real - Turn a wireframe into a working React component.
• Galileo AI - Generate editable UI designs from text descriptions (commercial, Figma-compatible).
• Google Stitch - Google Labs. Generates web and mobile UI designs plus front-end code from prompts, screenshots, or sketches.
• Figma Make - Figma. Prompt-to-UI inside Figma that builds working interfaces using your existing components and design system.
• Magic Patterns - Generate and iterate on React UI from prompts; can learn and apply an existing design system.
• Subframe - AI design tool built for code: compose production-ready React/Tailwind components on a canvas and export clean code.

MCP Tools for UI

"Model Context Protocol servers that improve AI UI generation."

• Figma-Context-MCP - GLips. Provides Figma layout information to AI coding agents.
• 21st.dev Magic MCP - 21st.dev. Generate UI components from prompts with design-system awareness.
• shadcn-ui-mcp-server - Jpisnice. Helps LLMs understand shadcn/ui component structure.
• MUI MCP - MUI. MCP server for MUI docs and code examples, published as @mui/mcp (npm).
• Storybook MCP - Storybook. MCP server and addon that exposes component information and workflows from your local Storybook (npm).
• Cursor Talk to Figma MCP - Grab. MCP server + Figma plugin for reading and modifying Figma designs.
• Playwright MCP - Microsoft. MCP server for browser automation and UI regression testing workflows.
• shadcn-vue-mcp - HelloGGX. MCP server for shadcn-vue component knowledge.

AI Products with UI Generation

"Chat interfaces that can generate UIs."

• Claude - Anthropic (commercial). Artifacts generates interactive React/HTML UIs in chat.
• ChatGPT - OpenAI (commercial). Canvas supports UI generation and editing.

---

Security & Sandboxing

When UIs (or UI code) are model-generated, treat outputs as untrusted. These resources cover browser sandboxing, sanitization, and LLM-app security pitfalls.

• OWASP Top 10 for LLM Applications - OWASP. Threat model checklist for LLM apps (prompt injection, insecure tool use, data leakage).
• OWASP Prompt Injection Prevention Cheat Sheet - OWASP. Practical mitigations for prompt/tool injection in production systems.
• Content Security Policy (CSP) - MDN. Core browser control for limiting script execution and exfiltration.
• iframe sandbox - MDN. Reference for sandboxed iframes to contain untrusted HTML/JS UI previews.
• Trusted Types - Mitigation against DOM XSS when inserting generated HTML into the DOM.
• DOMPurify - Widely used HTML sanitizer for untrusted/generated markup.
• Sandpack - CodeSandbox. In-browser code sandboxing patterns for safe previews.
• E2B - Sandboxed code execution environments for running untrusted generated code.

---

Evaluation & Testing

Tools and practices for regression testing generated UIs, validating structured outputs, and red-teaming LLM apps.

• Playwright - Microsoft. E2E testing and screenshot diffs for UI regression testing.
• Storybook Test Runner - Storybook. Automates component-level interaction testing.
• promptfoo - Prompt and tool-call regression testing across models.
• PyRIT - Microsoft. Red teaming toolkit for LLM apps (jailbreaks, prompt injection).
• garak - NVIDIA. LLM vulnerability scanner for automated probing.

---

Schemas & Patterns

Make model outputs reliable: constrain generation, validate payloads, and standardize tool/component contracts.

• JSON Schema - Standard for validating structured model outputs.
• OpenAPI Specification - OpenAPI Initiative. Standard contract format for APIs and tool catalogs.
• Zod - Colin Hacks. TypeScript schema validation for enforcing output shapes at runtime.
• Outlines - Structured generation with JSON/grammar constraints.
• Guidance - Grammar- and constraint-oriented prompting for structured outputs.
• Vercel AI SDK - Vercel. Streaming UI and tool-calling patterns for generative UI applications.
• shadcn/ui Registry - Component registry pattern commonly targeted by UI generators.

---

Component Libraries

Generation Targets

Libraries that AI generators commonly output to:

• shadcn/ui - Copy-paste components that many generators target.
• Radix UI - Radix. Unstyled primitives that shadcn/ui builds on.
• Tremor - Dashboard components often used for generated data UIs.
• React Native Paper - Material Design components for React Native.

For Building AI/Chat Interfaces

Components designed for LLM-powered apps:

• AI Elements - Vercel. 20+ shadcn/ui-based React components for AI interfaces (message threads, reasoning panels, tool output), integrated with the AI SDK.
• LangUI - LangbaseInc. Tailwind components for chat, AI assistants, and LLM projects.
• GPT-Vis - AntV. Visualization components designed for LLM-generated outputs.
• Markstream - Multi-framework streaming Markdown components for AI chat, with Mermaid, KaTeX, code highlighting, safe HTML, and SSR support.

Visualization

For AI-generated charts and data displays:

• Recharts - Composable React charts commonly used in dashboards.
• Vega-Lite - Vega. Declarative JSON grammar for charts and visualizations.
• Observable Plot - Observable. Grammar of graphics for JS with concise specs.
• D3.js - D3. Low-level but powerful library for custom visualizations.

---

Examples & Demos

Open Source

• ai-chatbot - Vercel. Full-featured chatbot with generative UI using the AI SDK.
• morphic - AI-powered search engine with generative answer UI.
• langgraphjs-gen-ui-examples - LangChain. Collection of generative UI agents built with LangGraph.js.
• gen-ui - Reference implementation for generative UI with LangChain.js, AI SDK, and Next.js.
• termite - Terminal-based generative UI.

---

Articles & Talks

• Vercel: Introducing AI SDK 3.0 with Generative UI - Vercel blog post introducing Generative UI features in the AI SDK.
• Building effective agents - Anthropic engineering post on agent design patterns relevant to tool-using UI systems.
• Introducing A2UI: An open project for agent-driven interfaces - Google Developers blog introducing the A2UI declarative generative-UI spec.
• AG-UI Protocol: Bridging Agents to Any Front End - CopilotKit post explaining the agent-to-frontend interaction protocol.

---

Related Concepts

Adjacent Fields

Design-to-code converts designs (e.g., Figma) to code. Code generation is the broader field of AI-generated code. Conversational UI covers chat interfaces (related but distinct). Low-code/no-code includes visual builders that generative UI can automate.

• LangChain.js - LangChain. LLM framework often used to build tool-using agents that can drive generative UI.
• Mastra - TypeScript framework for AI applications with patterns adaptable to generative UI.

Evaluation tooling (adjacent)

• OpenAI Evals - OpenAI. Framework for evaluating model outputs with custom tasks and graders.
• TruLens - TruEra. Evaluation and feedback tooling for LLM applications.
• LangSmith Evaluation - LangChain. Evaluation patterns and workflows for LLM apps.

Standards & Formats

JSON Schema defines valid UI structures. OpenAPI describes APIs for query registries. Web Components are a framework-agnostic component standard.

---

Contributing

Contributions welcome! Please read the contribution guidelines first.

Criteria for Inclusion

Submissions should be relevant to generative UI (not general AI/LLM), high quality (well-documented and maintained or historically significant), and accessible (open source, free tier, or detailed documentation).

What We're Looking For

New frameworks and tools, research papers and articles, interesting examples and demos, and corrections/updates.

---

License: CC BY 4.0 (see LICENSE).