Overview
How might we design ai context menu so people can trust and act on AI output?
When this pattern fits
- Ideal for reading applications, browsers, and content platforms where contextual AI actions enhance user interaction without disrupting the reading experience.
When to skip or lighten it
- Read-only previews where actions cannot apply.
- Selections that are too small to be meaningful.
- Apps that already dedicate primary chrome to the same actions.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Menus with twenty vague AI verbs.
Actions that rewrite far beyond the selection without preview.
No keyboard access to the same actions.
Context menus that steal OS-native copy/paste items.
How products use it
| Product | Implementation |
|---|---|
| Notion | AI actions on selected blocks via menu. |
| Arc / Chromium browsers | Selection menus that send text to AI features. |
| Microsoft Edge | Compose and explain actions on page selections. |
| Google Docs | Help me write on highlighted text. |
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "AI Context Menu" AI interface design pattern.
Pattern Definition:Frequently asked questions
What belongs in an AI context menu?
A short list of high-value actions for the selection type (rewrite, summarize, comment) plus a custom instruction entry.
How does this differ from magic edit?
Magic edit is the transform pattern itself. The context menu is the discovery surface that launches those transforms.
Should results open in chat or inline?
Prefer inline preview for edits; open chat when the user needs multi-turn follow-up.
Accessibility requirement?
Every mouse-only AI action needs a keyboard path and visible focus.