Twenty scenarios where the chat stops being a transcript and becomes the answer itself.
Sirf jawaab nahi. Banaata hai.
We are building our own AI product. Every screenshot here was captured from a real Claude session. Text in. Custom UI out. The shape follows the data — maps for travel, charts for stats, cards for weather, MCQs for input, 3D scenes for physics. Each scenario gets its own grammar.
What follows is a tour of twenty such scenarios from a single afternoon.
Twenty capabilities, one chat surface. Each one earns its place by being the cleanest way to answer a particular question.
Each card is a Claude behaviour, drawn from one afternoon of prompts.
A ramen prompt returned an editable recipe artifact: ingredient list, numbered steps, and a serving-size input that recomputes the quantities. Change "4" to "6" and the ingredients update.
A Three.js fragment shader was written and rendered in an interactive 3D viewer in the same turn. The viewer is stateful — camera angles persist, the scene keeps running, and the user can rotate around to see the disk from any angle.
The shader source is visible and editable inside the chat. The artifact panel exposes the renderer, so the user can read it, learn from it, and modify it — not only see the output.
Two artifacts that work together: a full-month itinerary with week-by-week cards, and a recommendation card listing curated stops. Both are anchored to a Google Map with pinned locations. Reading the plan is itself an act of navigation.
The user sees the answer being built. A streaming preview of "Create the month-long autumn Japan trip plan as a markdown artifact" lands before the final UI does, with an explicit loading state in the chat.
An NBA recap prompt returned a sports analytics surface — team logos, final score, an MVP card, a quarter-by-quarter chart, comparison bars across categories. None of the visual structure was in the prompt. Claude inferred the right shape of the answer.
Asked for a poem about a rainy day, Claude produced a typeset HTML artifact with custom typography and atmospheric styling. A second variant added a CSS-driven rain animation. The same content rendered with two very different intents.
A "what is a qubit" prompt turned into a comparison artifact: a coin lying flat for the classical bit, a coin spinning in the air for the qubit. A second view added a "Flip the bit" toggle and inline code. The UI is doing the teaching, not the paragraphs.
When Claude needs information from the user to continue, it asks with a UI, not a question. Numbered options, a free-text fallback, keyboard navigation hints, a progress indicator. The MCQ is keyboard-first and lives inside the chat.
A weather query produces a city card with current conditions, a five-day forecast strip, and an atmospheric background that reflects the condition. Numbers are anchors. The visual is the story.
A usage-stats query renders a personal dashboard: summary tiles for sessions, messages, total tokens, active days, plus a heatmap calendar of activity. The numbers are anchors. The shape is the answer.
A prompt about chat-management strategy turned into a flowchart with branching decision logic. The diagram does what a paragraph cannot: it makes the structure visible at a glance. The flowchart is not a supplement to the answer; it is the answer.
An email-drafting prompt returned a tabbed composer with two tonal variants — "Direct ask" and "Invite discussion" — each a complete email with a subject line, body, and an "Open in Mail" handoff. A small but telling pattern: Claude generates options, not the answer.
When an artifact needs to run code, Claude does not silently execute. The permission card surfaces the request inline in the conversation, shows the actual code that would run, and offers explicit "Always allow" and "Deny" controls. Consent is part of the UI grammar, not a hidden setting.
Reading across the screenshots, a few patterns repeat. They are worth naming as design moves — these are the things our own product would need to imitate.
The unifying point: Claude treats "what to render" as part of the answer, not as a separate concern.
Long, structured, or interactive responses move out of the chat stream into a dedicated panel that holds rich UI.
Maps for travel, charts for data, cards for weather, MCQs for input, flowcharts for branching logic. The shape follows the data.
Small data-bound cards (weather, stats, location pickers) live inside the chat without escaping to the artifact panel.
The user sees the answer being built. Loading is a state, not an empty bubble.
MCQs, navigation, and selection all expose keyboard hints. The chat does not stop being a chat just because UI showed up.
Code execution is gated by an explicit permission card. The user sees what is about to run.
When code is generated, both the source and the live render are visible in the same artifact, with no context switch.
Twenty scenarios, one chat surface, one UI grammar that rewards the user with the right shape every time. The chat is the entry point. The answer is its own little app.
Built as a study for our own AI product. Every screenshot was captured from a real Claude session on the user's laptop.