AI SDK Patterns

Download-first Word artifact pattern. The agent streams Markdown through a tool call, renders a document preview, and exports a real .docx file.

Download-first PDF artifact pattern. The agent streams Markdown through a tool call, renders a live PDF preview, and exports a real .pdf file.

Download-first Excel artifact pattern. The agent streams CSV through a tool call, renders a spreadsheet preview, and exports a real .xlsx file with SheetJS.

Excalidraw whiteboard artifact with data-whiteboardDelta streaming, uncontrolled canvas, SVG/PNG/.excalidraw export, scene templates (architecture, user flow, org chart), and in-memory versions — no database persistence.

Template-style GeoJSON map artifact with data-mapDelta streaming, MapLibre preview and JSON source editor, GeoJSON export, in-memory versions, and quick prompts — no database persistence.

Template-style Mermaid artifact with data-mermaidDelta streaming, diagram preview and source editor, SVG/PNG export, in-memory versions, and quick prompts — no database persistence.

Template-style slide deck artifact with data-slidesDelta streaming, sortable slide list and preview, Markdown export, in-memory versions, and quick prompts — no database persistence.

Template-style code artifact with data-codeDelta streaming, CodeMirror Python editor, Pyodide run, in-memory versions, and quick prompts — no database persistence.

Template-style sheet artifact with data-sheetDelta streaming, CSV grid editor, in-memory versions, and quick prompts — no database persistence.

Template-style text artifact with data-textDelta streaming, ProseMirror Markdown editor, in-memory versions, and quick prompts — no database persistence.

AI-generated data tables using json-render. Describe columns, rows, sorting, and filters — stream specs into an interactive DataTable with toolbar satellites.

Generate production-ready React Email templates with live preview plus copyable HTML and plain-text output.

AI-generated 3D scenes using @json-render/react-three-fiber. Describe environments, meshes, and lighting to stream live Three.js renders you can orbit immediately.

Generate social cards and marketing images from natural language using @json-render/image with live spec streaming and SVG/PNG export.

AI-generated video from natural language using @json-render/remotion. Describe a video and watch it stream in as a timeline spec, then render in a Remotion Player.

AI-generated UI from natural language using @json-render. Describe a UI and watch it stream in progressively with shadcn components.

Generate PDF documents from natural language using @json-render/react-pdf. Describe a document or refine examples to create professional PDFs with streaming spec and live preview.

AI-generated UI using @json-render/shadcn. Describe a UI in natural language and watch it render with shadcn components.

Generate burn rate charts and financial analysis through AI chat. Creates interactive visualizations from conversation.

Spreadsheet editor with AI chat for data analysis and manipulation. Edit tables through conversation.