用途:将项目中已有的 React 组件转换为 Tambo 可注册组件,使 AI 能够根据用户请求渲染这些组件。
主要能力:
- 分析组件文件,提取组件名、Props 接口/类型、渲染内容及可选与必填属性。
- 依据 TypeScript 类型生成 Zod 的 propsSchema,并用 .describe() 补充字段说明。
- 为组件编写描述,帮助 AI 判断何时使用该组件。
- 将组件注册到 lib/tambo.ts 的 TamboComponent 数组中。
- 支持批量处理:传入文件夹时遍历所有 .tsx 文件,跳过 index.ts 桶文件、测试文件(.test.tsx、.spec.tsx)和 story 文件(*.stories.tsx)。
使用方式:通过命令指向组件文件或文件夹,例如: /add-components-to-registry src/components/ProductCard.tsx /add-components-to-registry src/components/cards/ 随后依照工作流分析组件、生成 Zod schema、编写描述并更新注册表。schema 文件可放在组件旁(如 ProductCard.schema.ts),也可放在独立 schemas 目录。
类型映射示例:string 对应 z.string(),number 对应 z.number(),boolean 对应 z.boolean(),string[] 对应 z.array(z.string()),联合字面量对应 z.enum([...]),可选属性加 .optional(),Date 用 z.string().describe("ISO date string"),Record<K,V> 用 z.record(...)。嵌套对象需单独定义 Zod 对象再引用。
限制:callbacks(如 onClick)和 children 不应写入 propsSchema,因为 AI 只提供数据而非行为,且由 AI 渲染组件而非组合组件。注册后可在对话中验证,例如“Show me a product card for a laptop priced at $999”。其余细节以公开资料为准。