Loading pattern preview
Loading preview…
PatternsArtifacts
Agent Code Artifact
Agent Code Artifact
Template-style code artifact with data-codeDelta streaming, CodeMirror Python editor, Pyodide run, 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 Python code updates with data-codeDelta UI parts
- Edit code in a CodeMirror editor with Pyodide run support
- Keep code versions in memory without database persistence
- Update the artifact from agent tools and quick prompts
Use cases
Products and workflows this pattern is designed to support.
- Python coding copilots in chat
- Runnable notebook-style demos
- Teaching code artifacts with Pyodide
- In-browser code editors for agents
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
19 filesapp/page.tsxapp/layout.tsxapp/api/agent-code-artifact/route.tscomponents/agent-code-demo.tsxcomponents/code-artifact-tool.tsxcomponents/code-artifact-panel.tsxcomponents/code-editor.tsxcomponents/console.tsxcomponents/data-stream-provider.tsxcomponents/data-stream-handler.tsxcomponents/empty-state.tsxhooks/use-artifact.tsxlib/types.tslib/create-artifact.tslib/code-artifact.tsxlib/artifacts.tslib/rate-limit.tslib/request-utils.tsREADME.md
Dependencies
18 totalnpm packages
14AISDK@codemirror/lang-python@codemirror/state@codemirror/theme-one-dark@codemirror/viewUpstashcodemirrordate-fnslucide-reactNext.jsReactsonnerusehooks-tsZod
Registry components
buttondraweremptytooltip
Critical files
lib/code-artifact.tsxDefines codeArtifact with onStreamPart for data-codeDelta, CodeMirror content, Pyodide Run, and toolbar actions.
agent-code-artifact/route.tscreateUIMessageStream merges streamText with updateCodeDocument tool; emits data-id, data-title, data-kind, data-codeDelta, data-finish.
Requirements
- Complexity
- Intermediate
- Setup time
- ~8 minutes
- Node
- 24+
- Memory
- 256MB
