Perplexity - AI Input & Output
We analyzed 21 examples of how Perplexity handles ai input & output across their product, spanning 9 different approaches: entry point, input composition, model selector, attachment handling, voice input, citation display, loading state, message layout, split view.
Entry Points
Perplexity — home
Perplexity Pro home screen in empty/default state. Central search input with placeholder, mode selector icons (Search, Deep Research, Reasoning), right-side toolbar (web, collection, attach, mic, submit), and a starter prompt card below. App connectors widget visible in lower-right corner.
Model Selectors
Perplexity — home
Search mode tooltip/popover open, triggered by clicking the Search icon in the input toolbar. Shows the current mode description and Pro toggle status.
Voice Input
Perplexity — home
Voice input listening state within the main search input on the home screen. Placeholder changes to 'Listening...' and toolbar controls change to stop and confirm buttons.
Perplexity — home / voice-overlay
Full-screen voice input mode. All other UI is hidden; only the voice prompt, animated visualization, microphone button, and close button are visible.
Input Composition
Perplexity — home
User has typed a query in the search input on the home screen. The submit button is now active (teal arrow) and ready to send.
Perplexity — home
User has typed a simpler query in the search input. Same UI state as 2001 but with a different query.
Perplexity — home
User has typed a news query in the search input. Enterprise promotion widget visible in lower-right.
Split View
Perplexity — search-result-page
User asked to write a React modal dialog component. AI is mid-generation with split-view: left panel shows sources and progress, right panel shows generated CSS code. Code execution tools are active.
Perplexity — search-result-page
Completed AI response for React modal dialog query. Left panel shows answer with feature list and action bar. Right panel shows full HTML source code view with 'Download as HTML' option.
Perplexity — search-result-page
Same completed response but right panel now shows rendered interactive preview of the Modal Dialog Component with live buttons and React code below.
Loading States
Perplexity — search-result-page
Loading state for 'What is design systems?' query. AI is searching the web and populating source list. Answer has not started generating yet.
Perplexity — search-result-page
Early streaming state for 'What happened in tech news today?' -- sources reviewed, first line of answer text appearing.
Perplexity — search-result-page
Loading state for image analysis query 'What's in this image?' with attached screenshot. Shows file processing progress and initial step text.
Perplexity — search-result-page
Loading state for PDF summarization query 'Summarize this document' with attached Profile.pdf. Shows file processing progress and initial AI reasoning step.
Message Layout
Perplexity — search-result-page
Completed AI answer for 'What is design systems?' -- scrolled to lower portion showing sections with inline citations, action bar, and Related questions.
Perplexity — search-result-page
Completed AI answer for tech news query, scrolled to lower portion showing multiple sections with inline citations, action bar, and Related questions.
Perplexity — search-result-page
Completed AI answer for image analysis query. Structured response with bold headings, bullet points describing what is visible in the screenshot.
Citation Display
Perplexity — search-result-page
Links tab for the tech news query, showing expanded source results with titles, descriptions, thumbnails, and domain labels.
Perplexity — search-result-page
Images tab for the tech news query, showing a grid of image results with source domain labels beneath each thumbnail.
Attachment Handling
Perplexity — home
User has attached an image file and typed a query about it. The attachment appears as a chip above the query text inside the input field.
Perplexity — home
User has attached a PDF document and typed a summarization query. The attachment appears as a chip with PDF icon above the query text.