AiArtifacts

AiArtifacts is an immersive side rendering panel designed to display complex AI-generated content, such as HTML pages, UI prototypes, or large code modules.

Basic Usage

Control visibility via v-model:visible and pass artifact details through the data prop.

Basic Usage

Multi-version Support

Artifacts allow users to switch between different iterations. Use the versions array to provide history and the version-change event to monitor user selection.

Tip: Click v1/v2 at the top of the side panel to experience version switching.

Version Switching

Rendering Modes

Supports preview (live rendering) and code (syntax highlighting) modes. Default mode is preview for HTML content.

Source Mode

Inline Display Mode

By setting mode="inline", the component will appear as a standard block element embedded in the page stream or chat bubbles.

Dashboard Preview

Versions

v1

v2

Initial draft

Inline Mode & Theme Overrides

API

Props

Property	Description	Type	Default
visible	Whether visible	boolean	false
data	Artifact data structure	ArtifactData	—
width	Panel width	string | number	'50%'
mode	Initial display mode	'preview' | 'code' | 'inline'	'preview'
themeOverrides	Theme variable overrides	ComponentThemeVars	—

ArtifactData

Property	Description	Type
id	Unique ID	string
title	Title/Filename	string
type	Content type	'code' | 'html' | 'markdown' | 'vue' | 'react'
versions	Version list	ArtifactVersion[]

ArtifactVersion

Property	Description	Type
version	Version label	string | number
content	Source code/content	string
description	Changes description	string

Events

Name	Description	Parameters
version-change	Triggered when switching version	(v: ArtifactVersion) => void
close	Emitted when closing the panel	—

Use in Nuxt

This component fully supports Nuxt 3/4. In Nuxt projects, the component will be automatically imported.

For detailed configuration, please see Nuxt Integration.

Theme Variables

Variable Name	Description	Default Value
--yh-ai-artifacts-bg	Panel background color	var(--yh-bg-color)
--yh-ai-artifacts-header-height	Header height	56px
--yh-ai-artifacts-border-color	Divider color	var(--yh-border-color-lighter)
--yh-ai-artifacts-shadow	Panel shadow	var(--yh-box-shadow-light)