Explore topics

Topic

AI Artifacts

Chat text is rarely the deliverable. These patterns make the agent produce the thing itself: a formatted spreadsheet, a paginated PDF report, a Word document, a slide deck, an interactive chart. One family renders artifacts in-app next to the conversation; the json-render family generates typed UI, emails, PDFs, and even Remotion video from a single JSON schema. These are the most-copied patterns on the site — start with the spreadsheet artifact and adapt the pipeline to your format.

20 patterns8 featured
Open featured previewSee pricing

Featured patterns

A curated starting point for this topic — open a live preview, then adapt the source.

8 curated
Agent XLSX Artifact preview
01Intermediate

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.

  • Stream workbook CSV from an agent tool call
  • Preview tabular output before download
  • Export a real .xlsx file client-side with SheetJS
streamTextcreateUIMessageStreamgatewayai
Open live preview
Agent PDF Artifact preview
02Intermediate

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.

  • Stream Markdown as the source for a PDF artifact
  • Render a live PDF preview while content updates
  • Export a real .pdf file client-side from streamed Markdown
streamTextcreateUIMessageStreamgatewayai
Open live preview
Agent DOCX Artifact preview
03Intermediate

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.

  • Stream Markdown as the source for a Word artifact
  • Preview document content before download
  • Export a real .docx file client-side from streamed Markdown
streamTextcreateUIMessageStreamgatewayai
Open live preview
Agent Sheet Artifact preview
04Intermediate

Agent Sheet Artifact

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

  • 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
streamTextcreateUIMessageStreamgatewayai
Open live preview
Chart Artifact preview
05Advanced

Chart Artifact

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

  • Generate burn-rate chart artifacts from financial chat requests
  • Stream progressive chart data while analysis runs
  • Compute runway and expense insights alongside the visualization
streamTextconvertToModelMessagestool(ai
Open live preview
CSV Editor Artifact preview
06Intermediate

CSV Editor Artifact

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

  • Import and normalize CSV data for an interactive spreadsheet
  • Edit tabular data through a spreadsheet artifact UI
  • Analyze spreadsheet contents with an AI assistant
streamTexttools:convertToModelMessagesai
Open live preview
Agent Slides Artifact preview
07Intermediate

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.

  • Stream slide deck JSON with data-slidesDelta UI parts
  • Edit and preview slides in a sortable deck UI
  • Export deck content as Markdown
streamTextcreateUIMessageStreamgatewayai
Open live preview
JSON Render Shadcn preview
08Intermediate

JSON Render Shadcn

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

  • Build UIs from natural-language prompts with json-render
  • Stream AI-generated component specs into a live preview
  • Render shadcn components from a constrained catalog
streamTextgatewayjson-rendershadcn
Open live preview

More patterns

Additional patterns that fit this topic.

12 more
01
JSON Render EmailGenerate production-ready React Email templates with live preview plus copyable HTML and plain-text output.
02
JSON Render Three.jsAI-generated 3D scenes using @json-render/react-three-fiber. Describe environments, meshes, and lighting to stream live Three.js renders you can orbit immediately.
03
JSON Render Data TableAI-generated data tables using json-render. Describe columns, rows, sorting, and filters — stream specs into an interactive DataTable with toolbar satellites.
04
Agent Text ArtifactTemplate-style text artifact with data-textDelta streaming, ProseMirror Markdown editor, in-memory versions, and quick prompts — no database persistence.
05
Agent Code ArtifactTemplate-style code artifact with data-codeDelta streaming, CodeMirror Python editor, Pyodide run, in-memory versions, and quick prompts — no database persistence.
06
Agent Mermaid ArtifactTemplate-style Mermaid artifact with data-mermaidDelta streaming, diagram preview and source editor, SVG/PNG export, in-memory versions, and quick prompts — no database persistence.
07
Agent Map ArtifactTemplate-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.
08
Canvas Draw ArtifactExcalidraw 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.
09
JSON Render ReactAI-generated UI from natural language using @json-render. Describe a UI and watch it stream in progressively with shadcn components.
10
JSON Render PDFGenerate 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.
11
JSON Render ImageGenerate social cards and marketing images from natural language using @json-render/image with live spec streaming and SVG/PNG export.
12
JSON Render RemotionAI-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.

Related topics

Continue with adjacent topics that share the same building blocks.

AI Chat Components

10

Production React components for AI chat: message threads, streaming responses, reasoning displays, source citations, tool approval cards, and chat input. Tailwind-styled, copy-paste ready.

Explore topic

AI Image Generation

9

Generate and edit images in TypeScript with the AI SDK: fal.ai models, Gemini Flash image generation, image editing and merging, and brand-consistent image pipelines. Working code + previews.

Explore topic

AI Agent Tools

22

Give agents real capabilities: tool() definitions with lifecycle hooks, dynamic tools, tool-call repair, web search (Exa, Firecrawl), scraping, PDF ingestion, and human approval gates.

Explore topic

Browse by category

Jump into the catalog filtered by category.

Artifacts

You’ve reached the end of AI Artifacts.