Skip to content

narrowin/awesome-generative-ui

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
.github/workflows
.github/workflows
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation

Awesome Generative UI Awesome

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

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

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 Vercel AI SDK streamUI(), Tambo, v0.dev
Unconstrained AI generates raw HTML/CSS/JS directly Google GenUI, 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.

Research

Papers

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

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

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

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:

  • LangUI - LangbaseInc. Tailwind components for chat, AI assistants, and LLM projects.
  • GPT-Vis - AntV. Visualization components designed for LLM-generated outputs.

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

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

About

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

Topics

ui-design experiment ui research frontend-development generative-ai

Resources

Readme

License

CC-BY-4.0 license

Contributing

Contributing
Activity
Custom properties

Stars

41 stars

Watchers

0 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors