- Hello everyone — I'm the person between you and the coffee break
- I'm Pedro, AI Tooling Engineer at Supabase
- Two Claudes in the title: one painted light, the other paints interfaces
- Today: how we got here, what generative UI is, why MCP apps are the perfect vehicle — then we build some together
One Claude painted light.
The other paints interfaces.
Same first name. Both turning intent into something you can see.
- Claude Monet captured an impression of a moment — light, perception
- Claude the model renders an impression of your intent — as UI
- That's the thread for today
November 2022
How we got here
ChatGPT · Nov 2022
write me a profile card component. reply in a code block.
Sure! Here's a profile card: ```html <div class="card">…
Copy
Paste
Fix
Repeat
index.html
1<divclass="card">
2<imgsrc="…"/>
3<h2>Jane Doe</h2>
4<p>Designer</p>
5</div>
6<style>
7.card { /* fix me */
8 padding: 1rem; }
- Back in 2022 this was the loop: ask ChatGPT for a component in a code block
- Copy it, paste it, fix what's broken, repeat
- The model on the left, your editor on the right, you shuttling between them
“Poor man's vibe coding”
It worked… sort of.
Primitive, but exciting.
It'll never write better code than me… right?
The phase — and the phrase — come from Ruben Casas (Postman), “Beyond Components: Designing Generative UI for MCP Apps.” Go watch it →youtu.be/hCMrEfPG2Yg
- Ruben Casas from Postman calls this "the poor man's vibe coding"
- It worked, sort of. Primitive, but exciting.
- And the assumption: it'll never write better code than me… right?
- Credit where it's due — his talk maps this whole landscape, link is on screen
Then it improved — fast
One prompt. A whole interface.
Today, a single prompt rebuilds a page — with a search box, a blur animation, and accessibility I never asked for.
Impressionists were mocked too — “unfinished,” “a sketch.” Then it became a movement.
- Then it got good, fast
- A single prompt rebuilt my blog — unprompted search box, blur animation, accessibility out of the box
- The "it'll never beat me" assumption aged badly
- Like the impressionists: first dismissed as unfinished sketches, then a movement. Generative UI is in its impressionist phase
What is generative UI?
A spectrum, not a switch
Static
Pre-built components. The agent just passes props.
Today's default
Declarative
The agent emits a JSON/YAML spec that maps to your components.
Best balance today
Generative
The model writes the UI itself, on demand, at runtime.
Where it's going
Ruben maps the full landscape (static · declarative · generative) — I'll point you there. Here's the gist.
- Generative UI isn't one thing — it's a spectrum
- Static: developers build components, the agent passes props. Most agents today
- Declarative: the agent emits a JSON/YAML spec mapped to your design system. Best balance right now
- Generative: the model writes the UI itself, at runtime. That's the frontier
- Ruben goes deep on all three — go watch; here's the gist
Generative, for real
Same data. Brand-new UI, every time.
No component, no translation layer — the model paints the interface on demand. One weather agent, three completely different renders.
Press Re-generate and watch it repaint. What could possibly go wrong?
weather-agent · generation #1generated at runtime
Lisbon
19°
⛅
“Bring a light jacket — the Tejo breeze means business.”
- Here's generative for real — a weather agent
- Same data every time, but the UI is generated fresh on each call
- Click re-generate: three totally different interfaces from one agent
- It's magic… and that "what could go wrong" is the whole next section
The catch
You can't hand users raw, model-written UI
If we don't trust third-party code, we shouldn't blindly trust code an LLM wrote a second ago. Generative UI needs a frame.
A boundary
Containment
A sandbox
- The catch: you can't just take model-written HTML/JS and render it to a user
- If we sandbox third-party code, LLM-generated code deserves the same
- Generative UI needs a frame: a boundary, containment, a sandbox
- A loose impressionist painting still needs a frame to hang safely
Why MCP apps
MCP apps are the frame and the gallery
Sandboxed by default
Authentication
Tool calling
Message passing
A double-iframe sandbox, auth, and a message channel — out of the box. Even Anthropic ships its first-partyUI this way. So why can't we?
- This is why MCP apps are the perfect vehicle for generative UI
- They give you the frame and the gallery: sandboxed double-iframe, auth, tool calling, message passing — for free
- Anthropic uses MCP apps even for its own first-party UI
- If it's good enough for them, it's good enough for us. Let's use it
Demo · your turn
Let's paint a wall — together
Scan the code. Prompt a tile. Our MCP server generates it, Supabase Realtime drops it onto the shared azulejo wall — Lisbon's walls, made of your components.
- Now your turn — this is the whole point
- Scan the QR, you'll get a prompt box
- Type what you want as a tile — "a neon weather card", "a green button", anything
- Our MCP server generates it inside the sandbox, Supabase Realtime puts it on the shared wall
- Azulejos: Lisbon's tiled walls — but every tile is a component you generated
LIVE
The azulejo wall
MCP · generated HTMLSupabase Realtime
Wall not configured.
- Here's the wall, live
- As prompts come in, tiles render and pop in — each one a generated component
- Constrained catalog keeps it safe and fast; no raw HTML reaching the screen
- Keep them coming — let's fill it
- Monet gave us a new way to see; these models give us a new way to build
- Generative UI is still in its impressionist phase — and you just painted with it
- Go watch Ruben's talk for the deep dive
- That's me — questions? Thank you, Lisbon!
1/12