Story
When the AI makes something I will keep - a document, some code - I want it in its own space beside the chat, so I can read and change it without scrolling through the conversation.
Maya, a product marketer, drafting a launch email on her laptop and checking it on her phone.
- 01 Setting
Maya asks for a short launch email.
- 02 Trigger
The draft is 5 paragraphs. She will change it many times.
- 03 Without it
Every change prints the whole email again in the chat. She scrolls to find the latest.
- 04 With it
The email opens beside the chat. Her follow-up changes it in place, and the change is marked.
- 05 Outcome
1 email, always the latest, with version 1 still there if she wants it.
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 ask, in the chat. | Starts work. | 0 s | - |
| 2 | A card with the title, the kind and the version stands in for the output. | Writes. | - | “Generating a response” |
| 3 | When the pane does not open by itself, the card opens it. | Writes. | on tap | - |
| 4 | Desktop: the pane slides in beside the chat. Phone: a full sheet, with a way back to the chat. | Fills the pane. | about 200 ms | “Draft opened” |
| 5 | The chat stays usable. The person asks for a change. | Idle. | - | - |
| 6 | The changed part is marked, the version goes up, and Show changes appears. | Edits the output, not the chat. | - | “Version 2 saved” |
| 7 | Closing the pane returns to the same place in the chat. The card shows version 2. | Idle. | on close | - |
On each device
- phone
- A full-screen sheet. The composer (the box where you type) stays at the bottom, with a clear way back to the chat. Never a squeezed split view.
- tablet
- Beside the chat in landscape. In portrait, a sheet from the bottom that can be dragged to full height.
- desktop
- Beside the chat, about half the width or more. The chat narrows but stays readable. A close button sits in the pane header.
When to use it
- The output is something people keep and change: a document, code, a table, a design.
- The output is longer than about 10 lines, or wider than the chat column.
- People will ask for several changes to the same thing.
- The answer is short and read once - keep it in the chat. Use Streaming response instead.
- The output is a small interactive card - a chart, a booking - that fits in the thread. Use Generative UI and structured output instead.
- People need to watch an agent (an AI that takes actions for you) work, not read its output. Use Agent workspace and management instead.
The parts of the pattern
- ACard in chatStands in for the output in the thread - title, kind, version - and reopens it.
- BPane headerThe title and version, so people know which output and which version they are in.
- CThe outputEdited in place. Changes are marked, not rewritten from scratch.
- DThe composerStays available, so follow-ups change the output while it is open.
- ECloseReturns to the same place in the chat.
Do and Avoid
‹ Chat
Launch email
Today we’re launching the new Daybook app…
Ask for a change
Here’s what changed since the beta.
Early users get 3 months free.
v2 · 1 change
Here is the updated email:
Subject: Our new app is here. Hi Maya…
The 3rd full copy in the chat
Writing and accessibility
- Give every output a short, real title - "Launch email", "price.ts" - not "Untitled" or "Artifact".
- Show the version as "v2" in the header, and say what changed in 1 line: "1 change · Show changes".
- In the chat, say where the output is: "It is open beside the chat."
- The pane is a labelled region (a named part of the page a screen reader can jump to), with aria-labelledby pointing at its title. On a phone, the sheet is a dialog with a visible close.
- Opening the pane moves focus to its title; closing returns focus to the card that opened it.
- Announce saves once: "Version 2 saved".
- Marked changes use a background and text, not colour alone.
Seen in real products
- ChatGPT canvasWeb, Windows and macOS · Oct 2026Canvas opens as a right-side window, by itself for longer answers or when asked. The help page lists mobile as "coming soon".OpenAI Help: Canvas ↗
- ClaudeWeb, desktop and apps · Oct 2026Artifacts open in a dedicated window, and the mobile apps can create and view them.Claude blog: Artifacts ↗
- Microsoft 365 Copilot appsWeb and desktop · Jun 2026Apps show inline first, with an optional side-by-side mode. When the side panel opens, the inline card collapses into a small "chiclet".Microsoft Learn: MCP Apps UI guidelines ↗
- Gemini CanvasAndroid · Jul 2025On mobile, web-code previews opened in a Chrome tab while an in-app preview was tested; the experience was described as "cramped".Android Authority, Jul 2025 ↗
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.