Loading pattern preview
BlocksArtifacts
Agent Document Editor
Agent Document Editor
A Markdown document editor with AI built in. Select a passage and ask for a change: the rewrite streams into the document beside the struck original and stays pending until you keep or discard it. Optional suggestions as you type, and a history of checkpoints with word-level diffs and restore. ProseMirror, streamText, useCompletion.
Use this when people write and edit a document themselves and want the model to change the part they point at, with every AI edit reviewed in place and reversible. For an agent that writes a whole document from a chat, see agent-text-artifact.
Loading pattern preview
Problems solved
Technical challenges this implementation handles out of the box.
- Rewrite one passage of a document without the model resending the rest
- Review an AI edit inside the document before it changes anything
- Offer inline suggestions at the caret that never get in the way of typing
- Keep a history of who changed what, and restore any earlier state
Use cases
Products and workflows this pattern is designed to support.
- Document editors with AI rewriting
- Writing copilots
- Knowledge base and release note drafting
- Canvas-style editing next to an agent
Compare with
Similar patterns, and when each one is the better fit.
Agent Text ArtifactUse this when an agent should stream Markdown text into a document the user can edit in a rich editor next to the chat, with versions kept in memory.
Agent DOCX ArtifactUse this when your agent drafts documents that users must download as editable Word files, built client-side from Markdown streamed via a tool call.
Setup
Requirements, wiring steps, and what this pattern adds to your project.
Getting started
Pick how you want to pull this pattern in. Then wire env vars and routes the same way.
- 1
Download → Next.js app
Use Download → Next.js app in the preview toolbar. You get a zip scaffold (Pro downloads rewrite preview `/view/.../api/*` paths to `/api/*` automatically).
- 2
Extract the zip and install dependencies
Unzip the archive, then run `pnpm install` (or npm / yarn) in the project folder.
- 3
Fill .env.local
The download includes .env.local placeholders when needed. Add real values for: AI_GATEWAY_API_KEY.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions in the generated project for your product.
- 5
Run the app and open the pattern route
Run `pnpm dev`, open the setup/checklist page if present, then navigate to the generated pattern route and verify responses.
Environment variables
AI_GATEWAY_API_KEYGet key
Capabilities
AI SDK APIs
streamTextuseCompletiongatewayProviders
OpenAI
External services
Upstash
Files added
15 files
app/page.tsxapp/layout.tsxapp/api/document-rewrite/route.tsapp/api/document-complete/route.tscomponents/agent-document-editor.tsxcomponents/document-editor.tsxcomponents/inline-prompt.tsxcomponents/document-history.tsxlib/editor/markdown.tslib/editor/rewrite-plugin.tslib/editor/ghost-plugin.tslib/sample-document.tslib/rate-limit.tslib/request-utils.tsREADME.md
Dependencies
16 total
npm packages
14AISDK@base-ui/react@hugeicons/core-free-icons@hugeicons/reactUpstashmotionNext.jsprosemirror-example-setupprosemirror-markdownprosemirror-modelprosemirror-stateprosemirror-viewReactZod
Registry components
buttonswitch
Critical files
3 files
editor/rewrite-plugin.tsProseMirror plugin that holds a passage and draws a pending rewrite over it as decorations. The document is not changed until the rewrite is kept, so discard is free and undo stays clean.
components/document-editor.tsxThe ProseMirror view and its handle: hold a passage, stream a rewrite into it, keep it as one undoable step, and show a suggestion at the caret.
document-rewrite/route.tsstreamText route that rewrites one passage. Every instruction of the session is applied to the original passage, with the text around it sent as context only.
Requirements
- Complexity
- Intermediate
- Setup time
- ~8 minutes
- Node
- 24+
- Memory
- 256MB
Upstash Redis
