[!info] related notes

• 所属 MOC: AI Agent Application MOC
• 相关: Tool Call UI, Chat UI
• 框架: [[assistant-ui|assistant-ui]] — Generative UI

Artifact UI

一句话定义

Artifact UI 是前端展示 AI Agent 生成的结构化产物的组件。当 Agent 不只是回复文字，而是生成图表、代码、文件、表格、网页等内容时，需要专门的查看器来展示这些”产物”。

它解决什么问题

LLM 的能力不只是文本生成。Agent 可以：

• 调用工具生成图表（ECharts、D3）
• 执行代码并返回结果
• 生成文件（PDF、Excel、图片）
• 创建结构化数据（表格、JSON）
• 生成网页或组件

这些内容不能简单地用 Markdown 渲染，需要专门的查看器。

核心原理

Artifact 类型

类型	查看器	例子
图表	ChartViewer	ECharts、Recharts
代码	CodeEditor	Monaco Editor、CodeMirror
表格	DataTable	AG Grid、TanStack Table
文件	FileViewer	PDF Viewer、Image Viewer
网页	IframeViewer	生成的 HTML
JSON	JSON Viewer	结构化数据

Artifact 的数据结构

interface Artifact {
  id: string;
  type: 'chart' | 'code' | 'table' | 'file' | 'html' | 'json';
  title: string;
  data: any;
  mimeType?: string;
  metadata?: Record<string, any>;
}

典型工程实现

Artifact Viewer 组件

function ArtifactViewer({ artifact }: { artifact: Artifact }) {
  switch (artifact.type) {
    case 'chart':
      return <ChartViewer data={artifact.data} />;
    case 'code':
      return <CodeViewer code={artifact.data.code} language={artifact.data.language} />;
    case 'table':
      return <DataTable data={artifact.data} />;
    case 'file':
      return <FileViewer url={artifact.data.url} mimeType={artifact.mimeType} />;
    case 'html':
      return <IframeViewer html={artifact.data.html} />;
    case 'json':
      return <JsonViewer data={artifact.data} />;
    default:
      return <pre>{JSON.stringify(artifact.data, null, 2)}</pre>;
  }
}

与 Generative UI 的关系

assistant-ui 的 Generative UI 是 Artifact UI 的高级形态：

// assistant-ui: 工具调用直接渲染为 React 组件
const tools = {
  create_chart: {
    description: '创建图表',
    parameters: z.object({ data: z.array(z.number()) }),
    render: ({ data }) => <ECharts option={buildOption(data)} />,
  },
};

常见坑

1. 所有产物都用 JSON 显示: 没有针对不同类型做专门渲染
2. 不做安全检查: 生成的 HTML 可能包含恶意脚本
3. 大文件直接渲染: 大表格、大图片应该懒加载
4. 不做下载功能: 用户想保存产物但没有下载按钮

参考资料

• assistant-ui Generative UI
• Artifact UI in ChatGPT