Generative UI: when the chatbot shows instead of tells

Why show instead of tell

Some answers are worse as paragraphs. “What have you built?” in prose is a run-on list of six product names. As a grid of cards — each with its accent, status, and a link into the case study — it’s scannable, and every card is an actual affordance: tap one, you’re reading the case study.

That’s the bet behind generative UI. The model doesn’t just write text; it decides, for the right kind of question, to hand back a component. A music player you can press play on beats a sentence that says “I produce deep house.”

The four tools

Each tool renders one component and fires on one kind of intent. The interesting part is the right-hand column — the near-miss that deliberately stays prose.

The rule that keeps tools from over-firing

The failure mode of generative UI isn’t the tool breaking — it’s the tool firing when it shouldn’t. Ask about one employer and get a full resume card; ask about one library and get the whole skills grid. The fix is a single distinction, written into the system prompt:

Overview intent renders UI. A single, specific question is answered in prose. One product by name, or “what do you build” → portfolio cards. One employer, one tool, one role → a grounded paragraph.

Two more constraints keep turns clean: at most one tool per turn, and at most one short lead-in sentence before it — no prose answer after the tool, because the component already is the answer. A hard step cap (stopWhen: stepCountIs(3)) stops the model from chaining tool calls into a runaway turn.

How it works, end to end

1. 1.Tool definitions go to the model. The chat route registers the four tools (peterwd scope only) alongside the system prompt, each with a description and the firing rules above.
2. 2.The model picks at most one. Based on intent, it either answers in prose or calls a single tool — e.g. show_portfolio with slugs to scope to named products, or no slugs for all six.
3. 3.The server executes itinto a typed payload — { kind: "side-b" }, { slugs: [...] }, and so on. No prose is generated for the body; the payload is the message part.
4. 4.The client renders the match. A branch keyed on the tool name and an output-available state swaps the payload for its React component — tool-show_portfolio renders the portfolio cards, and so on.

  // one branch per tool, keyed on name + state
  if (part.type === 'tool-show_portfolio' &&
      part.state === 'output-available') {
    const { slugs } = part.output;
    return <ChatPortfolioCards slugs={slugs} />;
  }

What generative UI buys you

• Scannable answers.A grid beats a comma-separated list the moment there’s more than two of anything.
• Real affordances. Cards link into case studies; the player actually plays. The answer is a thing you can use, not just read.
• Restraint is the feature.Because a specific question stays prose, the cards mean something when they do appear — they signal “here’s the overview,” not noise.
• Still grounded.Tools change the shape of the answer, not its truth. The retrieved facts — and the honesty rules — apply exactly as they do to prose.