# Claude Code Interactive artifacts

> Claude Code artifact creation, updates, sharing, limits, organization settings and the Passion8 gateway boundary.

URL: https://docs.passion8.cc/en/docs/claude-code/artifacts
Language: en
Publisher: Passion8

Artifacts publish Claude Code output as a private interactive page. They make terminal content easier to explore: PR walkthroughs, dashboards, design comparisons, migration progress and draggable triage boards.




Artifacts are hosted on claude.ai and are not a standard `ANTHROPIC_BASE_URL` gateway feature. Sessions using a Passion8 token or API key generally cannot publish to a claude.ai artifact URL. You can still ask Claude to generate local HTML.




## When to use them

| Scenario | Why an artifact helps |
| --- | --- |
| PR walkthrough | Shows diffs, comments and risk levels side by side |
| Data dashboard | Charts and metrics are easier to read than terminal text |
| Design comparison | Compares layouts, copy and API shapes on one page |
| Interactive parameters | Sliders, toggles and inputs provide immediate feedback |
| Long-running task status | Updates a migration checklist, timeline and blockers |

An artifact is a self-contained static page, not a complete application. It has no backend, cannot persist form inputs or make API calls while viewed, and cannot host a multiple-route application.

## Create and update

Ask Claude directly:

```text
Create an artifact that annotates this PR's diff by severity.
```

```text
Create a deployment-failure dashboard artifact and keep it updated as we investigate.
```

Claude writes an HTML or Markdown file in the project, then requests permission to publish. Initial publication requires confirmation; subsequent publication of the same artifact usually does not ask again. Use `Ctrl+]` to reopen the latest artifact.

| Operation | Instructions |
| --- | --- |
| Update | Ask Claude to edit the source file and republish |
| Set a title | Request a consistent title and icon for the gallery |
| Disable automatic opening | Set `CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0` |
| Update from another session | Provide the artifact URL; otherwise a new artifact is created |

## Sharing boundary

| Plan | Sharing |
| --- | --- |
| Pro / Max | Private to you by default |
| Team | Share with organization members or the organization |
| Enterprise | Owner enablement and role/policy controls apply |

Sharing works within the same claude.ai organization. External users cannot directly access a private artifact URL. Export the underlying HTML and publish using your own hosting to share externally.

## Page limits

| Limit | Effect |
| --- | --- |
| No external requests | CSP blocks external JS, CSS, fonts, images, fetch, XHR and WebSocket |
| No backend | No stored forms, authentication or API requests while viewed |
| Single page | Relative links have no accompanying routes; use section anchors |
| Source file types | Usually `.html`, `.htm` or `.md` |
| Rendered size | Keep the rendered page within 16 MiB |

Large images commonly exceed the limit. Prefer HTML, CSS or SVG where they can express the visual without embedding large raster assets.

## Availability requirements

| Requirement | Details |
| --- | --- |
| Plan | Pro, Max, Team or Enterprise |
| Authentication | claude.ai `/login` required |
| Provider | Anthropic first-party feature, not Bedrock, Vertex, Foundry or an ordinary gateway |
| Organization policy | HIPAA, CMEK or ZDR policies may disable it |
| Surface | CLI or newer Desktop; not generally appropriate in Agent SDK, CI or MCP-server contexts |

Disable with:

| Method | Setting |
| --- | --- |
| Settings | `"disableArtifact": true` |
| Environment | `CLAUDE_CODE_DISABLE_ARTIFACT=1` |
| Permissions | Add `Artifact` to deny rules |

## Alternative workflow with Passion8

For gateway model usage, generate local static artifacts:

1. Ask Claude to write `docs/artifacts/<name>.html` or Markdown.
2. Render it with the project's existing CSS or components.
3. Share through the docs site, an internal static server or a PR attachment.
4. For ongoing updates, require the task to update the HTML and rebuild documentation.

This avoids dependence on claude.ai publication and works with your own access control, domain, auditing and cache policies.

## Cost and caching

| Item | Effect |
| --- | --- |
| HTML/CSS/JS generation | Usually more output tokens than plain text |
| Inline large datasets | Increases context and output costs |
| Repeated updates | Brings existing files and new requirements into the conversation |
| Publication URL | Does not share local Passion8 prompt caches with the cloud |

For long artifacts, use `/compact` at a natural break or save design rules in project documentation to avoid explaining the visual requirements repeatedly.

## Official references

- [Artifacts](https://code.claude.com/docs/en/artifacts.md)
- [Feature availability](https://code.claude.com/docs/en/feature-availability.md)
- [Claude Code on the web](https://code.claude.com/docs/en/claude-code-on-the-web.md)
- [MCP](https://code.claude.com/docs/en/mcp.md)