自定义 widget 开发
面向开发者的 widget 开发入口——在 VizChat 中创建属于自己的 widget 类型。
如果内置 widget、用户 Widget、MCP App 都不满足你的需求，可以直接开发新的自定义 widget——它会和内置 widget 拥有同等地位：完整的 schema、操作、渲染、i18n、Agent prompt 支持。
适用场景
- 团队内部专用的可视化（如"公司 OKR 卡片"、"产品 SKU 表"）
- 高性能场景（iframe/Widget 不够用，需要直接操作 React 树）
- 想进一步贡献回 VizChat 主仓库的通用 widget
快速开始
一个自定义 widget 包含 10 个文件（脚手架一键生成），主要包括：
widget-schema.ts— zod schema 定义 content / configwidget-config.ts— widget 元数据（尺寸、图标、默认值）<type>-operations.ts— Agent 可调用的操作<Type>Widget.tsx— React 渲染组件iframe entry— iframe 子渲染入口i18n/— 多语言文案prompt.md— Agent 识别 / 调用此 widget 的 prompt
推荐流程
- 需求分析：先问自己"是不是其实用户 Widget 够用"？用户 Widget 更轻
- 使用
/build-builtin-widgetskill 走引导开发，避免漏文件 - 参考
bar-chart/等现有实现的命名与目录结构 - 重启后端，自定义 widget 会被自动编译并 seed 到数据库
用户 Widget vs 自定义 widget
| 你想做 | 选 |
|---|---|
| Agent 现场生成一个小工具 | 用户 Widget |
| 团队通用、需要深度 canvas 集成 | 自定义 widget |
完整开发指南
开发步骤、脚手架模板、常见坑位等完整内容请见：
Next step
- 自定义 widget 指南 — 端到端教程
- 用户 Widget — 更轻量的替代方案
- Widget 总览 — 回到分类对比