Claude - AI Input & Output

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.

Entry Points

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

Attachment Handling

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

Model Selectors

Claude — Home / new conversation / model selector open
Home screen with the model selector dropdown open showing three model tiers plus a 'More models' option

Input Composition

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

Loading States

Claude — Chat → New conversation
Loading state after submitting 'What is design systems?' — orange sunburst branded animation

Message Layout

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

Citation Display

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

Split View