Generative UI 101: How to build live interfaces with Opus 5.5

I’m going to show you how to have your agents answer with live interfaces instead of walls of text, running on Opus 5.5 or any other model you want… because the way we talk to AI is changing again, and this time it’s the screen that changes

and if you build apps or agents for other people, this is the part of the product they actually see

today we’re building this:

here’s the plan:

• why interfaces matter way more than the AI crowd thinks

• what generative UI is, explained simply

• what you need to build it

• the setup, step by step

• the runs: the same prompts on different models, side by side

• where to start today

the interface is coming back

there’s a small group of very advanced AI users right now trying as hard as they can to get rid of the interface

they run Claude Code inside a terminal, black screen, white text, no buttons, and they love it (i’m one of them)

for that crowd, the best interface is no interface at all… you type, the agent works, you read the result

but that crowd is tiny

the vast majority of people who use AI still want something else… they want the conversation to feel good, they want to see things, click things and decide fast

and a long answer in paragraphs is the opposite of that

you ask an AI to find you a hotel, it does all the research, compares prices, reads reviews… then it hands you a wall of text and leaves the actual decision to you

that’s why ChatGPT just introduced Intelligent UI

you ask it to plan a day in San Francisco and you get a map, photos and an itinerary you can edit, right inside the chat

the catch is that it only works inside ChatGPT

so if you’re building your own app, or your own agent for a client, you’re still stuck answering in text

that’s exactly what we’re going to fix in this article

0:23

what generative UI actually is

generative UI means the AI decides what the answer should look like, and the screen builds itself around it

ask for a budget and it draws a chart, ask to compare three tools and it builds a comparison table, ask for a plan and it gives you a list you can tick off

the tool we’re using for this is OpenUI, an open-source framework that lets AI apps and agents answer with real interfaces: cards, charts, forms, maps, tables

here’s how it works:

• you decide which pieces exist in your app (a card, a chart, a map, a button)

• the model decides which pieces each answer needs and how to arrange them

• OpenUI draws them on the screen while the answer is still coming in

the important part is that the model never writes any website code

it only picks from the pieces you gave it, a bit like building with LEGO from a box you packed yourself

so the answers always look like YOUR product, with your own components and your own design, and the model can’t break anything outside that box

it also works with any model, open or closed, so this article runs the same prompts on several of them

and people already use it for real… OpenUI has 6M+ downloads, 10,000+ stars on GitHub, and Oodle already uses it in production

to keep things simple, we’ll start from one of OpenUI’s ready-made examples called Open Intelligent UI, their open-source take on what ChatGPT just shipped (it’s independent, not affiliated with OpenAI)

here’s the same request answered by ChatGPT and by that OpenUI example:

you’re starting to understand that you can build truly awesome experience for you and your users

once you see the model build a screen piece by piece, a paragraph answer starts to feel very old

what you need

the list is short… you need three things:

• Node.js 24 and pnpm installed on your computer
• the OpenUI CLI, which you don’t even install, one command runs it

and one OpenRouter key

OpenRouter is one account that gives you access to almost every AI model through the same key

that’s what makes the model swap so easy… you don’t sign up with five AI companies, you just change which model the app calls

here are the models i ran through it:

• Claude Opus 5.5, my main model and the one in the title

• Gemini 4 Argon from Google

• Muse Wonder from Meta

• Qwen3.8 Max from Qwen

• GLM 5.3 from Z.ai, an open-weights model

• Kimi K3 from Moonshot, also open weights

you don’t need a big GPU or a local model for any of this… the app runs on your computer and the models answer through OpenRouter

and if you just want to see it before installing anything, openui.com/compare lets you try it straight from the browser

the setup

OpenUI comes with its own CLI that sets up the whole project for you, so there’s nothing to clone or wire up by hand

open a terminal and run this one command:

pnpx @openuidev/cli@latest create –example open-intelligent-ui

the CLI creates the project, installs everything and starts the app… most of the wait is downloads

if you leave out the –example part, it asks you what you want to build and shows you a list, with Open Intelligent UI right there in it

then stop the app (ctrl+c), open the .env file in the new folder and point it at OpenRouter with three settings:

• LLM_BASE_URL, the OpenRouter address
• LLM_API_KEY, your OpenRouter key
• LLM_MODEL, the model you want, for example anthropic/claude-opus-5.5

start it again with npm run dev, open localhost:3000 in your browser and ask it to plan a day in San Francisco… if a map shows up, you’re done

the interface, the components and the design all stay exactly where they are

one thing you should know before you compare models this way:

• OpenUI’s own hosted service checks the model’s answer and fixes small mistakes before it shows up

• going straight through OpenRouter skips that step

• so whatever the model writes is exactly what you see, mistakes included

i went the direct way on purpose, because it shows you how each model really behaves

if you’d rather have that safety net in your own product, the same CLI sets it up: run pnpx @openuidev/cli@latest generate-api-key and it writes an OpenUI key into your .env

then i had Claude Code add a few things on top of the demo to make testing faster:

• a model picker in the header, so i can switch without touching the .env file

• a compare page that sends the same prompt to two models at once

• buttons for my test prompts, so i never type on camera

none of that changes what the model writes or how OpenUI draws it… it only changes which model gets called

i also asked Claude Code to add refunds to the demo store data, because the stock orders had none and the dashboard prompt asks for them

then i ran every prompt several times on every model, without editing a single answer

the runs

run 1: a road trip with Opus 5.5

first test, Opus 5.5 alone, planning a road trip across the US

you ask for a trip and you get a trip you can look at and click through, instead of a list of cities to read

Opus was the most reliable model of the whole test, it almost never got an answer wrong

run 2: Opus 5.5 vs Muse Wonder, a marketing budget

next, a monthly marketing budget turned into something you can play with

both built the same kind of tool: a donut chart, sliders to move money around, and a table underneath

this was the most reliable prompt of the whole test, almost every model got it right every time

it’s also a good example of something a client would actually use… you move a slider and the chart changes, nobody needs to read a paragraph about it

run 3: Gemini 4 Argon vs GLM 5.3, an orders dashboard

last one, the business case: turn last month’s store orders into a dashboard with revenue by day, top products and refunds

where to start

you now have everything you need to give your app or agent a real interface

OpenUI: openui.com and github.com/thesysdev/openui

start your own project: pnpx @openuidev/cli@latest create

try it with no install: openui.com/compare

the benchmarks: openui.com/benchmarks

recipes for your own builds: openui.com/cookbooks

pick one prompt your clients ask every week, run it through this setup, and look at what comes back

thank you OpenUI for sponsoring this piece