SuperAPI AI 工具集

generative-ui

通用与其它

查看项目

更新于 10-15 22:33

技能介绍

用途:从零创建一个 Tambo 生成式 UI 应用,让用户用自然语言生成丰富、可交互的 React 组件。

主要能力:通过单次提示完成脚手架、认证、组件注册与启动;支持 Next.js(推荐,App Router)与 Vite 模板,模板自带聊天 UI、TamboProvider 接线、组件注册表和起始组件。

使用方式:先用 AskUserQuestion 一次性收集要构建的应用类型、框架和应用名(用户已说明则跳过),随后顺序执行:npx tambo create-app <app-name> --template=standard --skip-tambo-init(Vite 用 --template=vite),cd <app-name>,再运行 npx tambo init --project-name=<app-name> 打开浏览器认证并把 API 密钥写入 .env.local(如 NEXT_PUBLIC_TAMBO_API_KEY、VITE_TAMBO_API_KEY),不要手动粘贴密钥。接着按应用类型新增 1-2 个自定义组件,每个组件需含带 .describe() 的 Zod schema、React 组件本身,并追加到 lib/tambo.ts 现有 components 数组(不要替换)。最后 npm run dev 后台启动。

限制:schema 不支持 z.record()、z.map()、z.set(),表格数据用 z.array(z.object({...})) 显式列名;列表渲染需唯一 key,建议 schema 含 id 字段;props 流式到达,需优雅处理 undefined。命令失败应停止并询问用户。

验证:打开应用 URL,输入应触发已注册组件的提示(如“Show me a stats card for monthly revenue”),确认组件以 AI 生成的 props 渲染;若失败检查注册表、description 与提示是否匹配、控制台错误。可选聊天 UI 组件可用 npx tambo add message-thread-full --yes 等添加。遇到疑似 Tambo 缺陷可建议提交 GitHub issue,需先获用户确认并脱敏密钥。