Standard

Artifact canvas

Substantial output moves out of the transcript into a durable side surface that can be edited and versioned.

MAsk MilkyNorthfield Dental renewal

Draft a renewal proposal for Northfield Dental.

Add pricing with the volume discount.

Renewal proposal

Renewal proposal for Northfield Dental

Northfield Dental has grown from 25 to 40 seats since last October. We'd like to renew your Business plan on 14 October with pricing that reflects that growth.

Pricing

At 40 seats you now qualify for our volume tier. Instead of the standard $38 per seat per month, we're offering $34 per seat per month. That comes to $16,320 a year and saves your practice $1,920 compared with this year's rate.

What's included

Priority support with a 4-hour response time
Onboarding for new staff, led by Maya Reyes
A quarterly account review with Leo Martin

Try it: Ask for a change. The proposal is edited in place as a new version, and the chat only gets a short receipt.

In the wild

How 2 products ship this pattern. Click a screenshot to enlarge it.

Gemini with the chat thread on the left and an editable speech document in a canvas pane on the right, with a formatting toolbar and Export to Docs button. — Gemini Canvas
The conversation stays on the left while the draft lives in its own editable pane, with formatting, version controls and export.
Source: Google blog, Mar 2025 (video still) ↗

Canva editor with a chat column holding prompts and 'Version 1' / 'Version 2' cards, next to a large live preview of a generated interior-design website — Canva Code
Chat stays in a narrow column while the generated site renders in the main canvas; each change is saved as a numbered version card you can reopen.
Source: Canva newsroom ↗

When to use

Documents, code, tables and designs — anything the conversation is about rather than made of.

Seen in

Claude Artifacts, ChatGPT Canvas, Gemini Canvas, Cursor editor pane.

For engineers

Version artifacts server-side with stable IDs; diff between versions rather than re-emitting whole.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Artifact canvas" pattern: `ArtifactCanvas`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
Substantial output moves out of the transcript into a durable side surface that can be edited and versioned.

Use it when: Documents, code, tables and designs — anything the conversation is about rather than made of.

## What to build
A side surface beside the conversation that holds one substantial artifact (a document, code file or table) with a stable identity, a version list, diffs, editing and export. The chat refers to versions instead of repeating the whole thing. It renders as a resizable pane next to chat, or a full-screen sheet on narrow screens.

### Props
- `artifact`: { id: string; title: string; kind: "document" | "code" | "table" }.
- `versions`: Array<{ id: string; number: number; createdAt: Date; author: "agent" | "human"; summary: string }>, e.g. "v2 · Wrote the Pricing section".
- `latestVersionId`: string, plus `viewingVersionId`: string and `onViewVersion(id: string)`.
- `content`: ReactNode, the version being viewed, and `diff?`: Array<{ type: "added" | "removed" | "same"; text: string }> against the previous version.
- `mode`: "view" | "edit" | "diff" and `onModeChange(mode)`.
- `status`: "idle" | "agent-writing" | "saving" | "error", with `writingSection?`: string naming where the agent is working.
- `onSaveEdit(content: string)`, `onRestore(versionId: string)`, `onExport(format: string)` and `onClose()`: callbacks. The component never persists versions itself.

### States it must render
- Latest: title, version number and content, with the version picker and Export in the header.
- Agent writing: the section being changed is marked with the AI accent and "Writing Pricing"; the rest stays readable.
- Older version: a banner "Viewing v1" with Back to latest and Restore.
- Diff: additions and removals since the previous version, marked with more than colour.
- Edited by a person: saving creates a new version authored by "You".
- Saving and error: a busy indicator; on error, unsaved edits stay in the editor with Retry.

### Interactions
- Picking a version calls `onViewVersion`; Back to latest returns to `latestVersionId`.
- Restore calls `onRestore`, which creates a new version from the old one; nothing is deleted.
- Edit switches to an editor; Save calls `onSaveEdit`; Escape cancels after confirming if there are changes.

### Edge cases
- The person edits while the agent is writing: the agent's change waits and a banner offers to review it, so neither overwrites the other.
- Many versions: the picker lists newest first with summaries and stays scrollable.
- Under 640 px the canvas opens as a sheet with a Back to chat control that keeps the viewed version.
- A diff too large to show inline collapses unchanged runs ("12 unchanged lines").

## Must avoid
Long deliverables trapped in chat scroll, where every revision creates another buried copy.

## Engineering constraint
Version artifacts server-side with stable IDs; diff between versions rather than re-emitting whole.

## Accessibility
- The canvas is a `region` labelled with the title and version; announce new versions once ("v3 ready").
- Opening the canvas moves focus to its heading; closing returns focus to the reference that opened it.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for generative ui

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Does generated UI stay inside your design system's vocabulary?
Can the agent only pick components you built and typed?
Is the generated surface addressable — linkable, savable, reviewable?
Does layout stay stable while content streams in?