Claude Artifacts: Complete Guide and Use Cases (2026)

Claude Artifacts transforms AI output from read-only text into a live, editable workspace. Launched in June 2024 alongside Claude 3.5 Sonnet, the feature places generated code, documents, and interactive applications in a dedicated side panel. Rendered, interactive, and ready to iterate on, without leaving the conversation.

The practical difference is significant. When Claude generates a 200-line React component inline in the chat, you get static text you have to copy, paste, and run elsewhere. When it generates an artifact, the component renders immediately in a side panel. You click buttons, see results, and ask Claude to modify specific parts. No context switching. No build step.

Since launch, users have created tens of millions of artifacts. This guide covers the complete workflow: understanding artifact types, writing prompts that trigger them effectively, iterating inside the artifact panel, and using advanced capabilities including AI-powered artifacts, Model Context Protocol integrations, and community publishing.

What Are Claude Artifacts

An artifact is a piece of rendered output (code, a document, a visualization, an interactive application) that Claude creates in a dedicated side panel rather than inline in the conversation. Three conditions determine when Claude routes output to the artifact panel:

• The content is self-contained and substantial, typically over 15 lines
• You're likely to want to edit, iterate on, or reuse it outside the conversation
• The content stands on its own without requiring the surrounding chat context to make sense

When all three apply, Claude creates an artifact automatically. You can also prompt it explicitly: "Create this as an artifact" if the default behavior doesn't trigger.

Artifacts are available on all Claude plans (Free, Pro, Max, Team, and Enterprise) and on both the web interface and the iOS and Android mobile apps. Advanced features like persistent storage require Pro, Max, Team, or Enterprise plans.

The 5 Types of Artifacts Claude Can Create

Claude produces five distinct artifact types. Knowing which to ask for changes both what's possible and how you should structure your prompt.

1. HTML and Web Pages

Single-page HTML, multi-page website structures, and interactive web components. Claude can access libraries from the Cloudflare CDN, which means fully styled pages with external dependencies are possible. Best for landing pages, forms, and UI prototypes.

2. React Components

Functional React components with hooks, state management, and third-party libraries including Recharts, Three.js (r128), D3, Plotly, Lucide, and shadcn/ui components. React artifacts render live in the panel, so you can click dropdowns, fill inputs, and see state changes in real time. Best for interactive dashboards, calculators, and UI tools.

3. SVG Graphics

Scalable vector graphics: logos, icons, diagrams, and illustrations. SVG artifacts are resolution-independent, which makes them export-ready at any size. Ask Claude to modify colors, paths, or typography in natural language and the graphic updates immediately.

4. Markdown Documents

Reports, README files, documentation, and long-form structured content. Markdown artifacts render with proper heading hierarchy, tables, and code blocks. The rendered view and the raw markdown are both accessible via the preview/code toggle.

5. Code Files

Python scripts, SQL queries, configuration files, shell scripts, and code in any other language Claude knows. Code artifacts support syntax highlighting and are easy to copy or download. But they do not execute. To run code, ask for an HTML artifact with embedded JavaScript instead.

One artifact type worth knowing: Mermaid diagrams. Claude can generate flowcharts, sequence diagrams, Gantt charts, and entity-relationship diagrams as rendered Mermaid artifacts, which is faster than building them in dedicated diagramming software.

Step 1: Enable Artifacts and Navigate the Interface

Artifacts ship enabled by default on new Claude.ai accounts. If the artifact panel isn't appearing, check your settings: go to Settings in the Claude interface and confirm the Artifacts toggle is on. Team and Enterprise administrators can manage this at the organization level, so if the setting is grayed out, check with your admin.

The artifact panel has three functional areas:

At the top, a toggle switches between Preview (rendered output) and Code (raw source). The preview mode shows how your artifact looks and behaves; the code mode shows the underlying HTML, JSX, Markdown, or other source so you can inspect or copy it directly.

In the lower right corner, you'll find options to copy the content, download it as a file, or publish and share. The publish option generates a public URL that anyone can access with the link, even users without a Claude account.

Your artifact history lives in the Artifacts section of the Claude sidebar. Every artifact you've created across all conversations is accessible there, searchable, and available to open and continue iterating on at any time.

Step 2: Write Prompts That Generate Artifacts Reliably

The prompt determines both whether an artifact gets created and how useful the first version is. Three patterns produce consistently better results.

Specify the output type explicitly

Claude infers artifact type from context, but naming it removes ambiguity. "Build a React component that..." is clearer than "Create something that..." , especially when the request could reasonably be fulfilled as either a React component or a plain HTML page.

Describe behavior, not just appearance

Compare these two prompts: "Make a to-do list" versus "Build a React to-do list where items can be added via a text input, checked off with a checkbox, and deleted with a button. Display the count of remaining items." The second gives Claude the behavioral spec it needs to build something functional on the first attempt. Vague prompts generate vague artifacts.

Include constraints upfront

If you have technical constraints (a specific library version, a color palette, a maximum line count) , include them in the initial prompt. Retrofitting constraints into a second or third iteration is slower than providing them from the start. For code generation specifically, naming the libraries you want Claude to use prevents it from choosing unfamiliar alternatives you'll need to learn.

One thing that consistently helps: describe the end user. "This is for a non-technical marketing team" changes how Claude labels buttons, writes error messages, and structures the interface compared to "This is for developers."

Step 3: Iterate and Refine Inside the Artifact Panel

The artifact panel and the conversation work together. You refine the artifact by sending messages in the chat. Claude updates the artifact in place rather than generating a new one, which preserves your iteration history.

Specificity matters here. "Fix the button" leaves Claude guessing which button, what's wrong, and what fix looks like. "The Submit button in the form section turns gray on hover. It should stay blue and show a pointer cursor" gives Claude an exact target and a clear resolution. Describe the problem you see, not the solution you think is needed.

Inline selection editing

For text and code artifacts, you can select a specific section directly in the artifact panel and ask Claude to modify only that part. This is faster than describing the section in chat and avoids unintentional changes elsewhere in the artifact. Highly recommended for large documents.

When errors appear

If an artifact fails to render or throws an error, look for the "Try fixing with Claude" button near the error message. Clicking it copies the full error details into a new message automatically. Send it, and Claude diagnoses the issue and applies a fix, usually faster than reading the stack trace yourself.

And don't restart the conversation if the artifact isn't working. Editing a prior chat message creates an alternate version of the conversation with its own artifact set, letting you explore a different direction without losing what you've already built. Your work is preserved either way.

Step 4: Build AI-Powered Artifacts With the Claude API

In July 2025, Anthropic added the ability for artifacts to call Claude's API directly. This is the capability that moved artifacts from a rendering environment into a genuine microapp development platform.

An AI-powered artifact contains its own Claude API call. When a user submits a form, clicks a button, or uploads a file, the artifact sends a request to Claude and renders the response inline. The user never leaves the artifact. No API key is required from them; usage counts against their own Claude subscription, not the creator's.

What this makes possible:

• Custom chatbots with a specific persona or restricted knowledge domain
• Document analysis tools where users upload a PDF and get structured output
• Writing assistants with opinionated style guidance baked in
• Interactive quizzes that adapt questions based on previous answers
• Data transformation tools that process CSV inputs and return formatted tables

Persistent storage

Artifacts on Pro, Max, Team, and Enterprise plans support persistent storage up to 20MB per artifact, accessible via a simple key-value API. Data written in one session is available in the next. This enables journals, trackers, leaderboards, and any tool that needs to remember state across conversations.

MCP integrations

Artifacts can connect to external services through the Model Context Protocol. Official Anthropic integrations include Gmail, Google Calendar, Google Drive, Slack, Asana, and others. Artifacts can also connect to custom MCP servers you've configured. Each user must authenticate MCP servers independently when using a shared artifact. Authentication doesn't carry over from the creator. Organization administrators can enable or disable MCP access for artifacts at the org level.

Step 5: Publish, Share, and Remix Artifacts

Publishing an artifact generates a public URL. Anyone with the link can view and interact with it. No Claude account required. For AI-powered artifacts, each viewer's interactions are processed using their own Claude subscription. If they don't have one, they can still view static artifacts but won't have access to AI-powered functionality.

Sharing within teams

Team and Enterprise plan users can share artifacts inside Projects, where teammates can view, interact with, and iterate on artifacts in a secure, organization-scoped environment. Pro plan users can share and discover public artifacts with the broader community through the catalog at claude.ai/catalog/artifacts.

Remixing

Any published artifact can be remixed. Clicking Remix on a shared artifact opens the code in a new Claude conversation, where you can ask Claude to modify, extend, or adapt it. The original artifact is unchanged. Remixing is how most people build on published work without needing to understand the underlying code. Describe what you want changed and Claude makes the modification.

This creates a compound effect. An artifact someone publishes as a general-purpose invoice generator becomes, through remixing, ten variations tailored to specific industries, currencies, and workflows. The community catalog grows in usefulness faster than any single author could drive alone.

Use Cases Across Roles

The gap between artifact types and practical value is most visible when mapped to specific roles.

Developers

Rapid prototyping. That's the clearest win for developers. Describing a component in natural language and getting a working React artifact in seconds is faster than writing boilerplate. And because the artifact is live and editable, design feedback loops happen in the same session. No deploy step. No review back-and-forth over screenshots.

Data analysts

Upload a CSV, ask Claude to build an interactive dashboard with filterable charts, and get a Plotly or Recharts artifact that the whole team can use without needing Python or Tableau access. The artifact persists in the sidebar and updates when you upload new data.

Technical writers and content teams

But Markdown artifacts with structured outlines, documentation templates, and content frameworks are faster to iterate in the artifact panel than in Google Docs, especially when the content structure itself needs to change mid-draft. The rendered preview handles heading hierarchy, tables, and code blocks correctly without formatting workarounds.

Educators

Interactive quizzes, flashcard tools, and concept visualizations built as React artifacts are shareable via link. Students don't need a Claude account to use a published interactive lesson. The AI-powered artifact capability adds adaptive features: questions that adjust based on prior responses, or explanations that rephrase automatically when a student indicates they're stuck.

Product managers

Clickable wireframes and interactive feature mockups built as HTML artifacts communicate product intent more precisely than static slides. Stakeholders can interact with the prototype directly and give feedback on behavior, not just appearance.

Common Issues and How to Fix Them

Artifact panel not appearing

Confirm the Artifacts toggle is enabled in Settings. If you're on a Team or Enterprise plan and the option is grayed out, your organization administrator has managed the setting at the org level. Contact your admin to enable it.

Artifact renders blank or throws an error

Use the Try fixing with Claude button near the error message rather than manually describing what went wrong. Claude receives the exact error output and applies a targeted fix. If the error persists across two or three fix attempts, try describing the desired behavior in a new prompt. Sometimes the generated approach has a structural issue that incremental fixes won't resolve.

React component won't display

The most common cause is a missing default export. Claude occasionally generates a component without exporting it. Ask Claude: "Add a default export to this component" and the artifact will render.

Persistent storage not working

Storage is available on Pro, Max, Team, and Enterprise plans. Free plan users don't have access to the storage API. If you're on a qualifying plan and storage calls are failing, check that the artifact isn't using localStorage or sessionStorage. Those browser APIs are not supported in the Claude artifact environment and will cause silent failures. Use the window.storage API instead.

Frequently Asked Questions

Are Claude Artifacts free to use?

Yes. Artifacts are available on all Claude plans, including the free tier. Advanced features like persistent storage and higher usage limits require Pro, Max, Team, or Enterprise plans.

Can I use Artifacts on mobile?

Yes. The iOS and Android Claude apps both support creating and viewing artifacts. The interface adapts to mobile screen sizes, though complex interactive artifacts are easier to build and iterate on using a desktop browser.

Can people without a Claude account view my published artifact?

Yes. Anyone with the published link can view and interact with static artifacts. For AI-powered artifacts that call Claude's API, viewers without a Claude account won't have access to the AI functionality. They'll see the interface, but AI-driven interactions require a subscription.

Is there a limit to how many artifacts I can create?

There's no hard limit on artifact count. Usage limits apply to Claude messages generally, which affects how much iteration you can do per session depending on your plan.

Can I connect Artifacts to my own database or API?

Through MCP integrations, yes. If you've configured a custom MCP server, artifacts can connect to it. Direct HTTP calls to external APIs from within artifacts are also possible, though this requires the external API to have permissive CORS settings or a proxy.

Where to Start

The fastest way to understand what artifacts can do is to build one. Pick a task you do repeatedly that produces some kind of structured output: a report, a calculation, a data transformation. Ask Claude to build an artifact for it.

Start simple. A single-screen HTML tool or a Markdown document template will teach you more about prompting and iteration in twenty minutes than reading documentation will in an hour. So once the basic workflow is clear, the more complex capabilities (AI-powered artifacts, persistent storage, MCP connections) , follow naturally.

Published artifacts are worth browsing before you build. The community catalog at claude.ai/catalog/artifacts shows what others have created across categories from data visualization to games to productivity tools. Remix something that's close to what you want rather than starting from a blank prompt. That's usually the fastest path from idea to working artifact.