Story
When I need help in the middle of my work, I want 1 clear button that opens the AI, already looking at what I am working on, so I can ask without hunting or explaining again.
Inês, the office manager at a dental clinic in Lisbon, fixing the night rota on her laptop.
- 01 Setting
Inês is checking the March rota for 4 nurses in a shared doc.
- 02 Trigger
Something looks wrong. She wants the AI to count the nights.
- 03 Without it
3 sparkle icons sit on different buttons. She tries 2 before 1 opens a blank chat. Then she has to describe the rota.
- 04 With it
A button named "Ask AI" sits top right. It opens beside the rota, already looking at it.
- 05 Outcome
She asks 1 short question and learns Ana has 3 nights too many.
Live demo
This demo follows a script, so it plays the same every time - there is no real AI behind it. Change a setting to see the same moment play out differently.
What happens, step by step
| State | The person sees | The AI is | When | Screen reader |
|---|---|---|---|---|
| 1 | The work, with 1 "Ask AI" button in the same place on every page. | Idle. | always there | - |
| 2 | The button has a sparkle and a name. Hover or focus shows the shortcut. | Idle. | - | - |
| 3 | The assistant opens beside the page with a chip: "Looking at: Rota - March". | Ready, with the page as context. | on tap or shortcut | “Assistant opened” |
| 4 | A short ask, because the page is already shared. | Idle. | - | - |
| 5 | The answer streams into the panel (it arrives word by word). The page stays visible. | Writes. | - | “Generating a response” |
| 6 | The answer, next to the work it is about. The same button closes the panel. | Idle. | when done | “Response complete” |
On each device
- phone
- The button sits in the top bar with its name, 44 px tall. It opens the assistant as a sheet from the bottom, with the page still visible above.
- tablet
- As on desktop when the screen is wide; as on the phone in portrait split view.
- desktop
- The button sits top right on every page, with a keyboard shortcut. The assistant opens as a side panel, so the work stays in view.
When to use it
- The AI is 1 helper that works across many pages or tools in the product.
- People need to find the AI quickly, often in the middle of other work.
- What the person is looking at is useful context for the AI.
- The AI does 1 small job on 1 thing, like rewriting the selected text - put the action right there. Use Inline action on selection instead.
- The whole product is the chat, so there is no other page to open it from. Use Prompt composer instead.
- People need to know what the AI can do before they use the door. Use Capability disclosure instead.
The parts of the pattern
- AThe doorA sparkle plus a name, "Ask AI", in the same place on every page. Pressed while open.
- BPanel headerThe assistant's name, the shortcut, and a close button.
- CContext chipSays what the AI is looking at. People can remove it.
- DThe boxA placeholder that matches the context: "Ask about this rota".
Do and Avoid
Rota - March✦ Ask AI
B I ≡
Mon · Ana · Rui · Marta
Rota - March ✦✦
B I ≡ ✦
Mon · Ana · Rui · Marta ✦
✦ Assistant
Looking at: Rota - March
Ask about this rota
✦ Assistant
How can I help?
Ask anything
Writing and accessibility
- Give the button a name with a verb: "Ask AI" or the assistant's name. Not a sparkle alone.
- Use the same name on every page, in the panel header, and in help.
- Say what the AI is looking at in plain words: "Looking at: Rota - March".
- The button's accessible name (what a screen reader calls it) matches its visible label. So voice control users can say "Click Ask AI".
- The button tells screen readers whether the panel is open (with aria-expanded). It is at least 44 px on touch screens.
- Opening moves focus into the panel's box. Closing returns focus to the button.
- The keyboard shortcut is listed in the button's tooltip and in help. It does not clash with the product's own shortcuts.
Seen in real products
- Notion AIWeb and desktop · Nov 2026Notion AI opens from a round icon in the bottom-right corner of every page, from the left sidebar under Search, or with Shift + Cmd + J on desktop.Notion Help: Everything you can do with Notion AI ↗
- Gemini in GmailWeb · Nov 2026People click "Ask Gemini" at the top right of Gmail to open a side panel with a prompt box at the bottom.Gmail Help: Collaborate with Gemini in Gmail ↗
- Copilot in WordWord · Sep 2026In a blank document or at the spot where new text should go, people open Copilot from the bottom-right corner and describe what to write.Microsoft Support: Draft and add content with Copilot in Word ↗
Each example comes from the product’s help pages, release notes or teardowns, with the month it was checked. Products change every month - tell us when 1 is out of date.
Check yourself
Seen this pattern done better, or a product that changed? Press Suggest next to any heading, or tell us about the whole page.