# Artifact

A sandboxed preview + code viewer for AI-generated artifacts — the Claude Artifacts / ChatGPT Canvas pattern.

<p class="kai-tag-sub">kai-artifact</p>

Show an AI-generated deliverable beside the conversation — a web page, doc, image, or PDF — in a sandboxed iframe with a nav toolbar and a switchable Code view.

## Preview

> **tip:** 
Reach for `<kai-artifact>` when a response produces something runnable or viewable you want to show alongside the chat. Pair it with [`<kai-resizable>`](/components/resizable/) for a draggable split-pane shell. It fills its container — give the parent a height.

A model can also stream one into the thread as an [`artifact` card](/guides/generative-ui/), which sets its own height and reaches a narrower payload than the element takes here.

## Usage

Point `src` at your hosted artifact and set `files` in JavaScript (it's an array, so it can't be an HTML attribute) for the Code tab.

```html
<kai-artifact src="https://your.app/artifacts/abc/index.html" style="display:block;height:520px"></kai-artifact>
<script type="module">

  await customElements.whenDefined('kai-artifact');

  const el = document.querySelector('kai-artifact');
  el.files = [
    { path: 'index.html', url: '…/index.html', type: 'html', code: '<!DOCTYPE …>' },
    { path: 'styles.css', url: '…/styles.css', type: 'other', language: 'css', code: '…' },
  ];
  el.addEventListener('kai-navigate', (e) => console.log(e.detail.url));
</script>
```

- **`files`** — each entry needs a `path`; add `url` for the preview, `code` + `language` for the Code tab, and `type` (`html | pdf | image | other`). Folders come from the `/` in paths.
- **Toolbar** — hide any default control with its `no-*` flag (`no-nav`, `no-reload`, `no-home`, `no-path-field`, `no-tabs`); `expandable` and `open-in-tab` are opt-in.
- **Sandbox** defaults to `allow-scripts allow-forms`. Widen it only for trusted content.

## Examples

### Code view

### Preview only

Hide the whole toolbar for a chrome-free embedded tile.

### Open in new tab

### Standalone

Rounded, bordered chrome for an artifact rendered outside a panel — a modal or inline tile.

### Expandable

An expand-to-fill button that fires `kai-maximize-change`, plus the open-in-tab control.

## Props

## Events

## Methods

## Composed from