SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场build-with-tambo

build-with-tambo

前端与建站

查看项目

更新于 10-16 05:36

技能介绍

用途

Build with Tambo 用于在已有的 React 应用中集成 Tambo。它强调先探测技术栈，再按项目现有模式完成接入，而不是套用统一模板。技能说明中明确，若是全新应用，应改用 generative-ui 相关技能。

工作流程

技能定义了五个步骤：

  1. 探测技术栈：分析 package.json 与项目结构。
  2. 与用户确认：展示探测结果并询问偏好。
  3. 安装依赖：加入 @tambo-ai/react 及同等的 peer 依赖。
  4. 创建 provider 配置：适配项目已有模式。
  5. 注册第一个组件：用现有组件做演示。

第 1 步：探测技术栈

技能列出需要读取的关键文件，包括 package.json（依赖与脚本）、tsconfig.json（TypeScript 配置）、next.config.（Next.js）、vite.config.（Vite）、tailwind.config.（Tailwind CSS）、postcss.config.（PostCSS）、src/index.* 或 app/（入口）。

探测清单包含：Next.js（dependencies 中有 next，存在 next.config.）、Vite（devDependencies 中有 vite，存在 vite.config.）、Create React App（dependencies 中有 react-scripts）、TypeScript（依赖中有 typescript，存在 tsconfig.json）、Tailwind（依赖中有 tailwindcss 且存在配置文件）、Plain CSS（无 Tailwind，src/ 中有 CSS 文件）、Zod（依赖中有 zod）、其他校验库（yup、joi、superstruct）。

第 2 步：与用户确认

技能给出确认话术示例：先说明探测到的框架、样式、校验库和 TypeScript 情况，再让用户选择是否按该设置安装 Tambo、是否改用纯 CSS 而非 Tailwind，或其他方案。

第 3 步：安装依赖

核心依赖始终需要：

npm install @tambo-ai/react

若未安装 Zod：

npm install zod

第 4 步：创建 provider 配置

技能按框架给出示例代码。

Next.js App Router：在 app/providers.tsx 中标记 "use client"，引入 TamboProvider 与 components，返回包裹 children 的 TamboProvider，apiKey 取自 process.env.NEXT_PUBLIC_TAMBO_API_KEY；在 app/layout.tsx 中引入并使用 Providers 包裹 children。

Next.js Pages Router：在 pages/_app.tsx 中引入 TamboProvider 与 components，用 TamboProvider 包裹 Component。

Vite / CRA：在 src/main.tsx 中引入 TamboProvider 与 components，在 ReactDOM.createRoot 渲染时用 TamboProvider 包裹 App，apiKey 取自 import.meta.env.VITE_TAMBO_API_KEY。

第 5 步：创建组件注册表

在 lib/tambo.ts（或 src/lib/tambo.ts）中导出 components: TamboComponent[] 数组，作为组件注册位置。

适配已有模式

无 Tailwind 时使用纯 CSS：若项目使用纯 CSS 或 CSS 模块，可跳过 --yes 参数以便在添加时自定义样式，例如运行 npx tambo add message-thread-full，并在提示时选择 "CSS Modules" 或 "Plain CSS"。

已有校验库：若使用 Yup/Joi 而非 Zod，用户可以选择仅为 Tambo schema 添加 Zod（技能推荐，改动小），或转换 schema（工作量更大，不推荐）。

Monorepo：在将使用 Tambo 的包目录下运行命令，例如 cd packages/web 后执行 npx tambo init --api-key=sk_...。

环境变量

npx tambo init --api-key=sk_... 会自动创建 .env.local 并写入与框架匹配的环境变量。若需手动设置（monorepo、只读文件系统），变量对应关系为：Next.js 使用 NEXT_PUBLIC_TAMBO_API_KEY，Vite 使用 VITE_TAMBO_API_KEY，CRA 使用 REACT_APP_TAMBO_API_KEY。

验证

技能给出验证方式：引入 useTambo，获取 thread 与 isIdle，在控制台打印连接状态，并渲染简单内容确认设置完成。

参考指南

技能列出若干专题参考，供需要更深入实现细节时使用：Components（创建并注册生成式与可交互 Tambo 组件）、Component Rendering（流式属性、加载状态、组件持久状态）、Threads and Input（会话、建议、语音输入、图片附件、线程切换）、Tools and Context（自定义工具、MCP 服务器、上下文助手、资源）、CLI Reference（tambo init、tambo add 与 create-app 的非交互参数与退出码）、Add Components to Registry（把现有 React 组件转换为带 schema 和描述的 Tambo 注册项）。这些参考在两个技能中重复提供，以便各自独立工作。

缺陷反馈

若遇到 @tambo-ai/react、@tambo-ai/client 或 tambo CLI 的缺陷、文档与实际行为不符、或技能中说明缺失或误导，技能建议提交 GitHub issue，并给出包含标题、期望行为、实际行为、复现步骤、环境（各包版本、框架与版本、Node.js 版本、操作系统）及其他上下文的模板。安全方面要求在上报前隐去 API key、token 与客户数据。技能还给出向用户提议开 issue 的话术，并强调必须先等用户确认再提交。