AiArtifacts

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

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

ECharts Interactive Chart - Line Chart

When data.type is set to 'echarts', the component automatically loads ECharts and renders an interactive chart. Pass the chart type and ECharts configuration via echartsOption. Supports data zoom (dataZoom), toolbox (toolbox), and chart events like chart-ready and chart-click.

Line Chart - Monthly Sales Trend

ECharts Interactive Chart - Bar Chart

Bar charts are ideal for multi-dimensional category comparisons. Set echartsOption.chartType to 'bar'. Use @chart-error to catch chart loading failures.

Bar Chart - Quarterly Product Comparison

ECharts Interactive Chart - Pie Chart

Donut pie charts are ideal for showing proportional relationships. Set chartType to 'pie' and configure inner/outer radius via series[].radius.

Pie Chart - Market Share Analysis

ECharts Interactive Chart - Radar Chart

Radar charts are perfect for multi-dimensional competency or KPI assessments. Set chartType to 'radar' and define your indicators in radar.indicator.

Radar Chart - Competency Assessment

API

Props

Property	Description	Type	Default
visible	Whether visible (supports v-model:visible)	boolean	false
data	Artifact data structure	ArtifactData	—
width	Panel width	string | number	'50%'
fullscreen	Whether fullscreen	boolean	false
mode	Rendering mode	'preview' | 'code' | 'inline'	'preview'
theme-overrides	Theme variable overrides	ComponentThemeVars	—
echarts-option	ECharts chart options (for chart/echarts type)	ArtifactEChartsOption	—
auto-load-e-charts	Auto load ECharts library	boolean	true
echarts-theme	ECharts theme	'light' | 'dark' | 'default'	'light'
echarts-data-zoom	Enable data zoom	boolean	true
echarts-toolbox	Show toolbox	boolean	true
chart-height	Chart height	string | number	400
responsive-width	Whether width is responsive	boolean	true
chart-loading-text	Placeholder text while chart is loading	string	'加载图表中...'

ArtifactData

Property	Description	Type
id	Unique ID	string
title	Title / Filename	string
type	Content type	'code' | 'html' | 'markdown' | 'vue' | 'react' | 'diagram' | 'chart' | 'sandbox' | 'canvas' | 'echarts'
currentVersion	Currently selected version label	string | number
versions	Version list	ArtifactVersion[]
echartsOption	ECharts options (for chart/echarts types)	ArtifactEChartsOption

ArtifactVersion

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

ArtifactEChartsOption

Property	Description	Type	Default
chartType	Chart type	'line' | 'bar' | 'pie' | 'scatter' | 'gauge' | 'radar' | 'funnel' | 'treemap' | 'sunburst' | 'heatmap' | 'candlestick' | 'boxplot' | 'sankey' | 'themeRiver' | 'graph' | 'custom'	—
option	Standard ECharts option object	Record<string, unknown>	—
theme	Chart theme (overrides global)	'light' | 'dark' | 'default'	—
dataZoom	Enable data zoom	boolean	—
toolbox	Show toolbox	boolean	—
interactive	Enable interactions (click, hover)	boolean	—

Events

Name	Description	Parameters
update:visible	Emitted when visibility changes	(val: boolean) => void
update:mode	Emitted when mode switches	(mode: string) => void
version-change	Triggered when switching version	(v: ArtifactVersion) => void
chart-ready	ECharts instance initialized	(chart: unknown) => void
chart-click	Triggered when clicking a data point	(params: unknown) => void
chart-error	Triggered when chart fails to load	(error: Error) => void
close	Emitted when closing the panel	—

Slots

Name	Description	Scope
chart	Custom chart render area (type='chart')	{ data: ArtifactVersion | null, title: string }
canvas	Custom canvas render area (type='canvas')	{ data: ArtifactVersion | null }

Use in Nuxt

This component fully supports Nuxt 3/4. In Nuxt projects, the component will be automatically imported. Since ECharts is loaded via dynamic import (lazy loading), it is SSR-friendly with no extra configuration needed.

For manual registration, see the Nuxt Integration guide.

Theme Variables

Variable Name	Description	Default Value
--yh-ai-artifacts-bg-color	Panel background color	var(--yh-bg-color-overlay)
--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)