Loading pattern preview
Loading preview…
PatternsArtifacts
Agent Sheet Artifact
Agent Sheet Artifact
Template-style sheet artifact with data-sheetDelta streaming, CSV grid editor, in-memory versions, and quick prompts — no database persistence.
Loading pattern preview
Loading preview…
Problems solved
Technical challenges this implementation handles out of the box.
- Stream tabular CSV updates with data-sheetDelta UI parts
- Edit sheet content in a CSV grid artifact panel
- Keep version history in memory without database persistence
- Drive sheet updates from agent tool calls and quick prompts
Use cases
Products and workflows this pattern is designed to support.
- Chat spreadsheet prototypes
- Budget and forecast sheet copilots
- In-browser CSV artifact demos
- Vercel-style sheet artifact templates
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
Install from the preview toolbar
Copy the install command above and run it in your project — Pro patterns include a short-lived token.
- 2
Add environment variables to .env.local
AI_GATEWAY_API_KEY, UPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN
- 3
Point client fetches at your API routes
Replace preview `/view/.../api/...` paths with `/api/...` in the installed files.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions for your product — Copy for AI in the toolbar helps seed that work.
- 5
Run your dev server and open the pattern route
Install dependencies if needed, then start the app and verify responses.
Environment variables
Capabilities
AI SDK APIs
streamTextcreateUIMessageStreamgatewaytoolProviders
OpenAI
External services
Upstash
Files added
18 filesapp/page.tsxapp/layout.tsxapp/api/agent-sheet-artifact/route.tscomponents/agent-sheet-demo.tsxcomponents/sheet-csv-tool.tsxcomponents/sheet-artifact-panel.tsxcomponents/spreadsheet-editor.tsxcomponents/data-stream-provider.tsxcomponents/data-stream-handler.tsxcomponents/empty-state.tsxhooks/use-artifact.tsxlib/types.tslib/create-artifact.tslib/sheet-artifact.tsxlib/artifacts.tslib/rate-limit.tslib/request-utils.tsREADME.md
Dependencies
20 totalnpm packages
11AISDKUpstashdate-fnslucide-reactNext.jspapaparseReactreact-data-gridsonnerusehooks-tsZod
Registry components
badgebuttoncollapsibledraweremptyinput-groupscroll-areatextareatooltip
Critical files
lib/sheet-artifact.tsxDefines sheetArtifact with onStreamPart for data-sheetDelta, SpreadsheetEditor content, actions, and toolbar.
agent-sheet-artifact/route.tscreateUIMessageStream merges streamText with updateSheetCsv tool; emits data-id, data-title, data-kind, data-sheetDelta, data-finish.
Requirements
- Complexity
- Intermediate
- Setup time
- ~8 minutes
- Node
- 24+
- Memory
- 256MB
