narrowin/awesome-generative-ui

narrowin/awesome-generative-ui has 151 GitHub stars and 24 forks. Star changes are not measured yet. Last checked 2026-11-11 03:23 UTC. Last push 2026-10-26.

How these counts are measured

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

151 stars 24 forks

Measured star growth

in 24h: Update delayed
in 7 days: Collecting history
in 15 days: Collecting history
in 1 month: Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

README.md

Original

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.

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

Dimension	Traditional UI	AI-Assisted UI	Generative UI
Primary workflow	Developers hand-code components	Copilot helps developers write code	Model generates UI components from intent
Developer involvement	High (author everything)	High (developer in the loop)	Lower per UI (developer sets constraints)
Runtime behavior	Static UI	Static UI (generation happens in dev)	Dynamic / runtime-generated UI
Typical output	Source code	Source code	Components, schemas, or rendered UI
Best for	Predictability, control	Faster delivery with human oversight	Personalization and rapid UI composition

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).

How the Field Evolved

2023–2024: framework-bound streaming. Vercel's AI SDK 3.0 popularized the term with streamUI(): a model calls a tool, the server streams back a React Server Component. Powerful, but tied to one framework and one vendor's runtime.

2024–2025: prompt-to-app products. v0, Bolt.new, Lovable, and Google Stitch made "describe it, get a UI" a product category, while Google's research argued that models can generate full HTML/CSS/JS at runtime without UI-specific training.

Late 2025–mid 2026: standardization into layers. The stack split into interoperable specs: AG-UI for streaming agent events, A2UI and OpenUI Lang for describing UI, and MCP Apps (plus OpenAI's Apps SDK) as the shared surface for rendering UI inside chat hosts. Production systems mostly settled on constrained, allow-listed components.

Late 2026: consolidation. SDKs are moving from React-first to first-class Vue, Svelte, and Angular support, specs are heading toward stable 1.0 releases, and models are starting to be trained specifically to emit UI description languages. Meanwhile unconstrained generation has shipped to consumers in Gemini and Google Search, so both ends of the spectrum are now in production.

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:

Approach	Description	Examples
Constrained	AI selects from registered components	A2UI, OpenUI, assistant-ui, Tambo, CopilotKit, Vercel AI SDK UI
Unconstrained	AI generates raw HTML/CSS/JS directly	Google GenUI research, Gemini dynamic view, Claude Artifacts, MCP Apps

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 developer tooling has mostly leaned the other way. Google's own A2UI spec and SDKs like OpenUI, assistant-ui, and CopilotKit standardize on constrained / declarative output — agents emit allow-listed components rather than raw code — for safety and consistency, while MCP Apps contains unconstrained HTML in sandboxed iframes. Both ends of the spectrum are advancing in parallel rather than one cleanly winning (see How the Field Evolved).

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).
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).
ArtifactsBench - Benchmark of 1,825 tasks for generating visual, interactive artifacts (web apps, SVG, games), scored by an MLLM judge from rendered screenshots (Tencent Hunyuan, 2025).
Interaction2Code - Benchmark for generating interactive webpages from interactive prototypes rather than static designs (ASE 2025).
WebDev Arena - LMArena. Crowd-voted leaderboard where models build web apps side by side.
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).
WebSight - Synthetic dataset of 2M websites paired with screenshots for screenshot-to-code training (Hugging Face, 2024; paper).
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 / ChatGPT Plugins - OpenAI. Build plugins (called ChatGPT apps until July 2026) that render interactive 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.
Adaptive Cards - Microsoft. Platform-agnostic JSON card format rendered natively by host apps such as Teams and Outlook; a long-standing precursor to declarative agent UI specs.

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:

Layer	What it standardizes	Examples
Transport / events	How agent activity and state stream to the UI	AG-UI
UI description format	How the UI itself is described in the payload	A2UI (declarative components), MCP Apps (HTML resources)
In-client rendering surface	Where generated UI renders in a host chat app	MCP Apps, OpenAI Apps SDK (plugins), mcp-ui

Frameworks & SDKs

Generative UI Frameworks

Purpose-built for streaming AI-generated interfaces:

Vercel AI SDK - Vercel. Multi-provider TypeScript toolkit for React, Vue, Svelte, and Angular; generative UI is built by rendering typed tool results on the client (guide). The original RSC-based streamUI() is experimental.
Tambo - Generative UI SDK for React, purpose-built for streaming AI-generated components.
json-render - Vercel Labs. Apache-2.0 framework where models emit JSON constrained to a catalog of predefined components and actions, with renderers for React, React Native, Vue, Svelte, and Solid plus PDF, email, and video targets.
Hashbrown - Framework for building generative user interfaces in Angular and React.
GenUI SDK for Flutter - Flutter. Composes UIs from your existing widget catalog and feeds UI state back to the agent; supports A2UI. Experimental.
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.
OpenUI (Thesys) - Thesys. MIT-licensed generative UI framework built around OpenUI Lang, a compact streaming DSL for model-generated component trees, with runtimes for React, Vue, Svelte, and Angular. Also powers the commercial C1 API.

Supporting Libraries

Building blocks for reliable generation:

Instructor - Structured output extraction; useful with UI schemas for reliable generation.
DeepSeek Harness GenUI - PengYue. Community DeepSeek Harness plugin where the agent writes task-specific React UIs whose user inputs carry into later agent turns.

Models

Models trained specifically to generate UI:

OUI-1 - Thesys. Apache-2.0 diffusion model (DiffusionGemma finetune, 4B active parameters) that writes UI screens in OpenUI Lang from a component library and a plain-language brief, in about a second per screen.

Tools & Platforms

Component Generators

"Describe a component, get code."

v0 - 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.

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).
Layerwise - Desktop app builder for generating web interfaces from prompts, with local previews, source editing, and publishing (commercial, free tier).

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.
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; part of Storybook core since v10.6 (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.
bestax-mcp - Alex Smith. Offline MCP server for Bestax, a React component library for Bulma v1, with props, examples, CSS variables and Agent Skills.

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.
Gemini - Google (commercial). Dynamic view and visual layout generate a custom interactive interface per prompt; also available in Google Search AI Mode.

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.
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.
ChatKit - OpenAI. Embeddable chat UI framework with streaming, tool visualization, and agent-rendered interactive widgets.
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.
Pasta UI - MIT-licensed shadcn/ui registry of 50+ React components for agent interfaces: prompt input, tool approvals, tool timelines, reasoning text, citations and file diffs.

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

Chatbot - Vercel. Full-featured chatbot with generative UI using the AI SDK.
morphic - AI-powered search engine with generative answer UI.

Articles & Talks

Vercel: Introducing AI SDK 3.0 with Generative UI - Vercel blog post introducing Generative UI features in the AI SDK.
Generative UI: A rich, custom, visual interactive user experience for any prompt - Google Research post on shipping unconstrained generative UI in the Gemini app and Google Search (2025).
Enabling teachers to create learning interactives with generative UI - Google Research on generative UI with learning-design guardrails for classroom simulations (2026).
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.
The Developer's Guide to Generative UI in 2026 - CopilotKit overview of static, declarative, and open-ended generative UI and how the protocols fit together.

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).