企业官网建设流程全解析

Tambo AI React生成式UI工具包：让AI直接渲染你的组件

【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai

Tambo AI（hydra-ai）解决的是AI应用前端的实际痛点：AI生成出来的界面用不上你自己的业务组件。它是一套面向React的开源生成式UI工具包，你把React组件用Zod模式注册进去，AI会自动选中合适的组件并流式传入props，渲染出用户可交互的界面。适合正在给聊天、看板、仪表盘类产品加AI能力的工程师，5分钟能跑起来。

Tambo AI能帮你做什么

让对话界面"长出"业务组件。当用户在聊天框输入"把Q1各月营收画成柱状图"时，Tambo会自己选中你注册的图表组件，填好数据，直接在对话流里渲染出来。你不需要自己解析意图、再手动路由到对应组件。

让AI修改已有组件而不是重画页面。做CRM或任务看板时，组件可以包装成interactable形态：用户说"给John Doe加一条跟进记录"，AI更新的是那个组件的既有状态，购物车、表格、便签这类需要持久交互的东西都能做。

让AI去调外部系统。当数据在Linear、Slack或你的数据库里时，接入MCP服务器后，AI可以直接调用外部工具查数据，再把结果渲染成你注册的卡片或表格组件，全程用户只用自然语言。

聊天中说"我有哪些项目"，AI通过MCP取数后渲染成组件卡片

🚀 最短路径跑起来

npm create tambo-app my-tambo-app # 脚手架，自动初始化git和tambo配置 cd my-tambo-app # 创建过程中会交互式执行 tambo init，填入你的API key npm run dev # 启动开发服务器

跑起来的前提是有一个LLM的API key（OpenAI、Anthropic、Gemini等，BYO key，SDK内置了模型对话循环）。后端可以选择Tambo托管，也可以用仓库里的Docker脚本自托管（Web、API、Postgres三个服务，配置见 SELF-HOSTING.md）。

这个仓库是个monorepo：react-sdk是你在自己项目里用的SDK，packages/backend、packages/core是后端核心，packages/ui-registry是预构建组件库，cli是命令行工具，apps/下是Web、API、文档站点。你实际只用得着前几个。

💡 核心机制：Zod模式就是AI的"函数签名"

整条链路是：用户自然语言消息 → 后端跑LLM对话循环，其中每个注册组件的propsSchema被转成LLM的工具定义，模型像调函数一样决定用哪个组件、传什么参数 → props以流式方式推到前端，React实时渲染，取消、断线重连由框架处理。

你可以把它理解成：每个组件都是暴露给AI的一个API，Zod模式就是它的接口文档。这段代码就是在做"注册"：

// 把一个图表组件注册给AI：名字、用途说明、实际组件、props的Zod模式 const components: TamboComponent[] = [ { name: "Graph", description: "Displays data as charts using Recharts library", component: Graph, propsSchema: z.object({ data: z.array(z.object({ name: z.string(), value: z.number() })), type: z.enum(["line", "bar", "pie"]), }), }, ];

需要持久状态的组件用withInteractable再包一层，比如便签、购物车，注册方式相同。TamboProvider除了components，还支持tools（浏览器端本地函数）和mcpServers（外部MCP服务）两个入口。

🔧 跟着做一遍：一句话让AI画图表

任务是做一个页面：用户在聊天框里说一句"Create a bar chart of monthly revenue for Q1"，页面就渲染出对应的柱状图。

// 1. 应用外层套上 TamboProvider，把组件清单交给 AI <TamboProvider apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!} // Tambo API key userKey={currentUserId} // 标识对话属于哪个用户 components={components} // 上面注册的组件 > <GraphPage /> </TamboProvider> // 2. 页面内用两个 hook：拿消息流状态 + 处理用户输入 const { messages, isStreaming } = useTambo(); // 消息列表和流式状态 const { value, setValue, submit } = useTamboThreadInput(); // 输入框与发送 // 3. 把 value/submit 接到输入框，渲染 messages，然后发一句提示词 // AI 选中 Graph 组件，props 流式到达，图表在对话流中画出来

组件可以用useTambo()返回的registerComponent在运行时注册（组件懒加载的场景），也可以用npx tambo add graph这类CLI命令直接从预构建组件库装进项目。仓库的 showcase/ 里每个组件页面都有同款可交互demo可以直接照着改。

自然语言生成图表：AI选中组件、流式填充props并渲染

你刚才完成的是Tambo的核心闭环：用Zod模式向AI声明组件的"接口"，之后选型、填参、渲染、流式更新都由它接管。

📌 几个容易踩的坑

• description写得含糊，AI就选错组件：模型完全靠name和description做选型。写清"这个组件干什么、什么时候用"，别只写"一个展示组件"。
• propsSchema必须和组件真实props一致：AI严格按模式生成props，模式里多写少写的字段会导致渲染报错，改组件props记得同步改模式。
• userKey和userToken二选一，必须传一个：TamboProvider靠它确定对话归属。服务端可信环境用userKey，纯客户端应用传OAuth的userToken。
• LLM的key要自己带：SDK跑对话循环但不带模型key，tambo init时配置；换provider（OpenAI/Anthropic/Gemini/Mistral等）改配置即可。
• interactable组件渲染时要给稳定id：状态更新靠id关联到既有实例，id不稳定会出现每条消息各长一个组件、改不动老组件的情况。

下一步可以看看

• README.md：完整功能清单，以及与Vercel AI SDK、CopilotKit的对比表，选型时值得花三分钟
• SELF-HOSTING.md：Docker自托管Web/API/Postgres三个服务的完整步骤
• react-sdk/：React SDK源码，hooks和流式状态处理都在这
• packages/ui-registry/：预构建组件库源码，前面用到的Graph组件就在这
• docs/content/docs/：完整文档站源码，从quickstart到MCP、自托管
• showcase/：可运行的示例应用，每个组件都有带AI交互的demo

如果你的产品里AI还只会输出文字，把它接上Tambo AI，大概是让它学会"操作界面"的捷径。

【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai