Tambo 生成式 UI 实战：3 步给 React 应用接上 AI 动态界面

Tambo 生成式 UI 实战3 步给 React 应用接上 AI 动态界面【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai用户在聊天框里输入按地区看下销售数据下方直接渲染出一张折线图没有刷新页面也没有人工选择。这是把 Tambo曾用名 Hydra接入 React 应用后的效果。Tambo 是一个开源的 React 生成式 UI 工具包你把自己的组件注册进去AI 自己选组件、自己生成 props再把结果流式推到界面上。它凭什么值得试Tambo 不只是调个 LLM、渲染文字的封装差异主要在这几点AI 自己选组件用 Zod schema 注册后AI 根据对话决定渲染哪个组件不用写 if/else 分支props 流式渲染LLM 生成一句就渲染一句不用等完整响应持久化有状态组件购物车、任务看板这类组件常驻页面追问一句把背景改成黄色就能原地更新两种部署形态Tambo Cloud 托管有免费额度或 Docker 自托管都能跑起来场景不用 Tambo用 Tambo用户想要不同的图表手写 if/else 分支渲染AI 自动选中已注册的图表组件用户追问换成柱状图手动同步状态Interactable 组件原地更新接外部数据源手写 API 对接直接接 MCP 服务器不想自己写组件的话仓库里有一份预构建组件库可以直接抄作业packages/ui-registry/。5 分钟跑起来三条命令出一个新项目npm create tambo-app my-tambo-app # 创建并初始化项目 cd my-tambo-app npx tambo init # 选择 cloud 或 self-hosted npm run devnpx tambo init会让你选一次部署方式。新手建议选 cloud免费额度够你把流程完整体验一遍不用搭服务器想部署到自己机器上再切自托管即可。已有的 React 项目也可以直接npm install tambo-ai/react再跑一次npx tambo init。一句话看懂原理打个开饭馆的比方。你的组件是厨房会做的菜每个组件的 ZodpropsSchema就是贴在菜名后面的规格说明。AI 像一个刚入职、不熟悉后厨的服务员——你把菜单组件注册表递给它每道菜有名字和规格单。它听懂客人想要什么翻菜单选一道菜把配料清单props写下来。Tambo 负责把配料清单变成端上桌的成品渲染成 React 组件。整个链路一行概括propsSchema → LLM 工具调用 → 组件渲染。一个例子走到底让 AI 帮你画图表拿最常见的画图表走一遍三步完成。第 1 步注册组件。告诉 Tambo 存在一个叫Graph的组件它接受哪些 propsconst components: TamboComponent[] [ { 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]), }), }, ];第 2 步套上 Provider。TamboProvider需要三样东西apiKey、userKey标识线程归属、以及刚才的组件列表聊天界面放在它内部。第 3 步发消息和渲染。两个钩子就够useTamboThreadInput()拿输入框和发送逻辑useTambo()拿消息列表和流式状态。然后输入按地区看下销售数据AI 会生成符合 schema 的数据和图表类型Graph直接渲染在界面上。想换柱状图再补一句就行不用改代码。进阶玩法 接入 MCP 外部服务组件打通之后AI 还缺的是数据。MCP模型上下文协议可以直接挂上 Linear、Slack、数据库这些外部服务不用手写 API 对接import { MCPTransport } from tambo-ai/react/mcp; const mcpServers [ { name: filesystem, url: http://localhost:8261/mcp, transport: MCPTransport.HTTP, }, ]; TamboProvider components{components} mcpServers{mcpServers} App / /TamboProvider;接上 Supabase MCP 服务器后在对话里直接查库就是这种感觉️ 注册浏览器本地工具有些活儿必须跑在浏览器里带登录态的 fetch、读 React 状态、操作 DOM。把函数写成TamboToolAI 需要时会自动调const tools: TamboTool[] [ { name: getWeather, description: 获取指定位置的天气信息, tool: async ({ location }) fetch(/api/weather?q${encodeURIComponent(location)}).then((r) r.json()), inputSchema: z.object({ location: z.string() }), outputSchema: z.object({ temperature: z.number(), condition: z.string(), location: z.string(), }), }, ];用户问北京天气怎么样AI 会自己调getWeather并把结果答出来传额外上下文AI 判断准不准很大程度取决于它知不知道页面现在的状态。contextHelpers可以把选中项、当前页面等信息喂给 AI比如selectedItems: () ({ key: selectedItems, value: A, B })用户说总结一下这几条时AI 就知道指的是哪几条。新手容易踩的坑⚠️ 现象AI 选不对组件或总选同一个。原因通常是description写得太含糊或者propsSchema字段太多又全是 optional。解法description 里写清楚什么场景下该用这个组件必填字段保持必填用z.enum收窄选项——AI 是靠读描述选组件的不是靠猜。现象接了 MCP 之后 schema 校验报错、构建失败。原因是 zod 3 和 zod 4 同时装了两套。解法只保留一份新项目推荐npm install zod^4 zod-to-json-schema^3.25.1。现象线程状态混乱用户 A 能看到用户 B 的对话。原因是TamboProvider没传userKey或userToken线程归属没标识。解法服务端环境传userKey客户端应用传 OAuth token 形式的userToken。写在最后Tambo 适合两类场景给现有 React 应用加会说话的界面或者直接搭 AI 原生的数据看板。下一步建议读一遍快速上手文档再从预构建组件库里挑一个抄进自己的项目里。官方文档快速上手docs/content/docs/getting-started/quickstart.mdx预构建组件库示例packages/ui-registry/示例项目showcase/React SDK 源码react-sdk/【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考