We analyzed 26 examples of how v0 handles ai input & output across their product, spanning 9 different approaches: entry point, input composition, model selector, attachment handling, input modifier, action bar, loading state, message layout, split view.
Landing page / empty state with centered heading, input field with placeholder, toolbar icons, model selector, and starter prompt chips below the input.
Attachment popover menu opened from the + button on the input toolbar, showing two upload options.
Settings/adjustments popover menu opened from the adjustments icon on the input toolbar, showing toggles and sub-menus for generation configuration.
Design System sub-menu opened from the settings popover, showing a searchable list of default design systems and a button to create a new one.
Instructions sub-menu opened from the settings popover, showing saved instruction presets with descriptions and a button to create a new instruction.
MCPs sub-menu opened from the settings popover, showing empty state for MCP integrations with a button to add new ones.
Model selector dropdown opened from the v0 Pro chip on the input toolbar, showing three model tiers with v0 Pro currently selected (checkmark).
Model selector dropdown expanded with v0 Mini selected and its tooltip visible. A promotional banner below explains the three model tiers with descriptions and pricing. Left sidebar is also visible with navigation and recent chats.
Home page input field with user-typed text 'Build a simple calculator', submit button active (green arrow-up). Same layout as entry-point but with composed text.
Design mode panel active in the left sidebar, showing design configuration (Design System, Fonts, Colors, Radius, Shadows). The bottom input bar has a different placeholder ('Refine this element...') and the Design chip is highlighted/active. The preview panel shows the calculator.
v0 — chat conversation view
User has submitted 'Build a simple calculator' prompt. The AI is in its initial thinking/loading state before generating a response. The conversation view shows the user message bubble at the top right, a thinking indicator with the label 'Thinking' on the left, and a Stop button in the input area at the bottom.
v0 — chat conversation view, split-view
Multi-turn conversation showing a previous AI response about the CSS file (with action bar), followed by user message '4px more rounded corners please', and the AI's new response in active thinking/streaming state. The thinking text is visible: 'The user wants to increase the rounded corners by 4px. I need to read the globals.css file to see the current --'. The calculator preview shows a blue-themed design variant. A bottom-right toast shows 'Working / Thinking...' with the v0 logo. An 'Unsaved Changes' bar appears at the very bottom with Reset and Save buttons.
v0 — chat conversation view, split-view
AI is actively streaming its response in a split-view layout. The left panel shows the conversation with completed thinking phase ('Thought for 3s'), AI text response, an 'Explored codebase' action, and a 'Building calculator' status with file references. The right panel shows a code preview skeleton with placeholder lines and a 'Building calculator' status label below.
v0 — chat conversation view, split-view
AI has completed generating a simple calculator. The left panel shows the full conversation thread with thinking duration, AI explanation, a 'Built calculator v1' expandable section, detailed description of features, 'No issues found' status, 'Worked for 30s' duration, and an action bar with thumbs up, thumbs down, copy, and overflow menu. The right panel shows the fully rendered interactive calculator preview. The input field placeholder has changed to 'Ask a follow-up...' and a new 'Design' button appears.
v0 — chat conversation view, split-view
Completed second turn of the conversation. The AI has responded to '4px more rounded corners please' with 'Thought for 1s', 'Read current CSS', 'Updated border radius v2' expandable section, and a description containing inline code formatting for '--radius'. The response explains the specific change from 0.625rem (10px) to 0.875rem (14px). Shows 'No issues found' and the action bar. The preview panel header shows 'Latest' indicating version navigation is available. The calculator is back to a neutral/light theme.
v0 — chat conversation view, split-view
Same completed calculator response as 4904, but with the overflow menu (three dots) on the 'Built calculator v1' version pill opened, revealing 'Restore' and 'New Chat' options.
v0 — chat conversation view, split-view
Same completed calculator response, but with the action bar overflow menu (three dots at the bottom of the response) opened, revealing 'Retry' and 'Copy Link' options.
v0 — chat conversation view, split-view, version dropdown
Same completed multi-turn conversation as 4910, but with the version dropdown opened in the top-right of the preview panel. The dropdown shows 'Version 2 - 3 minutes ago' (selected with checkmark) and 'Version 1 - 5 minutes ago'. The response also now shows 'Worked for 31s'. The 'Unsaved Changes' bar with Reset and Save is visible at the bottom of the preview panel.
