Tambo Plugin for Claude Code 指南为你的 Agent 接入生成式 UI 能力【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-aiTambo Plugin 是一套面向 Claude Code 的官方技能包它把 TamboGenerative UI SDK for React的建站与集成能力封装成两个可被 Agent 自动调用的技能Skills从零搭建生成式 UI 应用或在现有 React 项目中接入 AI 驱动的交互组件。阅读本文后你将掌握插件的安装、调用与管理方式理解两个技能的职责边界并能顺着仓库内的参考文档继续深入组件、渲染、线程、工具与 CLI 的完整实现。插件是什么本仓库 plugins/tambo/README.md 的核心定位一句话概括Build agents that speak your UI——让 AI Agent 不只是聊天而是能够生成、渲染并持续维护你的 React 界面。Tambo 本身是 Generative UI SDK for React对应仓库根目录 README.md 的项目描述提供tambo-ai/react、tambo-ai/client与tamboCLI 三层能力。而 Claude Code 插件把这三层能力以技能的形式注入到 Claude Code 的 Agent 工作流中当开发者提问时Claude Code 会根据问题语义自动加载对应技能再由技能引导执行脚手架搭建、依赖安装、Provider 配置、组件注册、CLI 调用等一整套操作。前置条件与安装插件面向 Claude Code 环境通过其/plugin命令体系安装。按照 plugins/tambo/README.md 的说明一次性完成两步# 添加 marketplace 并安装一次性操作 /plugin marketplace add https://github.com/tambo-ai/tambo /plugin install tambomarketplace add将 Tambo 插件源注册进 Claude Code 的插件市场让客户端知道去哪里拉取插件清单plugin install实际下载并启用tambo插件。安装完成后插件提供两个可用的技能Skills后续可直接在对话中按技能名调用。需要注意的是技能本身需要能访问tamboCLI通过npx tambo执行以及有效的项目 API Key这通常由技能内部的tambo init认证流程完成。两个内置技能从零新建 vs 现有项目集成根据 plugins/tambo/README.md 的技能表插件内置两个互补的技能技能描述触发词tambo:generative-ui从零构建生成式 UI 应用new project、 generative UI、 create apptambo:building-with-tambo在现有 React 应用中集成 Tamboadd Tambo、 existing project、 integrate两个技能在仓库中均有完整定义generative-ui/SKILL.md 与 building-with-tambo/SKILL.md。两者的边界非常清晰新项目走 generative-ui老项目改造走 building-with-tambo这一点在两者 frontmatter 的描述中互相做了交叉引用避免 Agent 误选。generative-ui一条提示词从零到运行该技能强调One-Prompt Flow把从零到可运行应用压缩在单次对话中。流程分三步一次性收集偏好用一次AskUserQuestion最多 3 个问题问清要构建什么应用框架Next.js 推荐 / Vite应用名自动转 kebab-case若用户消息里已包含答案则跳过连续执行不中断依次执行脚手架、认证初始化、创建定制组件、启动开发服务器任何一步失败即停止并向用户报告收尾总结说明已完成的搭建内容、组件清单、运行 URLNext.js 默认http://localhost:3000Vite 默认http://localhost:5173。关键命令序列摘自 generative-ui/SKILL.md# 2a. 脚手架--skip-tambo-init 避免在非交互环境卡在认证 npx tambo create-app app-name --templatestandard --skip-tambo-init cd app-name # 2b. 认证并初始化打开浏览器授权轮询最长 15 分钟 npx tambo init --project-nameapp-name模板standard/vite/analytics/expo自带聊天 UI、TamboProvider接线、组件注册表和启动组件因此技能只需要再补 1~2 个贴合用户需求的定制组件即可。building-with-tambo在现有 React 项目中的六步集成该技能面向已有代码库核心原则是检测现有技术栈并保持既有模式Detect tech stack and integrate Tambo while preserving existing patterns。完整工作流见 building-with-tambo/SKILL.md步骤内容关键动作1检测技术栈读package.json、锁文件、next.config.*/vite.config.*、monorepo 布局2与用户确认汇报框架/包管理器/样式/校验库检测结果询问偏好3安装依赖按检测到的包管理器安装tambo-ai/react与zod4创建 Provider以apiKey、userKey、components接线TamboProvider5创建组件注册表建立lib/tambo.ts导出TamboComponent[]6添加聊天 UI通过tambo add安装预置组件配置路径别名与globals.css技术栈检测清单技能内置了一张检测表building-with-tambo/SKILL.md技术检测依据Next.jsnext在 dependencies、存在next.config.*Vitevite在 devDependencies、存在vite.config.*Create React Appreact-scripts在 dependenciesTypeScripttypescript在 deps、存在tsconfig.jsonTailwindtailwindcss在 deps、存在配置文件Plain CSS无 Tailwindsrc/下有 CSS 文件Zodzod在 dependencies包管理器与 monorepo 处理技能强调永远检测并使用项目自身的包管理器不要假定 npmbuilding-with-tambo/SKILL.md锁文件管理器安装命令package-lock.jsonnpmnpm install tambo-ai/reactyarn.lockYarnyarn add tambo-ai/reactpnpm-lock.yamlpnpmpnpm add tambo-ai/reactmonorepo 场景下需在正确的 workspace 安装并注意三个坑tambo init生成的.env.local要落在 Vite 的envDir指向处依赖提升导致解析失败时需在根目录补装如yarn add -W tambo-ai/react/路径别名必须解析到 workspace 内的src/而非仓库根。集成后的环境变量若需手动配置monorepo、只读文件系统等场景按下表设置框架变量Next.jsNEXT_PUBLIC_TAMBO_API_KEYViteVITE_TAMBO_API_KEYCRAREACT_APP_TAMBO_API_KEY使用方式自动选择或直接调用插件安装后技能会基于用户的问题自动匹配提到 new project、 generative UI、 create app 走generative-ui提到 add Tambo、 existing project、 integrate 走building-with-tambo。也可以显式强制调用plugins/tambo/README.md/tambo:generative-ui # 构建新的生成式 UI 应用 /tambo:building-with-tambo # 在现有项目中集成 Tambo深入实施指南按阶段加载参考文档两个技能的参考文档按集成阶段组织Agent 会在到达对应步骤时按需加载。以下是 building-with-tambo/SKILL.md 中定义的加载时机这些参考资料同样复制了一份到generative-ui下使两个技能可独立运行参考文档加载时机主题references/components.md第 5 步Generative 与 interactable 组件、propsSchema、ComponentRendererreferences/component-rendering.md构建自定义消息渲染时流式 props、加载态、持久化状态references/threads.md构建自定义聊天 UI 时useTambo()、useTamboThreadInput()、userKey/userToken 认证、建议、语音references/tools-and-context.md接入宿主应用 API 时defineTool()、MCP 服务器、contextHelpersreferences/cli.md第 6 步tambo add组件库、tambo init参数、非交互模式references/skills.md搭建完成后的下一步项目级 Agent 技能CLI 与 Dashboard 管理references/add-components-to-registry.md注册现有应用组件时分析 props、生成 Zod schema、撰写描述本技能独有组件体系Generative 与 Interactablecomponents.md 将组件划分为两类Generative生成式AI 按需创建、一次性渲染props 由 AI 生成一次。注册时提供name、component、description告诉 AI 何时使用和propsSchemaZod 对象每个字段需.describe()渲染时用ComponentRenderer展示消息中的component内容块。Interactable可交互式开发者预置在 UI 中AI 可观察并更新 props实现双向同步。仓库实现位于 react-sdk/src/hoc/with-tambo-interactable.tsx其工作方式是组件挂载时自动注册auto-registration、当前 props 自动进入上下文、自动注册更新工具、用户编辑与 AI 更新双向生效。典型场景是设置页、表单、任务看板。选择依据可参考下表GenerativeInteractableAI 按需创建开发者预置一次性渲染会话内持久props 仅生成一次AI 可更新 props聊天回复、仪表盘设置、表单、任务看板流式渲染与状态AI 生成 props 是流式的流式渲染与持久化状态实现见 react-sdk/src/v1/hooks/use-tambo-v1-stream-status.ts 与 use-tambo-v1-component-state.ts。component-rendering.md 给出两个核心 HookuseTamboStreamStatusProps()返回整体streamStatusisPending/isStreaming/isSuccess/isError和逐 props 的propStatus可用于在 props 未到齐前显示骨架屏或给仍在流式传入的字段加呼吸动画useTamboComponentState(key, initialValue, debounceTime?)把用户可编辑的状态暴露给 AI 并持久化默认 500ms 防抖meta.flush()可立即冲刷待同步的更新。流式场景的四条最佳实践Zod schema 中尽量将 props 设为 optional、缺失数据显示骨架屏而非报错、用可选链items?.map(...)、在streamStatus.isSuccess之前禁用交互。工具、MCP 与上下文要让 Agent 真正会做事需要给它工具和数据。tools-and-context.md 覆盖四类能力自定义工具模块级用defineTool({ name, description, inputSchema, outputSchema, tool })已有 tRPC/GraphQL/REST 客户端的应用则在组件内用registerTool()动态注册用useRef守卫避免重复注册并在变更类工具后调用utils.{router}.invalidate()刷新缓存MCP 服务器服务端Tambo Dashboard 配置性能更快、支持 OAuth或客户端React 代码中传mcpServers可连 localhostContext Helpers每条消息都会携带的动态上下文如当前页面 URL、当前时间支持运行时增删Context Attachments 与 Resources前者是一次性上下文下条消息后清除后者是支持提及的静态/动态资源。CLI 的非交互设计为 Agent 而生的命令行tamboCLI 是插件所有自动化动作的底层执行者专门为 Agent 场景做了非交互化设计cli.md非交互检测满足以下任一条件即进入非交互模式——stdin/stdout非 TTY、设置了CI环境变量、GITHUB_ACTIONStrue。此时 CLI 不再原地等待输入而是直接打印引导信息并以退出码 2 结束。可用FORCE_INTERACTIVE1强制交互需真实 TTY。退出码约定码含义0成功1错误网络、参数非法等2需要用户操作——查看 stderr 中的确切命令Agent 常用命令源码实现参见 cli/src/commands/init.ts、cli/src/commands/create-app.ts、cli/src/commands/skills.tsnpx tambo init --api-keysk_... # 直接传入 API Key npx tambo init --project-namemyapp --yes # 创建新项目跳过所有提示 npx tambo add message-thread-full --yes # 添加组件跳过确认 npx tambo add form --dry-run # 预览将写入的文件而不实际安装 npx tambo add form --prefixsrc/components # 自定义组件目录 npx tambo list --yes # 无提示列出组件 npx tambo auth login / npx tambo auth status # 认证 npx tambo full-send # 一条命令完成完整搭建tambo add支持一次添加多个组件、--dry-run预览、--legacy-peer-deps解决依赖冲突其实现cli/src/commands/add/index.ts中同时处理了--yes跳过提示、混合目录位置自动继续等非交互细节。组件库tambo add可安装的组件包括聊天三件套message-thread-full/message-thread-panel/message-thread-collapsible以及message、message-input、message-suggestions、control-bar、form、graph、map、thread-history、edit-with-tambo-button、mcp-components等。每个组件都以源码复制的方式进入项目而非作为依赖引入预接线了 Tambo hooks、Tailwind 样式与完整 TypeScript 类型。管理插件安装后可通过 Claude Code 的/plugin命令管理插件状态plugins/tambo/README.md/plugin enable tambo # 若被禁用则启用 /plugin disable tambo # 临时禁用 /plugin uninstall tambo # 彻底移除验证与问题反馈集成完成后技能内置了验证手段building-with-tambo 提供了一个最小验证组件building-with-tambo/SKILL.md通过useTambo()的isIdle判断连接是否就绪generative-ui 则引导用户在浏览器中键入会命中已注册组件的提示词如 Show me a stats card for monthly revenue来验证 AI 是否用生成 props 渲染出组件。两个技能均内置了 Bug 上报指引若在使用中遇到tambo-ai/react、tambo-ai/client或tamboCLI 的缺陷、文档与实际行为不符、技能说明缺失等问题可参考 building-with-tambo/SKILL.md 中提供的问题模板提交反馈——模板包含预期行为、实际行为、复现步骤、环境信息各包版本、框架版本、Node 版本、操作系统等字段并特别提醒在日志中脱敏 API Key 与令牌。小结Tambo Plugin 的价值在于把装 SDK、配 Provider、写注册表、调 CLI这些机械步骤转化为两个语义清晰的 Agent 技能generative-ui负责从零孵化新应用building-with-tambo负责在既有代码库中无损集成。两者共享同一套底层能力组件注册表、流式渲染、线程管理、工具与上下文、非交互 CLI并以plugins/tambo/skills/下的 Markdown 参考文档作为随时可加载的操作手册。想继续深入可以从 generative-ui/SKILL.md 与 building-with-tambo/SKILL.md 出发按集成阶段逐个阅读references/目录下的专题文档。【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
