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.

21 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
Intermediate

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.

streamTextcreateUIMessageStreamai
PatternView
Agent PDF Artifact preview
Intermediate

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.

streamTextcreateUIMessageStreamai
PatternView
Agent DOCX Artifact preview
Intermediate

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.

streamTextcreateUIMessageStreamai
PatternView
Agent Sheet Artifact preview
Intermediate

Agent Sheet Artifact

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

streamTextcreateUIMessageStreamai
PatternView
Chart Artifact preview
Advanced

Chart Artifact

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

streamTextconvertToModelMessagesai
PatternView
CSV Editor Artifact preview
Intermediate

CSV Editor Artifact

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

streamTexttools:ai
PatternView
Agent Slides Artifact preview
Intermediate

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.

streamTextcreateUIMessageStreamai
PatternView
JSON Render Shadcn preview
Intermediate

JSON Render Shadcn

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

streamTextgatewayjson-render
PatternView

More patterns

Additional patterns that fit this topic.

13 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 via @aisdkagents/react DataStreamController + ArtifactSession, 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.
13
Jev JSON RenderCompose an account settings form by letting Jev select prepared json-render candidates.

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.

TopicExplore

AI Image Generation

10

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

TopicExplore

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.

TopicExplore

Browse by category

Jump into the catalog filtered by category.

Artifacts

You’ve reached the end of AI Artifacts.