SuperAPI AI 工具集

add-to-existing-project

通用与其它

查看项目

更新于 10-16 01:09

技能介绍

用途:把 Tambo 集成进已有的 React 项目,在保留原有项目模式的前提下完成接入。

主要能力:先读取 package.json、tsconfig.json、next.config.、vite.config.、tailwind.config.、postcss.config. 及入口文件,检测框架(Next.js、Vite、Create React App)、TypeScript、Tailwind 或纯 CSS、Zod 或其他校验库;向用户展示检测结果并确认偏好;安装依赖;按现有模式创建 Provider;注册首个组件作为示例。

使用方式:核心依赖为 npm install @tambo-ai/react,未安装 Zod 时执行 npm install zod。Provider 按框架放置:Next.js App Router 用 app/providers.tsx 并在 layout.tsx 包裹;Pages Router 用 pages/app.tsx;Vite/CRA 用 src/main.tsx。组件注册表放在 lib/tambo.ts 或 src/lib/tambo.ts,导出 TamboComponent 数组。环境变量由 npx tambo init --api-key=sk... 自动写入 .env.local,也可手动设置:Next.js 用 NEXT_PUBLIC_TAMBO_API_KEY,Vite 用 VITE_TAMBO_API_KEY,CRA 用 REACT_APP_TAMBO_API_KEY。Monorepo 需在将使用 Tambo 的包目录下执行命令。无 Tailwind 时可用 npx tambo add message-thread-full 并选择 CSS Modules 或纯 CSS。

适用场景:为已有 React 应用添加 Tambo 能力,且希望沿用现有样式与校验方案。

限制:使用 Yup/Joi 时建议仅为 Tambo schema 添加 Zod,转换 schema 工作量较大不推荐;只读文件系统等场景需手动配置环境变量。其余细节资料未提供。