AI product patterns
What we learned from people using assistants.
Before growing the system, we looked at AI products that are already out and at published guidelines. Then we compared them with what Tattva had. This page lists what we found, how well each finding is backed up, and where each pattern lives in the library.
Method and limits
- We looked at four areas at once: chat assistants, tools where AI does tasks for you and tools for developers, tools that help inside your own work or make images and media, and published guidelines and pattern libraries.
- Each pattern is tagged Primary (company docs and official posts), Secondary (news, community threads or search summaries) or Inference (no source found, so we reasoned it out).
- Some pages could not be read. OpenAI and Perplexity help pages gave access errors, and Apple's guidelines only load with scripts. What we know about those products comes from secondary sources.
- Products change fast. Treat these notes as a snapshot from October 2026.
30 of the 35 patterns below were added this time. The rest were already in the library.
Pattern catalogue
Chat
| Pattern | Seen in | Evidence | In Tattva |
|---|---|---|---|
| Model and mode picker, with how hard it thinksNew | ChatGPT (Auto, Fast, Thinking; thinking time), Gemini (Fast, Thinking, Pro), Claude (extended thinking) | Secondary | |
| Tool menu in the message box and tags for tools in useNew | Claude, Perplexity, Mistral Le Chat | Secondary | |
| AttachmentsNew | Vercel AI Elements, Shape of AI, assistant-ui | Secondary | |
| Voice conversationNew | ChatGPT inline voice, Gemini Live, Character.ai, Meta AI | Primary | |
| Message queue and steeringNew | Claude Code, Cursor, Windsurf, Copilot coding agent, ChatGPT Update | Primary | |
| Version pager and branchingNew | ChatGPT (Branch in new chat, 1/3 pager), Character.ai (swipe, rewind) | Secondary | |
| Memory notice and managerNew | Claude memory settings, Character.ai pinned memories, ChatGPT memory updated | Primary | |
| Private and temporary chatNew | Claude Incognito, Gemini Temporary Chat, ChatGPT Temporary Chat | Primary | |
| Starter prompts and templatesNew | Shape of AI Wayfinders, Microsoft HAX guidelines 1 and 2 | Primary | |
| Message, actions, Markdown, history | All chat assistants | Primary |
Agents and oversight
| Pattern | Seen in | Evidence | In Tattva |
|---|---|---|---|
| Plan shown before work starts, with approvalNew | Replit Plan mode, Claude Code plan mode, Windsurf Cascade, Gemini Deep Research | Primary | |
| Permission request for one specific thingNew | Claude Code permissions, Claude in Chrome | Primary | |
| Switch for how much the assistant does aloneNew | Claude Code permission modes, Replit autonomy levels | Primary | |
| Review of changes with keep and rejectNew | Cursor, Windsurf, Copilot coding agent | Secondary | |
| Save points and rewindNew | Claude Code, Cursor, Windsurf, Replit | Primary | |
| Assistant sessions grouped by statusNew | Claude Code agent view, GitHub Copilot Agents Panel, Codex cloud | Primary | |
| Tree of helper assistantsNew | Claude Code subagents | Primary | |
| Thinking, steps taken, step lists, checklists | ChatGPT, Gemini, Perplexity, Claude Code, Vercel AI Elements | Primary | |
| Approve or deny an action | Claude Code, Claude in Chrome, Vercel AI Elements Confirmation | Primary |
Trust and meters
| Pattern | Seen in | Evidence | In Tattva |
|---|---|---|---|
| AI label with a popup that explains itNew | IBM Carbon for AI, Adobe Content Credentials, Shape of AI | Primary | |
| Source card on hoverNew | Perplexity, Claude, Google AI Overviews | Secondary | |
| AI summary card with sourcesNew | Google AI Overviews, Slack AI | Secondary | |
| Go back to the AI's originalNew | IBM Carbon for AI | Primary | |
| Meter for how much the assistant can remember at onceNew | Vercel AI Elements Context; Claude Code summarize actions | Inference | |
| Credits, usage limit and cost estimateNew | Adobe, Runway, Notion, Copilot coding agent, Replit | Primary | |
| Sources, confidence, feedback, errors, refusals | PAIR, Microsoft HAX, Shape of AI | Primary |
Inline and generative
| Pattern | Seen in | Evidence | In Tattva |
|---|---|---|---|
| Preview before applyingNew | Notion AI, Google Docs, Word Copilot | Primary | |
| Faded text that finishes your sentenceNew | GitHub Copilot in VS Code and Visual Studio | Primary | |
| Selection toolbarNew | Google Docs, Notion, Apple Writing Tools, Word Copilot | Primary | |
| Suggestion card with categoriesNew | Grammarly, Apple Proofread | Primary | |
| Settings for making things, and costNew | Runway Gen-4, Midjourney | Primary | |
| Vary, enlarge, remix, extendNew | Midjourney, Suno, Sora | Primary | |
| Version history and restoreNew | Figma and Figma Make, Claude artifacts | Primary | |
| Progress while something slow is madeNew | No primary source found | Inference | |
| Choice grid, canvas, prompt box | Midjourney, Gemini Canvas, Claude artifacts | Primary |
Libraries and guidelines compared
| Source | What it ships |
|---|---|
| Vercel AI Elements | 54 components in Chatbot, Code, Voice, Workflow and Utilities groups, for example Attachments, Chain of Thought, Checkpoint, Confirmation, Context, Model Selector, Plan, Queue, Reasoning, Sources, Terminal, Test Results |
| Shape of AI | Patterns grouped as Wayfinders, Prompt actions, Tuners, Governors, Trust builders and Identifiers |
| IBM Carbon for AI | AI Label, Explainability Popover, an AI Chat framework, AI versions of 12 existing components and a Revert pattern |
| assistant-ui | Thread, Composer, Tool UI, Generative UI, Attachments, Branching, Voice and MCP building blocks |
| Microsoft HAX | 18 guidelines for human-AI interaction, grouped Initially, During, When wrong and Over time |
| Google PAIR Guidebook | Six chapters, including Mental Models, Explainability and Trust, Feedback and Control, and Errors and Graceful Failure |
Principles we applied
Calibrate trust
People should know when to rely on the AI and when to use their own judgment (PAIR). Tattva helps with sources, confidence labels, popups that show where an answer came from, and plain notices.
Prefer partial explanations
PAIR suggests short, partial explanations over complete ones. The popup that shows where an answer came from works in layers: a label first, details when asked.
Mark every instance of AI
Carbon asks for AI labels everywhere, styled to be useful. The assistant avatar, AIBadge and the source popup show the label as text, not color alone.
Make errors recoverable
Microsoft guidelines 7 to 11 ask for easy ways to start, dismiss and correct the AI, to do less when unsure, and to explain why. Retry, Discard, Revert and Rewind exist for this.
Show what really happened
Anthropic advises showing plans, showing the result of each step, and adding points where a person checks in and conditions that stop the work. PlanCard, ToolCallCard, PermissionPrompt and CheckpointList follow that.
Disclose consequences and cost
Cost estimates, credits and retries that count toward a usage limit are shown before the person commits.
Accessibility finding applied
Guidance for accessible AI chat says not to mark the text that is still arriving as a live region. A screen reader would read out every small change. Message now turns off live announcements while text is arriving. It announces one short status when the reply is done. The same guidance asks that the cursor stays in the message box after sending, and that the Stop button can still be reached by keyboard while the reply is written. Composer already does both.
Not built yet
Browser-agent live view with take-over
Reported for ChatGPT agent and Claude in Chrome, but our sources were search snippets and extension docs. It needs a real live-view screen, so design it with a product team.
Background task chip and needs-input inbox
Partly covered by AgentSessionList. Notifications and browser tab titles belong to the app that uses the library.
Group chats and persona pickers
Released by ChatGPT, Copilot, Grok and Character.ai. Our sources were mostly secondary, and the patterns are specific to each product.
Brush and mask editor, editing one part of an image
Seen in ChatGPT image editing, Photoshop and Figma Make. These need a drawing engine more than a component.
Compare slider, audio and video players
We found no primary source this time.
Workflow canvas (boxes joined by lines)
Vercel AI Elements has one. It is a separate kind of screen, so it is out of scope for now.
Apple, Salesforce, Atlassian, Adobe, Material and Fluent guidance
Pages could not be opened, or we did not look at them. They are still unreviewed.