ChatGPT - AI Input & Output
We analyzed 21 examples of how ChatGPT handles ai input & output across their product, spanning 6 different approaches: entry point, input composition, model selector, attachment handling, voice input, context indicator.
Entry Points
ChatGPT — Home / new chat
ChatGPT home/landing screen showing empty state with input field, greeting headline, and promotional banner for image creation styles
ChatGPT — Home / temporary chat mode
Temporary Chat mode entry point with privacy explanation and dark-themed input bar
Model Selectors
ChatGPT — Home / new chat - model selector open
Model/reasoning mode selector dropdown open, showing GPT-5.2 options: Auto, Instant, and Thinking, plus Legacy models submenu
Attachment Handling
ChatGPT — Home / new chat - attachment menu open
Attachment/tools menu open from the + button, showing primary tools and expanded 'More' submenu with additional capabilities
ChatGPT — Home / new chat - file attached
File attachment in input field showing PDF file attached with auto-generated prompt suggestion
ChatGPT — Home / new chat - image attached
Image attachment in input field showing uploaded screenshot with auto-generated prompt and edit/remove controls
Voice Input
ChatGPT — Home / voice mode active
ChatGPT Voice mode entry point with 'Start talking' headline, modified input bar with Type placeholder, microphone button, and blue End button
ChatGPT — Home / voice input listening
ChatGPT voice input active/listening state with animated dotted waveform in the input field and X/checkmark action buttons
Input Composition
ChatGPT — Home / new chat - text entered
Input composition state with user-typed text in the input field and active send button on the home screen
ChatGPT — Chat thread - response loading
Streaming/loading state after submitting a query, showing the user message bubble, loading indicator, and input field with stop button
ChatGPT — Chat thread - response complete
Completed AI response about design systems with standard input field at bottom ready for follow-up, showing action bar and follow-up suggestions
ChatGPT — Home / new chat - search query entered
Input composition with a web search query typed on the home screen, showing send button active
ChatGPT — Chat thread - Canvas mode loading
Canvas mode with split-pane layout: chat panel on left with narrower input field, blank canvas on right loading/updating
ChatGPT — Chat thread - Canvas mode with code
Canvas mode with code visible in right panel, chat response in left panel with narrower input field, and Preview button
ChatGPT — Chat thread - code response without canvas
Standard chat thread showing AI response with code block about a React modal dialog component, input field at bottom
ChatGPT — Home / new chat - Canvas mode selected with text
Input composition on home screen with multi-line text and a Canvas tool badge active, showing how tool selection modifies the input
ChatGPT — Chat thread - Canvas mode with live preview
Canvas mode with preview showing rendered modal dialog component, chat panel on left with input field
ChatGPT — Chat thread - file attachment response
Chat thread showing PDF document response with the file attachment displayed in the user message, and input field at bottom
ChatGPT — Chat thread - image analysis response
Chat thread showing image analysis response with the uploaded screenshot visible in the user message area, and standard input at bottom
Context Indicators
ChatGPT — Chat thread - web search in progress
Web search active state showing 'Searching for tech news today' indicator, modified input field with 'Search the web' placeholder and Search badge
ChatGPT — Chat thread - web search response complete
Completed web search response with search-mode input field persisting, showing Sources link and personality feedback prompt