Artifacts

Structured AI outputs and visualizations

3 subcategories20 patterns

Formats

Interactive data visualizations and editors

12 patternsView →

Static

Static content outputs and documents

0 patternsView →

JSON Render

AI-generated UI from natural language with json-render

8 patternsView →

All Artifacts patterns

Browse every production-ready pattern in Artifacts.

Canvas Draw Artifact

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.

aiexcalidraw+6

View pattern →

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.

aipython+5

View pattern →

Agent DOCX Artifact

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

aiword+6

View pattern →

Agent Map Artifact

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.

aimap+6

View pattern →

Agent Mermaid Artifact

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.

aimermaid+5

View pattern →

Agent PDF Artifact

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

aipdf+5

View pattern →

Agent Sheet Artifact

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

aispreadsheet+5

View pattern →

Agent Slides Artifact

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.

aislides+5

View pattern →

Agent Text Artifact

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

aimarkdown+4

View pattern →

Agent XLSX Artifact

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.

aiexcel+6

View pattern →

Chart Artifact

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

aiartifacts+5

View pattern →

CSV Editor Artifact

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

aitable+7

View pattern →

JSON Render Email

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

json-renderreact-email+3

View pattern →

JSON Render React

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

json-renderai+3

View pattern →

JSON Render Image

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

json-renderimage+3

View pattern →

JSON Render PDF

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.

json-renderpdf+3

View pattern →

JSON Render Remotion

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.

json-renderremotion+3

View pattern →

JSON Render Shadcn

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

json-rendershadcn+3

View pattern →

JSON Render Data Table

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

json-renderdata-table+3

View pattern →

JSON Render Three.js

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.

json-renderthreejs+3

View pattern →

Explore related categories

Chat UI Elements

Reusable AI chat UI components and interfaces

10 patternsView →

Marketing UI

Business-focused UI components and pages

16 patternsView →

UI Components

Pure UI components without AI functionality

0 patternsView →

You’ve reached the end of Artifacts.