AI Interaction Patterns

Patterns and components for designing with, and for, AI.

During my time at Meta, AI became central to how our products worked. As workflows became more agent-driven and less deterministic, we needed a shared interaction model teams could build from. These are the patterns I owned and helped build in the Risk org, from the interaction model to the components other teams now build from.

Patterns

{{ pTitle }}

{{ pLead }}

{{ pBody }}

Demo

An interactive walkthrough of the pattern. Try the demo to explore it full screen.

Purpose

Canvas Mode is a full-screen workspace overlay that activates when a task exceeds the capacity of inline widgets. It enables:

AI + human co-creation
Complex multi-step workflows where AI analysis and human judgment work together: sequential decision-making, side-by-side comparison, and multi-object orchestration.
Clear decision-making workflows
Structured workspaces where users see the complete picture, all related objects, dependencies, and impacts, before committing to a decision.
Full traceability of changes
Every edit, approval, and decision is captured over time, creating a complete audit trail for policies, requirements, and assessments.
It bridges
Intent & Reasoning(thread)
Structured State & Actions(UI)

When it should be used

Canvas Mode should activate when the task complexity exceeds what inline widgets can handle. Use these signals to determine when to trigger canvas.

USE WHEN
The task requires:
  • Comparing multiple items side by side
  • Working through several connected steps or decisions
  • Creating or editing complex artifacts like policies, assessments, or requirements
The user needs to:
  • See the full context before making a decision
  • Edit several related fields or objects
  • Coordinate work across multiple pieces of information
Canvas should activate when:
  • An inline widget can no longer contain the task clearly
  • The AI recognizes that the workflow needs dedicated tools or a larger workspace
DON'T USE WHEN
  • A single inline widget is enough
  • The user only needs to review or acknowledge something
  • The action is a simple confirm or reject
  • The conversation already provides enough context to complete the task

Anatomy of Canvas Mode

A consistent structure helps complex workflows scale while keeping the user oriented, informed, and connected to the decisions behind the work.

Core Components
ThreadWhere intent and decisions live. The conversation keeps a persistent record of user requests, AI reasoning, approvals, and system events.
Structured workspaceWhere the work gets done. Users can inspect, edit, and review the current or proposed state through structured UI.
HistoryWhere change becomes traceable. Users can compare versions, see who changed what, and connect each update back to the conversation behind it.

Canvas mode triggers

Canvas Mode is a separate workspace overlay triggered by workflow requirements. Five categories of triggers determine when canvas activates.

GovernanceWhen the work needs formal review or accountability.
  • Approvals and maker-checker flows
  • Formal attestations
  • Creating new requirements
  • Interpreting regulatory guidance
AuditabilityWhen users need a clear record of what changed and why.
  • Reviewing audit logs
  • Comparing versions
  • Exporting evidence for audits
EditingWhen the task requires more than a quick conversational update.
  • Editing multiple fields
  • Saving drafts and validating changes
  • Amending requirements
CollaborationWhen the work involves multiple people or teams.
  • Assigning reviewers
  • Comments and @mentions
  • Coordinating across teams
Information densityWhen there is too much context for a narrow chat interface.
  • Viewing information side by side
  • Working through long, scroll-heavy content
  • Cross-referencing multiple documents

Purpose

Inline widgets are the atomic interaction units of an AI-first system. They bring the right information, controls, and actions directly into the conversation so users can understand, decide, and act without leaving the thread.

Understand the system
Surface the information users need to understand what happened, what changed, or what requires attention.
Ask contextual questions
Keep questions and follow-up interactions connected to the work already in progress.
Take action without leaving the thread
Let users review, edit, confirm, or continue work without switching to a separate surface.
They bridge:
AI Reasoning
Structured Data
User Interaction

When it should be used

Use inline widgets when the AI needs to present structured information or a focused action directly in the conversation.

USE WHEN
  • A specific object, field, or result needs to be shown
  • The AI is presenting structured context, a recommendation, or a proposed change
  • The user needs to inspect, edit, confirm, or take one focused action
  • The task can be completed without leaving the thread
DON'T USE WHEN
  • Plain text fully answers the question
  • The action is a simple yes/no with no supporting context
  • The task needs a larger workspace, multiple steps, or deeper navigation
  • The user is browsing or exploring rather than completing a focused task

Anatomy of Object Widget

Each inline widget represents a focused unit of information or action, combining structured content, AI context, and lightweight interaction directly in the thread.

Core Components
StateShows the current value, proposed value, or relevant system status.
AI ContextExplains what matters, why it matters, or what the AI recommends.
Structured ContentPresents the object, field, result, or comparison in a clear, bounded format.
ActionsLets the user inspect, edit, select, confirm, or continue the workflow.

Variants

The Object Widget ships in several task-specific variants, each tailored to a distinct interaction pattern. All variants share the same anatomy but adapt their body content and actions.

1. Informational Widget
Gives users the context they need without asking them to make a decision.
User goalUnderstandPurposeExplain, summarize, confirm, or show statusInteractionRead and exploreTriggerAI completes an analysis, lookup, or status check
Gap analysisCompleted Gap Analysis for GDPR Article 17
I've completed the gap analysis for GDPR right to erasure controls. No gaps were found.View full Gap Analysis
2. Recommendation Widget
Helps users make a decision by presenting a recommended path, alternatives, and their tradeoffs.
User goalDecidePurposeRecommend a course of actionInteractionCompare, select, or adjustTriggerAI identifies multiple valid paths that require user judgment
Obligation responseReview response options
I found three ways to address the Online Data Minimization: Minors obligation.
RecommendedSelected
Full scope expansionLowest residual risk
Covers algorithmic systems and user misuse across Instagram, Facebook, Threads, and WhatsApp.
Why this is recommendedAddresses the full obligation without leaving known gaps.
{{ dr.k }}{{ dr.v }}
Other options
{{ ra.title }}{{ ra.risk }}{{ ra.desc }}
Selected
{{ dr.k }}{{ dr.v }}
3. Editable Widget
Lets users review and update AI-generated or system-provided content directly in the conversation before it is committed.
User goalRefinePurposeReview and refine structured contentInteractionEdit, validate, and confirmTriggerThe AI needs human input or verification before continuing
Risk ReviewReview AI-generated project summary
I created this summary from your linked documentation. Review it before continuing.
Project contextReels RSVP Ads is a new interactive advertising format on Meta's Reels platform that allows users to respond directly to event invitations or promotions within short-form video ads.New functionality
  • In-Ad RSVP Button: Users can tap an RSVP button embedded directly in the Reels ad to confirm attendance.
  • Multi-Option RSVP Responses: Advertisers can offer multiple response options such as "Going," "Interested," or "Maybe."
  • Event Details Overlay: When users tap the RSVP button, a lightweight overlay appears with key event details.
Review sources5 linked
Edit summaryConfirm and continue
4. Comparison / Diff Widget
Shows what changed between the current and proposed state so users can review the impact before confirming an update.
User goalValidatePurposeCompare and validate changesInteractionReview, acknowledge, submitTriggerA proposed change needs human verification before it is applied
5. Review Proposal Widget
Surfaces a detected risk or issue, explains its impact, and proposes a corrective action for the user to review.
User goalResolvePurposeResolve a flagged issueInteractionReview, apply, or proceed with riskTriggerThe system detects an error, warning, or safety concern that requires human review
Change safety reviewErrorReview proposal: Deletion ControlI reviewed the flagged risk on Deletion Control in CHR123. Here is what I found and the fix I recommend.
What happenedA high-risk change would trigger deletion of existing data.
Why it mattersAbout 500K assets could be deleted at once, including records under legal hold.
Proposed fixPhase the deletion over 14 days and exclude legal-hold records.
Proceed with riskApply fix