VizChat - AI 原生演示工具

想要的组件还不存在时的三条路——让 Agent 做一个、在仓库里贡献一个内置组件，或自己开发后用 CLI 发布。

内置组件覆盖不到你的需求时，有三条路。绝大多数人要的是第一条。

路径 1：让 Agent 做（无需写码、无需仓库）

在对话里描述你想要的组件——倒计时器、看板、计算器、某种特定的交互组件。Agent 会搭骨架、写代码、编译检查，并发布到你的私有组件库。

产物和内置组件行为一致：自带数据与配置、Agent 能驱动它、可跨文档复用。你也可以把它发布到市场，供其他人使用和收藏。

这是产品设计的主路径，不需要安装任何东西。

内置组件存放在 VizChat 仓库里、随产品一起发布。这条路适合把组件贡献回 VizChat 本身，而不是解决一次性需求。

前置条件：克隆仓库并搭好本地开发环境，熟悉 TypeScript 和 Zod。

推荐：让装有 vizchat-widget skill 的 agent 来做（它随 VizChat 插件提供，仓库里也为贡献者签入了一份）。它会走完「需求澄清 → 脚手架 → 实现 → 验证」全流程，与手动步骤等价但更不容易出错。

手动流程是：

脚手架：用 create:widget 脚本生成骨架，并选择挂载方式——inline（渲染在宿主页面内）或 nested（渲染在自己的 frame 里）。
实现 src/definition.ts 里的数据契约（快照结构、默认快照、操作）和视图——inline 写一个 React 组件，nested 写 mount / render 回调。参考 builtin-widgets/ 下已有的组件，bar-chart 是不错的起点。
验证：跑类型检查和该组件的单元测试。
编译与发布：运行 ./scripts/release.sh content，它推送源码、编译并发布新版本，等发布完成才返回。组件源码不会热重载，改完运行该命令再刷新页面。

组件的 package.json 只声明身份——挂载方式、显示名和默认尺寸。源码放在哪里是固定约定（src/definition.ts、src/index.tsx 或 src/index.ts、src/i18n/），每个组件都一样，不需要另外配置。

在自己的机器上、用自己的编辑器开发 widget，然后用 vizchat CLI 登录、本地预览（含讲稿语音）并发布到 Marketplace——不需要克隆 VizChat 仓库。完整流程见用命令行发布 widget。