Someone reverse-engineered Claude's Generative UI and rebuilt it for a macOS terminal agent. Native Swift window, interactive widgets streaming in under 50ms.
When Claude added Generative UI to their chat interface, people actually noticed. And developers started building wild projects using this concept.
Agents returning real components instead of text, drawing diagrams live, opening Excalidraw from chat.
Here are some impressive projects with complete source code. Demo videos are embedded so you can watch without leaving the page.
Let's jump in.
What is Generative UI?
The UI era as we knew it is dead. At least the assumption that every screen has to be built in advance.
Chat is great for a lot of things, but if you ask an AI to help you book a flight, you probably don't want to read a paragraph about it. You want to see the flights, pick one, and confirm right there in chat.
That's Generative UI. Which lets agents produce interfaces based on what the task actually needs. Here's a simple example!
Four distinct patterns exist right now, each making a different bet on how much the agent should control.
If you are interested in reading more about it, I have already covered everything in The Developer's Guide to Generative UI in 2026.
In some of the examples below, I have uploaded demo videos (from the repository) as unlisted YouTube videos and embedded them here, so you can watch them directly without opening any links.
1. OpenGenerativeUI - visualize anything, live in chat.
This is my personal favorite on the list. It's the open source version of what Claude brought to their chat interface.
Just ask the agent to visualize anything and it figures out what kind of output makes the most sense, then generates it step-by-step as live HTML inside a sandboxed iframe.
It knows when to use a flowchart vs a structural diagram vs an interactive simulation vs just plain text. LangGraph Deep Agents is used for controlling that decision.
The outputs are genuinely impressive. Algorithm visualizations like binary search and BFS vs DFS, 3D WebGL animations, charts, network diagrams, math plotters, sortable tables, interactive simulations.
Here is the demo video!
You can check the GitHub Repository & live demo.
It also ships a standalone MCP server for Claude Desktop and Cursor.
2. Shadify - generate and export Shadcn components.
You describe the UI in simple language and it generates real ShadCN components back, streamed live to your browser. When it looks right, just export it as clean code.
It can also search the web for context. For example, if you ask it to recreate Linear's pricing table -- it will pull the actual page, read it, and build with that context.
You will be surprised to know that Tyler and Mike from the CopilotKit team built this in 4 hours on the Web Dev Challenge. The full episode is on YouTube if you want to see the story behind it & a bunch of other demos.
It looks simple, but it's built using:
- CopilotKit as agentic chat
- Hashbrown for component schema
- LangGraph on the backend
- Tavily for search
You can check the GitHub Repository & live demo.
3. Pi Generative UI - reverse-engineered Claude's generative UI for a terminal agent.
Someone went deep on how Claude's generative UI actually works, exported conversations as JSON, pulled out the design guidelines verbatim from the tool call payloads, and rebuilt the whole thing for pi, a macOS terminal coding agent.
Ask it to show you how compound interest works and a live interactive widget opens in a native macOS window in under 50ms. No Electron, just a tiny Swift binary called Glimpse wrapping a WKWebView.
Widgets update token by token via morphdom diffing and can send data back to the agent via window.glimpse.send(). Chart.js, D3, and Three.js are all available via CDN.
It's macOS only and requires the Swift toolchain.
You can check the GitHub Repository.
4. Open MCP Apps Builder - build MCP apps from a prompt.
MCP is how agents connect to external tools like GitHub, Notion, Figma. MCP Apps extends that so those tools can respond with an actual interactive UI, live inside the chat.
Building that from scratch is still pretty involved. This project lets you describe what you want and a Mastra agent spins up a full MCP app in a live E2B sandbox.
You can also connect any existing MCP server by URL and test its tools directly from the sidebar.
You can check the source code.
5. Excalidraw Studio - describe anything, get a live editable diagram.
This is a complete diagramming app where you describe anything you want and watch it draw itself in chat, element by element.
When it's done, you can open it as a full local Excalidraw canvas, drag things around, add your own stuff, then bring it back to chat and keep editing with AI. That loop, going back and forth between chat and canvas, is what makes it different.
This is built on top of the official Excalidraw MCP server but heavily modified to add persistent workspaces, checkpoint storage, blank canvas creation, five diagram modes, toolbar and the "Edit with AI" feature. Everything is saved to disk by default.
You can check the GitHub Repository.
6. Voice Agent Generative UI - real forms inside voice conversations.
Voice agents are genuinely bad at collecting structured data. Spelling out an email address over a call is nobody's idea of a good experience.
This extends the ElevenLabs Conversational AI widget so the agent can pop a real form mid-conversation. User fills it in, validated data goes straight back to the agent. Add it via a script tag from unpkg, drop a prompt snippet into your agent, register three tools in your ElevenLabs dashboard.
Supports text, email, number, date, select, textarea, and more with real-time validation.
You can check the GitHub Repository and live demo.
7. Generative UI Playground - all four patterns in one place.
If you want to see how all the patterns of generative UI actually work under the hood, this one shows exactly that. All four patterns are running in the same chat interface so you can compare them live.
AG-UI protocol runs underneath all of them, with a Python LangGraph and LiteLLM agent on the backend for the declarative pattern.
You can check the GitHub Repository and live demo.
8. HN Digest - chat to build your own Hacker News newsletter.
Instead of subscribing to someone else's Hacker News digest, this project lets you build your own by just describing what you want. The agent configures it and the preview updates live as you chat.
Add sections for top stories, Show HN, Ask HN, hiring, open source, trending, and more. There's also a topic section where you can filter by keyword and timeframe, like "security news from the last 48 hours".
Once you're happy, send a test email, activate with a magic link and schedule it.
Supports daily, weekly or monthly across 70+ timezones.
You can check the GitHub Repository and live demo.
9. Generative UI MCP - design guidelines, loaded only when needed.
Not a Generative UI project itself, but one of the most useful things you can pair with one.
Generating good HTML consistently is the real challenge and putting thousands of tokens of design rules into every prompt solves it badly.
This MCP server takes a different approach. A ~300-token resource at generative-ui://system-prompt covers the basics without the model ever calling a tool. When it needs more, it calls load_ui_guidelines with a specific module and gets only what's relevant.
Diagram guidelines alone are 59KB so lazy loading actually matters here. Five modules: chart, diagram, interactive, mockup, art. Works with Claude Code, Cursor, Windsurf, and any MCP client via npx generative-ui-mcp.
You can check the GitHub Repository.
These projects are all open source. Clone them, break them, build on top of them. The source code alone can teach you a lot.
If you build something with any of these, I'd love to see it. Hope this list gives you some ideas :)
Have a great day! Until next time.
You can connect me on GitHub, Twitter and LinkedIn.
Follow CopilotKit on Twitter and say hi, and if you'd like to build something cool, join the Discord community.
Top comments (0)