Microsoft Copilot - AI Input & Output
We analyzed 24 examples of how Microsoft Copilot handles ai input & output across their product, spanning 10 different approaches: entry point, input composition, model selector, attachment handling, voice input, action bar, citation display, loading state, message layout, text formatting.
Entry Points
Signed-out empty state with greeting, input field, model selector set to Smart, plus button for attachments, microphone button for voice input, and two rows of starter prompt chips.
Signed-in empty state with different greeting text, user-typed text in the input field, and submit button active. Model selector shows Smart. Starter prompts visible.
Signed-in empty state with a third greeting variant. User has typed a search query in the input. Model selector shows Smart with submit button active. Starter prompts differ from previous screens.
Signed-in empty state with user-typed image analysis prompt. Greeting matches 2801. Starter prompts match the standard set. Submit button active.
Model Selectors
Model selector dropdown expanded showing five mode options: Smart (GPT-5.1), Quick response, Think deeper, Study and learn, and Search.
Attachment Handling
Plus button menu expanded showing four action options: Add images or files, Generate image, Create a podcast, and Start a quiz.
Vision permission modal dialog that appears before image upload/analysis features. Asks user to accept biometric data processing. Modal overlays the main input screen.
File attachment in input field. A PDF file 'Profile.pdf' is shown as a card in the input area with a dismiss button. The user has typed 'Summarize this document' below the file. Autocomplete suggestions appear below the input field. Submit button active.
Voice Input
Full-screen voice input listening state with water/sky background, 'I'm listening' text, and a floating control bar with close, microphone, and settings buttons.
Input Composition
Input field with user-typed text and a Quiz mode tag applied. The model selector is replaced by a dismissible Quiz chip. Submit button is active (filled black arrow).
Loading States
Microsoft Copilot — chat conversation
Loading state after user submits the question 'What is design systems?' — the AI response area shows animated bouncing dots while the model generates a reply. A stop button is visible in the input bar.
Message Layout
Microsoft Copilot — chat conversation
Completed AI response about design systems, scrolled to the bottom half. Shows rich text formatting with headings, bold text, bullet lists, inline source citations, reference cards, follow-up suggestions, and the full action bar.
Microsoft Copilot — chat conversation
AI streaming a response analyzing an uploaded image of the Copilot interface itself. Shows the user's image upload thumbnail, their prompt, and the structured analytical response with sections for Main Interface and Sidebar Navigation.
Text Formatting
Microsoft Copilot — chat conversation
AI response streaming in Study and learn mode for a React modal dialog component request. Shows the user prompt, structured response with step-by-step explanation, code block beginning to render, and a stop button indicating active generation.
Microsoft Copilot — chat conversation
AI streaming a document summary response after the user uploaded a PDF file ('Profile.pdf'). Shows the file attachment in the user message, and a structured summary with section headings, bold text, and bullet points about a professional profile.
Action Bars
Microsoft Copilot — chat conversation
Bottom portion of the completed AI response for a React modal dialog component. Shows an expanded code block with JSX example usage, follow-up suggestions as a bulleted list, and the full action bar with feedback and editing controls.
Citation Display
Microsoft Copilot — chat conversation
AI response about today's tech news showing rich structured output with multiple sections, inline citation badges, and a citation tooltip/preview card hovering over 'The Star' source link.