We analyzed 24 examples of how Claude handles ai input & output across their product, spanning 8 different approaches: entry point, input composition, model selector, attachment handling, citation display, loading state, message layout, split view.
Claude — Home / new conversation
Home screen entry point with personalized greeting, empty input field with slash-command hint placeholder, model selector, and starter prompt category chips below the input
Claude — Home / new conversation / Write starter prompts expanded
Home screen with the 'Write' starter prompt category expanded showing five writing-related prompt suggestions
Claude — Incognito chat / new conversation
Incognito chat mode entry point with anonymous greeting and privacy disclosure notice
Claude — Home / new conversation / attachment menu open
Home screen with the attachment/plus menu open showing all available input modifiers and attachment options
Claude — Home / new conversation / image attached with text
Home screen with an image attachment in the input field and a text prompt asking about the image
Claude — Home / new conversation / PDF attached with text
Home screen with a PDF document attached in the input field and a text prompt asking to summarize it
Claude — Home / new conversation / model selector open
Home screen with the model selector dropdown open showing three model tiers plus a 'More models' option
Claude — Home / new conversation / text composed
Home screen with user-typed text in the input field ready to submit, no starter prompts visible
Claude — Home / new conversation / text composed
Home screen with user-typed web search query in the input field ready to submit
Claude — Home / new conversation / text composed
Home screen with user-typed code generation request in the input field
Claude — Chat → New conversation
Loading state after submitting 'What is design systems?' — orange sunburst branded animation
Claude — Chat → Conversation
Completed response for 'What is design systems?' showing collapsible thinking section, formatted text with bold headers, and 4-icon action bar
Claude — Chat → Conversation with image
Image analysis response — Claude describing an uploaded screenshot of its own home screen with collapsible action step
Claude — Chat → Conversation with PDF
PDF document summary — structured profile summary with bold section headers, bullet list with metrics, and collapsible action step
Claude — Chat → Web search conversation
Web search response for 'What happened in tech news today?' showing collapsible steps, source list with favicons, inline citations, and bold section headers
Claude — Chat → Artifact code view
Artifact split-view showing React modal component — left panel has chat with code + usage section, right panel shows code view with syntax highlighting
Claude — Chat → Artifact preview mode
Artifact split-view showing rendered preview — right panel displays live interactive 'Open Modal' button