Patterns Flows Systems Pricing

Sign in Sign up

Patterns Flows Systems About Pricing Privacy Terms

© 2026 Northbase. All rights reserved.

Perplexity AI Input & Output — Real Example & Microcopy Breakdown | Northbase

Systems
Perplexity
AI Input & Output

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 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. — 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

Search mode tooltip/popover open, triggered by clicking the Search icon in the input toolbar. Shows the current mode description and Pro toggle status. — 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

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 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.

Full-screen voice input mode. All other UI is hidden; only the voice prompt, animated visualization, microphone button, and close button are visible. — 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

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 query in the search input on the home screen. The submit button is now active (teal arrow) and ready to send.

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 simpler query in the search input. Same UI state as 2001 but with a different query.

User has typed a news query in the search input. Enterprise promotion widget visible in lower-right. — Perplexity — home
User has typed a news query in the search input. Enterprise promotion widget visible in lower-right.

Split View

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
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.

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
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.

Same completed response but right panel now shows rendered interactive preview of the Modal Dialog Component with live buttons and React code below. — 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

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
Loading state for 'What is design systems?' query. AI is searching the web and populating source list. Answer has not started generating yet.

Early streaming state for 'What happened in tech news today?' -- sources reviewed, first line of answer text appearing. — Perplexity — search-result-page
Early streaming state for 'What happened in tech news today?' -- sources reviewed, first line of answer text appearing.

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 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

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 'What is design systems?' -- scrolled to lower portion showing sections with inline citations, action bar, and Related questions.

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 tech news query, scrolled to lower portion showing multiple sections with inline citations, action bar, and Related questions.

Completed AI answer for image analysis query. Structured response with bold headings, bullet points describing what is visible in the screenshot. — 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

Links tab for the tech news query, showing expanded source results with titles, descriptions, thumbnails, and domain labels. — Perplexity — search-result-page
Links tab for the tech news query, showing expanded source results with titles, descriptions, thumbnails, and domain labels.

Images tab for the tech news query, showing a grid of image results with source domain labels beneath each thumbnail. — 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

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 an image file and typed a query about it. The attachment appears as a chip above the query text inside the input field.

User has attached a PDF document and typed a summarization query. The attachment appears as a chip with PDF icon above the query text. — 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.

Explore ai input & output analysis

AI Input: Anti Patterns AI Input: Decision Frameworks AI Input: Entry Interface AI Input: Input Composition AI Output: Anti Patterns AI Output: Decision Frameworks AI Output: Message Controls AI Output: Response Display