SuperAPI AI 工具集

add-components-to-registry

前端与建站

查看项目

更新于 10-16 01:07

技能介绍

用途:将项目中已有的 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”。其余细节以公开资料为准。