Patterns Flows Systems Pricing

Sign in Sign up

Patterns Flows Systems About Pricing Privacy Terms

© 2026 Northbase. All rights reserved.

Google Gemini AI Input & Output — Real Example & Microcopy Breakdown | Northbase

Systems
Google Gemini
AI Input & Output

Google Gemini - AI Input & Output

We analyzed 36 examples of how Google Gemini handles ai input & output across their product, spanning 12 different approaches: entry point, input composition, model selector, attachment handling, voice input, input modifier, context indicator, citation display, loading state, message layout, split view, text formatting.

Entry Points

Gemini landing page with personalized greeting, input field with placeholder, starter prompt chips, attachment button, Tools button, model selector (Fast), and microphone icon — Google Gemini — gemini.google.com home
Gemini landing page with personalized greeting, input field with placeholder, starter prompt chips, attachment button, Tools button, model selector (Fast), and microphone icon

Attachment Handling

Attachment menu expanded from the + button showing three upload options; voice input error message displayed in the input field — Google Gemini — gemini.google.com home
Attachment menu expanded from the + button showing three upload options; voice input error message displayed in the input field

Input composition with a PDF file attached and prompt text typed; file appears as a thumbnail card above the input text — Google Gemini — gemini.google.com home
Input composition with a PDF file attached and prompt text typed; file appears as a thumbnail card above the input text

Input composition with an image attached and prompt text typed; image appears as a thumbnail above the input text — Google Gemini — gemini.google.com home
Input composition with an image attached and prompt text typed; image appears as a thumbnail above the input text

Input Modifiers

Tools menu expanded showing available tool/mode options for configuring the AI's behavior — Google Gemini — gemini.google.com home
Tools menu expanded showing available tool/mode options for configuring the AI's behavior

Model Selectors

Model selector dropdown expanded showing Gemini 3 model variants with descriptions and New badges — Google Gemini — gemini.google.com home
Model selector dropdown expanded showing Gemini 3 model variants with descriptions and New badges

Voice Input

Voice input active listening state with animated microphone button and 'Listening' status text in the input field — Google Gemini — gemini.google.com home
Voice input active listening state with animated microphone button and 'Listening' status text in the input field

Input Composition

Input composition with Deep Research tool activated, user has typed a query, Sources and Files buttons visible below input — Google Gemini — gemini.google.com home
Input composition with Deep Research tool activated, user has typed a query, Sources and Files buttons visible below input

Input composition with a code-related prompt typed, submit button visible, no special tools activated — Google Gemini — gemini.google.com home
Input composition with a code-related prompt typed, submit button visible, no special tools activated

Input composition with a general knowledge query typed, submit button visible, no tools activated — Google Gemini — gemini.google.com home
Input composition with a general knowledge query typed, submit button visible, no tools activated

Message Layout

User asked 'What happened in tech news today?' with Deep Research tool active. Gemini produced a research plan with steps (Research Websites, Analyze Results, Create Report) and action buttons to proceed or edit. — Google Gemini — chat-conversation
User asked 'What happened in tech news today?' with Deep Research tool active. Gemini produced a research plan with steps (Research Websites, Analyze Results, Create Report) and action buttons to proceed or edit.

Loading States

Deep Research has started. Split-view layout with chat on left and research panel on right. Left shows status message and progress card. Right shows skeleton loading placeholders with 'Show thinking' toggle. — Google Gemini — chat-conversation-split-view
Deep Research has started. Split-view layout with chat on left and research panel on right. Left shows status message and progress card. Right shows skeleton loading placeholders with 'Show thinking' toggle.

Loading state immediately after submitting 'What is design systems?' query. Animated sparkle/thinking indicator shown where the AI response will appear. — Google Gemini — chat-conversation
Loading state immediately after submitting 'What is design systems?' query. Animated sparkle/thinking indicator shown where the AI response will appear.

Split View

Deep Research actively researching. Split-view with thinking process visible on right panel showing research steps, website chips being researched, and partial report generation. — Google Gemini — chat-conversation-split-view
Deep Research actively researching. Split-view with thinking process visible on right panel showing research steps, website chips being researched, and partial report generation.

Deep Research completed. Split-view showing final report on right with table data, article text, and top toolbar. Left side shows generated file attachment and response was stopped by user. — Google Gemini — chat-conversation-split-view
Deep Research completed. Split-view showing final report on right with table data, article text, and top toolbar. Left side shows generated file attachment and response was stopped by user.

Canvas mode active. User asked for a React modal component. Split-view with AI thinking/response on left and code editor canvas on right showing React code with line numbers. — Google Gemini — chat-conversation-split-view
Canvas mode active. User asked for a React modal component. Split-view with AI thinking/response on left and code editor canvas on right showing React code with line numbers.

Canvas mode completed. Full AI response visible on left with feature list, file card, and 'Try again without Canvas' link. Code canvas on right unchanged. — Google Gemini — chat-conversation-split-view
Canvas mode completed. Full AI response visible on left with feature list, file card, and 'Try again without Canvas' link. Code canvas on right unchanged.

Canvas mode with Preview tab active. Right panel renders a live preview of the React modal component. Left panel shows same completed response. — Google Gemini — chat-conversation-split-view
Canvas mode with Preview tab active. Right panel renders a live preview of the React modal component. Left panel shows same completed response.

Text Formatting

AI response streaming for 'What is design systems?' showing formatted text with bold terms, numbered sections, bullet points, and inline citation link icons. — Google Gemini — chat-conversation
AI response streaming for 'What is design systems?' showing formatted text with bold terms, numbered sections, bullet points, and inline citation link icons.

AI response (non-Deep Research) to 'What happened in tech news today?' showing formatted text with emoji section headers, bold text, bullet lists, and inline citation links with hover tooltip. — Google Gemini — chat-conversation
AI response (non-Deep Research) to 'What happened in tech news today?' showing formatted text with emoji section headers, bold text, bullet lists, and inline citation links with hover tooltip.

AI response to 'What's in this image?' showing image analysis with the uploaded image displayed, an 'Analysis' collapsible section header, and formatted breakdown with bold labels and nested bullet lists. — Google Gemini — chat-conversation
AI response to 'What's in this image?' showing image analysis with the uploaded image displayed, an 'Analysis' collapsible section header, and formatted breakdown with bold labels and nested bullet lists.

Citation Display

Completed AI response for 'What is design systems?' showing bottom portion with data table, examples list, follow-up question, Sources button, action bar, and Sources side panel open. — Google Gemini — chat-conversation
Completed AI response for 'What is design systems?' showing bottom portion with data table, examples list, follow-up question, Sources button, action bar, and Sources side panel open.

Completed AI response summarizing an uploaded PDF document. Shows formatted text with citations from the document, a Sources button, action bar, follow-up question, and a Files side panel open on right. — Google Gemini — chat-conversation
Completed AI response summarizing an uploaded PDF document. Shows formatted text with citations from the document, a Sources button, action bar, follow-up question, and a Files side panel open on right.

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