Artifact

kai-artifact

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.

• Shadow DOM
• Sandboxed iframe
• Preview + Code tabs
• Configurable toolbar
• 4 events

Preview

When to use

Reach for <kai-artifact> when a response produces something runnable or viewable you want to show alongside the chat. Pair it with <kai-resizable> for a draggable split-pane shell. It fills its container — give the parent a height.

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.

<kai-artifact src="https://your.app/artifacts/abc/index.html" style="display:block;height:520px"></kai-artifact>
<script type="module">
  import '@kitn.ai/ui/elements';
  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

Code

Preview only

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

Code

Open in new tab

Code

Standalone

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

Code

Expandable

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

Code

Props

Property	Type	Default	Notes
src	string	—	URL the preview iframe frames. Consumer-controlled.
files	FileTreeFile[]	[]	Files for the Code tab tree + each file's preview `url`. Set as a JS property (array).
tab	"preview" | "code"	'preview'	Active tab: `preview` (default) or `code`.
activeFile	string	—	Selected file path — syncs the tree highlight, Code source, and preview.
sandbox	string	'allow-scripts allow-forms'	iframe `sandbox` override. Secure default `allow-scripts allow-forms` (NOT `allow-same-origin`).
iframeTitle	string	—	Accessible title for the preview iframe.
maximized	boolean	false	Reflects the artifact's own maximized view-state (usually driven by the protocol).
expandable	boolean	false	Show the expand-to-fill button (OPT-IN).
openInTab	boolean	false	Show the open-in-new-tab button (OPT-IN).
noNav	boolean	false	Hide back/forward.
noReload	boolean	false	Hide reload.
noHome	boolean	false	Hide home.
noPathField	boolean	false	Hide the address field.
noTabs	boolean	false	Hide the Preview|Code toggle.
standalone	boolean	false	Standalone chrome: rounded corners + border (else square, borderless in-panel).
readonlyPath	boolean	false	Show the address but make it read-only (visible, nav-tracking, non-editable).

Events

Event	Detail	Notes
kai-file-select	{ … }	Fired when a file is selected. `detail.path`.
kai-maximize-change	{ … }	Artifact's own maximize button toggled (consumer-observable; non-bubbling).
kai-navigate	{ … }	Fired when the preview navigates. `detail.url` = the new location.
kai-tab-change	{ … }	Fired when the Preview|Code tab changes. `detail.tab`.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Artifact

---

Need a hand? Report a bug Ask for help