# Artifact Panel

> Side panel for a file an assistant generated: a Preview / Code toggle with a sliding pill, a version pager, copy, download, expand and close. Code has line numbers and light syntax colour; while streaming it writes itself with a caret and stays on Code, and lines a new version changed flash in the gutter. Preview renders a React node per version.

- Slug: `artifact-panel`
- Category: [AI chat](https://www.assembli.design/category/ai-chat.md)
- Type: block
- Tags: artifact, canvas, code, preview, versions, streaming
- npm dependencies: motion, lucide-react
- shadcn/ui dependencies: button
- Live preview: https://www.assembli.design/preview/artifact-panel
- Page: https://www.assembli.design/components/artifact-panel

![Artifact Panel preview](https://www.assembli.design/thumbnails/artifact-panel-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `versions` (required) | `ArtifactVersion[]` |  |  |
| `version` | `number` |  | Index into `versions`. Defaults to the latest. |
| `onVersionChange` | `(index: number) => void` |  |  |
| `streaming` | `boolean` | `false` | True while the latest version is still being written. Locks the panel to Code and follows the last line. |
| `view` | `ArtifactView` |  |  |
| `defaultView` | `ArtifactView` | `"preview"` |  |
| `onViewChange` | `(view: ArtifactView) => void` |  |  |
| `title` | `string` |  |  |
| `expanded` | `boolean` |  |  |
| `onExpandedChange` | `(expanded: boolean) => void` |  |  |
| `onClose` | `() => void` |  |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/artifact-panel/artifact-panel.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/artifact-panel
```

Registry item JSON: https://www.assembli.design/r/artifact-panel.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.