​

八种渲染面

​

总览对比

​

1. ToolCallCard（工具调用结果卡片）

• 纯 React DOM 渲染（无 iframe）
• 代码高亮使用 Prism.js
• 支持展开/折叠
• 可包含图片（base64 或 URL）

• 文本结果（Markdown 渲染）
• 代码块（语法高亮）
• 图片（截图等）
• 结构化卡片（通过 plugin manifest ui.toolCallCards 模板）
• 状态指示器（进行中/成功/失败）

​

2. Inline Visualization（内联可视化）

• 使用 <iframe srcdoc> 渲染完整 HTML/CSS/JS
• 沙箱化：sandbox="allow-scripts"（无网络、无导航、无表单提交）
• 自动高度适应内容（通过 postMessage 上报 document.body.scrollHeight）
• 支持展开/折叠（默认最大高度 400px，展开后 800px）
• 支持暗色/亮色主题自动适配

// 内容 → 宿主（上报高度）
window.parent.postMessage({
  type: "profy-inline-vis-height",
  toolCallId: "...",
  height: document.body.scrollHeight
}, "*")

• D3/Vega-Lite 数据图表
• Three.js 3D 场景预览
• 统计可视化
• 任何需要 JavaScript 交互的轻量可视化

• Inline Visualization 嵌入聊天流中（不占右侧面板）
• 无双向 JSON-RPC 通信（只单向上报高度）
• 适用于「看一眼就懂」的可视化，而非需要持续交互的工具

​

3. A2UI（Agent to UI）

• 原生 React 组件渲染（非 iframe，性能优于 srcdoc）
• 声明式 JSON → 本地 UI 组件映射
• 支持用户交互：按钮点击触发 Action 回传给 Agent
• 16 种内置组件覆盖常见 UI 模式
• 主题、暗色模式自动适配

Agent 调用 render_ui(components=[...])
  → 前端渲染原生 React 组件
  → 用户点击 Button(action="upgrade_plan")
  → Action 事件分发到 Agent
  → Agent 处理后续逻辑

• 结构化信息展示（套餐对比表、状态仪表盘）
• 需要用户确认/选择的交互卡片
• 业务数据展示（积分余额、订阅状态）
• 操作引导（按钮触发下一步）

• A2UI 是声明式 JSON，无需编写 HTML/CSS/JS
• 渲染为原生 React 组件（一致性更好，性能更优）
• 支持 Action 回调（真正的双向交互）
• 不支持自由绘图/Canvas/WebGL（受限于预定义组件集）

​

4. FilePanel（文件面板）

• 根据文件类型选择渲染方式
• 支持多种格式：图片、视频、音频、PDF、Markdown、代码、HTML/SVG
• HTML/SVG 使用 <iframe srcDoc> 渲染（沙箱化）
• 代码文件使用语法高亮

​

5. Preview（实时预览）

• 通过 <iframe src={proxyUrl}> 连接到沙箱内的 dev server
• 默认端口 5173（TanStack Start / Vite）
• 支持 HMR（热模块替换），代码修改实时反映
• 完全交互式（可点击、滚动、输入）

​

6. Browser（浏览器面板）

• 通过 noVNC WebSocket 连接沙箱内的 Chrome 桌面
• 展示的是完整的浏览器 GUI（包括地址栏、标签栏）
• 用户可以直接通过 VNC 远程操作

• 浏览器自动化过程的可视化观察
• 需要用户介入的操作（CAPTCHA 等）
• 复杂网页交互的调试

​

7. Widget（交互式组件）

• 使用 <iframe srcDoc={html}> 注入完整 HTML
• 沙箱化：sandbox="allow-scripts allow-forms"
• 支持双向 JSON-RPC 通信（iframe ↔ 宿主）
• 可调用宿主提供的 MCP 工具

// Widget → 宿主（调用工具）
window.parent.postMessage({
  jsonrpc: "2.0",
  method: "tools/call",
  params: { name: "tool_name", arguments: {...} },
  id: 1
}, "*")

// 宿主 → Widget（返回结果）
window.addEventListener("message", (e) => {
  if (e.data.jsonrpc === "2.0" && e.data.id === 1) {
    console.log(e.data.result)
  }
})

• 交互式游戏/演示
• 数据可视化仪表盘
• 表单工具
• 任何需要与 Agent 双向通信的富 UI

​

8. Video Timeline Widget（视频时间线编辑器）

• 基于 Twick SDK 的专业多轨时间线编辑器
• 通过 JSON-RPC bridge 与 Agent 双向通信
• Agent 可通过 timeline_edit 工具程序化操作时间线
• 用户可手动拖拽、剪辑、调整片段

timeline_edit(action="add_clip", track=0, asset_id="clip_001", start=0, duration=5.0)
timeline_edit(action="split", track=0, clip_id="c1", at=2.5)
timeline_edit(action="add_transition", from_clip="c1", to_clip="c2", type="crossfade", duration=0.5)

• 专业视频剪辑
• 多轨时间线编排
• 视频片段拼接与转场

​

选择指南

​

Plugin 创作者指南

1. 简短结果（< 500 字符）→ 直接返回文本，渲染为 ToolCallCard
2. 截图/图片→ 返回 base64 图片，渲染为 ToolCallCard 图片
3. 轻量可视化（图表/3D 预览）→ 通过 result.inline_vis 返回，渲染为 Inline Visualization
4. 结构化交互 UI（按钮/表格/卡片）→ 通过 render_ui 工具 + result.a2ui 返回，渲染为 A2UI
5. 生成的文件→ 写入沙箱文件系统，FilePanel 自动展示
6. 交互式工具 UI（需要自由 HTML + 双向通信）→ 通过 result.widget 返回，渲染为 Widget
7. 实时开发预览→ 启动 dev server + open_preview，渲染为 Preview
8. 浏览器自动化可视化→ 通过 browser 工具触发，渲染为 Browser