Generative UI

Generative UI without generated code

Generative UI means the interface is made for the question instead of designed in advance. WebKnox does it with typed cards: your app shows a tested card with sources, and no model writes its code.

Try it in the Answer Lab Compare the approaches

In your chat appweather.forecast

What is the weather in Dresden?

15° and partly cloudy in Dresden right now. Light rain starts around 8 pm and gets heavier after 10 pm; it eases off by about 7 am, and Thursday stays mostly dry with a high of 12°.

What generative UI means

Nielsen Norman Group calls it an interface generated in real time by AI to fit the user's needs and context. Google Research goes further, with a model that writes a whole interactive page for one prompt. There is no formal standard, so the term now covers very different ways of building.

Four ways to build it

The main differences are who decides what appears on screen, and where the data comes from.

Approach	Who decides the layout	Where the data comes from	Examples
The model writes the interface	The model, as HTML, CSS and JavaScript	What the model knows or is given	Google Research's generative UI, CopilotKit's open mode
The model composes approved components	The model, from your catalog	Your tools and the model	A2UI, OpenUI by Thesys, assistant-ui's generative UI
Tools map to your components	You, in advance; the model picks a tool	Your tools	Vercel AI SDK, CopilotKit, assistant-ui's tool UIs
An API returns a typed card	The card type, with your theme and layout	Mostly WebKnox's sources, named on the card	WebKnox

Two related standards decide how a UI reaches the app, not who makes it. MCP Apps let an MCP server show its own view in the chat, and Adaptive Cards are JSON cards that a host draws natively. WebKnox is available as an MCP App too.

How typed cards work

Your app sends the conversation and gets back data it can check against a schema.

A question goes in
Send the conversation. WebKnox picks a skill, or answers matched: false so your own model can reply.
A typed card comes back
The answer has a card type, data that follows the type's JSON Schema, plain text and its sources.
Your app shows it
<webknox-answer> draws every card type in your theme. For other screens there are hosted embeds and images.

Terminal

1curl https://api.webknox.com/v2/answers \
2  -H "Authorization: Bearer $WEBKNOX_API_KEY" \
3  -H "Content-Type: application/json" \
4  -d '{"messages": [{"role": "user", "content": "What is the weather in Dresden?"}]}'
5
6# {"matched": true, "text": "15° and partly cloudy…",
7#  "card": {"type": "weather.forecast", "version": 1, "data": {…}},
8#  "sources": [{"name": "MET Norway", …}]}

In code, it's one tool with the AI SDK. Without code, add it to your AI app over MCP.

17 card types, ready to show

These are recorded answers, drawn by the same element your app would use.

15° and partly cloudy in Dresden right now. Light rain starts around 8 pm and gets heavier after 10 pm; it eases off by about 7 am, and Thursday stays mostly dry with a high of 12°.

What is the weather in Dresden?KioskGlance

12 recipes for chicken pasta. The best matches: Pasta With Chicken and Mushrooms (463 kcal); Penne Pasta With Chicken And Mushrooms (834 kcal); Chicken Ragu w Rigatoni (605 kcal); Chicken Teriyaki with Soba Noodles (696 kcal); Chicken Pasta Primavera - Flower Patch Farmgirl Style (427 kcal).

Chicken pasta recipesDaylight#0e8a63

“The costs of your good habits are in the present. The costs of your bad habits are in the future” — James Clear

Give me a quoteEditorial

Here's Classic Vinyl HD. https://icecast.walmradio.com:8443/classic

Play some jazzStatus barStrip

Ravens are generally larger and heavier-billed than crows. Ravens often have wedge-shaped tails and deeper calls, while crows commonly make a familiar caw. Size: Generally larger (Ravens), Generally smaller (Crows) Bill: Heavier, more curved (Ravens), Usually slimmer (Crows) Tail: Often wedge-shaped (Ravens), Usually fan-shaped (Crows) Call: Deep croak (Ravens), Often a caw (Crows)

Ravens vs crowsPlayful

4 recipes for chicken pasta (at most 700 kcal, at least 30 g protein). The best matches: Pasta With Chicken and Mushrooms (463 kcal); Chicken Ragu w Rigatoni (605 kcal); Chicken Teriyaki with Soba Noodles (696 kcal); Spicy Chicken Pasta and Peas with Sun-Dried Tomato Sauce (608 kcal).

Chicken pasta under 700 calories with at least 30 g of proteinDashboardMacros

Morgen in Berlin: Nach Regen in der Nacht bleibt es tagsüber bewölkt und weitgehend trocken, bei 9 bis 12 Grad.

Wie wird das Wetter morgen in Berlin?MagazineHeadlineDeutsch

Here are some pictures of northern lights. 039 Northern lights over Mývatn (Iceland) Photo by Giles Laurent (Giles Laurent, CC BY-SA 4.0): https://commons.wikimedia.org/wiki/File:039_Northern_lights_over_M%C3%BDvatn_(Iceland)_Photo_by_Giles_Laurent.jpg Maardu Northern lights — Estonia, 2022 (Maxim Bilovitskiy, CC BY 4.0): https://commons.wikimedia.org/wiki/File:Maardu_Northern_lights_%E2%80%94_Estonia,_2022.jpg Aurora borealis over Eielson Air Force Base, Alaska (United States Air Force photo by Senior Airman Joshua Strang, Public domain): https://commons.wikimedia.org/wiki/File:Aurora_borealis_over_Eielson_Air_Force_Base,_Alaska.jpg Aurora australis dancing over an LED illuminated igloo (Ross Burgener, Public domain): https://commons.wikimedia.org/wiki/File:Aurora_australis_dancing_over_an_LED_illuminated_igloo.jpg Aurora and perseids (Stephan Sprinz, CC BY 4.0): https://commons.wikimedia.org/wiki/File:Aurora_and_perseids.jpg Multicolored aurora borealis pillar over Brastad (W.carter, CC BY-SA 4.0): https://commons.wikimedia.org/wiki/File:Multicolored_aurora_borealis_pillar_over_Brastad.jpg

Show me pictures of the northern lightsMidnight

100 g of cooked lentils have 9 g of protein and 116 kcal, plus 7.9 g of fiber and 3.3 mg of iron.

How much protein is in 100 g of cooked lentils?Kids' tabletMacros

serendipity: The happy chance of finding something good or useful by accident.

What does serendipity mean?Mono

703 games for cozy farming. The best matches: Palia (rated 89, free to play); Grimshire (rated 98, $8.46); Wylde Flowers (rated 96, $16.99); Roots of Pacha (rated 90, $14.30); Pumpkin Panic (rated 96, free to play).

Cozy farming gamesKids' tablet

Today the sun sets at 6:02 PM.

When is sunset today?KioskGlance

A medium banana (118 g) has about 105 kcal, mostly from carbohydrates: 27 g, including 14 g of sugars. It also gives you 3.1 g of fiber and 422 mg of potassium.

How many calories are in a banana?DashboardLabel

23 artworks for ships at sea. The best matches: Ship at Sea (Albert Ernest Markes, 1901); Ships in a Turbulent Sea (Johannes Christiaan Schotel, 1826); Ship (from McGuire Scrapbook) (Edmund C. Coates, 1839); Oorlogsschip met volle zeilen bij een kust (anonymous, 1625); Ships and Sailors (Thomas Rowlandson, 1827).

Show me artworks of ships at seaMagazine

thank you in Japanese: ありがとう

How do you say thank you in Japanese?Midnight#2563eb

15° and partly cloudy in Dresden right now. Light rain starts around 8 pm and gets heavier after 10 pm; it eases off by about 7 am, and Thursday stays mostly dry with a high of 12°.

What is the weather in Dresden?DaylightChart#6d4aff

Playing Queen – Bohemian Rhapsody. https://www.youtube.com/watch?v=fJ9rUzIMcZQ

Play Bohemian RhapsodyDaylight#d6336c

Pasta timer set for 8 minutes, until 14:08.

Set a pasta timer for 8 minutesStatus barGlance

Browse all 43 examples

When WebKnox is the wrong choice

Typed cards only fit questions WebKnox has a card for.

Your interface is about your own data, such as orders, tickets or dashboards. Use tools mapped to your components, or a catalog.
You want forms and multi-step workflows. WebKnox shows answers, not your app's processes.
You need a layout no card has. A catalog or generated UI gives you more freedom, with more to review.
You need web search or long research. WebKnox answers what it has a card for, and says so when it hasn't.

It fits when people ask everyday questions in your chat, assistant or display, and you want an answer that looks right without designing it.

Questions about generative UI

What is generative UI?

An interface created for the moment by AI rather than fully designed in advance. Depending on the tool, a model writes it, composes it from approved components, or picks a ready-made one.

Is WebKnox generative UI?

In the broad sense, yes: each question gets the card that fits it, filled with its data. No model writes the card's code, which makes this the most constrained approach and the easiest to test.

Can a model get a card wrong?

Most cards show data from named sources, such as MET Norway for the weather. Some text is written by a model: a comparison's rows, for example, while its photos come from Wikimedia Commons. If WebKnox has no answer, it says so with matched: false, and your own model replies.

Does it work with the AI SDK and MCP?

Yes. @webknox/ai-sdk adds it to the AI SDK as a tool, and the MCP server adds it to Claude, ChatGPT, VS Code and other AI apps.

Ship your first card this afternoon

Get a free API key Read the quickstart

Generative UI without generated code

What generative UI means

Four ways to build it

How typed cards work

A question goes in

A typed card comes back

Your app shows it

17 card types, ready to show

When WebKnox is the wrong choice

Questions about generative UI

Ship your first card this afternoon