企业官网建设流程全解析

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

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

用户问"把上季度的销售画成趋势图"，聊天框里回他一段文字，他得自己再画一遍。想让界面跟着对话长出来，自己写组件选择和状态同步又太琐碎。Tambo 是一个开源的 React 生成式 UI 工具包，思路是把 AI 直接接到你现有的组件库上：模型挑组件、填属性，你只管把界面画好。

📍 它是什么，解决什么问题

一句话：Tambo 让 LLM 会话循环替你跑，你的 React 组件就是它的"渲染出口"。

它替你接管的有四件事：会话循环、组件属性流式下发、组件状态持久化、外部工具与数据源接入。你带自己的模型 API key（OpenAI、Anthropic、Gemini、Mistral 等，任何 OpenAI 兼容接口都行），前端只负责注册组件。

仓库是 monorepo：packages/react-sdk是前端 SDK，packages/backend是负责会话状态与 agent 执行的后台，cli/是脚手架，文档在 docs/content/docs/。

🚀 三步跑起来

npm create tambo-app my-tambo-app cd my-tambo-app npm run dev

脚手架会装好依赖、初始化 git，并引导你建项目、生成 API key 写进环境变量文件。启动后打开localhost:3000，就能开聊了。

想跳过自动初始化，给第一条命令加--skip-git-init --skip-tambo-init。组件和工具怎么注册，看/src/lib/tambo.ts；怎么传进应用，看/src/app/chat/page.tsx。

🔧 它到底怎么工作

把你的组件想成一张菜单。每个菜名是组件名，一句话描述是它干什么，配料表是 Zod 模式。这份菜单整体交给模型，模型把它当成可调用的函数。

注册一个组件长这样：

{ name: "Graph", description: "用 Recharts 把数据画成图表", component: Graph, propsSchema: z.object({ data: z.array(z.object({ name: z.string(), value: z.number() })), type: z.enum(["line", "bar", "pie"]), }), }

你问"按地区看看销售额"，模型就会点名Graph，把数据一条条流式推进data字段，图表边生成边渲染，不用等一整段 JSON 落盘。中断、断线重连、出错恢复，后台都处理好了。

两种组件形态

• 一次性生成组件：消息一来，渲染完就不再变。图表、摘要、数据卡片适合用它。
• 可交互组件：用withInteractable包一层，它会持久化，后续多轮对话都能更新它。任务板、购物车、表格这类"越聊越细"的东西，用这种。

外部数据怎么进

给TamboProvider配一组 MCP 服务器，指向项目管理、数据库或你自己的服务，模型就能在对话中调它们的工具取真实数据，再把结果填进组件。浏览器里要跑的逻辑——读 React 状态、带鉴权的请求——也可以注册成本地工具，模型按需调用。

🎬 看一个典型场景

销售团队把 CRM 接进来之后，操作界面就是说话："把上周新进的潜在客户拉出来"。模型点名客户列表组件，填好行数据，界面直接出结果；下一句"给其中三家发跟进邮件"，它再调对应的工具组件。整个过程人不用切菜单、点按钮。

再举个小的：注册一张"菜谱卡"，propsSchema里放标题、配料数组、备餐分钟数。说一句"给我 20 分钟能做完的晚餐"，模型生成配料和步骤填进卡片，还能按人数缩放用量。

🏁 云端还是自托管

走云端：后端托管，会话状态、编排都归它管，免费额度够起步。适合先把前端跑通、验证产品形态。

自托管：三个服务，Web（Next.js，8260 端口）、API（NestJS，8261 端口）、PostgreSQL（5433 端口）。步骤大致是：

1. 跑./scripts/cloud/tambo-setup.sh，它从docker.env.example拷出docker.env
2. 把数据库密码、各类 32 位密钥、模型 API key 换成自己的值
3. 跑./scripts/cloud/tambo-start.sh起服务，再跑init-database.sh初始化库

起完后浏览器开localhost:8260就是控制台。OAuth 登录、Kubernetes 清单、备份与升级的操作细节都在 SELF-HOSTING.md 里。

📚 下一步

先按"三步跑起来"把本地环境跑通，对着聊天界面改一改注册列表里的组件，把示例换成你自己的。前端稳了之后，再看contextHelpers怎么把当前页面、用户角色塞给模型，以及 MCP 怎么接你自己的服务。文档入口：快速开始、完整 docs 目录、开发约定。

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