Tambo AI用Zod模式让React组件听懂自然语言【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-aiTambo AI 是一个面向 React 的开源生成式 UI 工具包它解决的问题很具体让 LLM 直接使用你写好的组件而不是只吐出一段文字。你注册组件时带上 Zod 模式智能体负责挑组件、填属性并流式推送给前端。会话循环、流式传输、状态管理由 SDK 和后端一起承担。本文讲清楚从安装到落地的最小路径也讲透核心机制和实际使用中容易踩的坑。它能做什么在聊天框里输入show me a graph of most populous countries智能体从你注册的组件里选中图表组件把数据、图表类型这些属性逐个流式传进来。图表渲染在对话流里你接着追问换成饼图组件就地更新不用重新发起请求。在已有界面的应用里同样的能力也能作用在业务组件上。你说把 John Doe 的状态改成 New智能体会找到你注册的 CRM 卡片组件更新对应那一条的属性。不需要预先接好按钮和表单自然语言就是操作入口。数据在外部系统时只需要配置 MCP 服务器地址。比如接入一个 Supabase MCP 服务智能体自己调用数据库工具再把查询结果交给组件渲染。聊天请求图表直接渲染输出 5分钟跑起来最小步骤如下。用 CLI 创建项目。它会克隆模板、装依赖、初始化 git并引导你生成 API key 写入 env 文件npm create tambo-applatest my-tambo-app cd my-tambo-app npm run dev打开localhost:3000开始对话。模板里已注册好图表组件输入 show me a graph 就能看到从输入到渲染的完整链路。换成自己的组件改src/lib/tambo.ts。组件和工具都注册在这个文件再传给页面的TamboProvider。不想用托管后端可以自托管。依次跑tambo-setup.sh、tambo-start.sh、init-database.sh细节见 SELF-HOSTING.md。顶层目录结构知道这几个就够react-sdkReact SDKProvider、hooks、MCP 客户端都在这里packages/backend智能体执行与流式后端整个系统的执行核心clitambo 命令行负责初始化和组件脚手架create-tambo-appnpm create 模板apps/api、apps/web自托管的后端NestJS与仪表盘Next.jsui-registry预构建组件库一条命令就能装进项目仓库内文档入口docs/content/docs/getting-started/quickstart.mdx。核心机制它到底怎么实现的核心设计一句话Zod 模式就是 LLM 的工具定义。完整链路是这样的。输入是你的自然语言消息。TamboProvider把所有注册组件的propsSchema作为函数工具定义交给 LLM模型就能像调用函数一样调用组件。LLM 输出组件名和属性后端先用 Zod 校验再把属性流式推给前端组件完成渲染。这条链路也解释了两种组件的分工。生成式组件比如图表针对一条消息渲染一次。可交互组件用withInteractable包一层状态跨轮次保留智能体在你下一轮指令里可以更新它——购物车、任务板属于这类。const components: TamboComponent[] [ { name: Graph, description: Display data as charts, supports line/bar/pie, component: Graph, propsSchema: z.object({ data: z.array(z.object({ name: z.string(), value: z.number() })), type: z.enum([line, bar, pie]), }), }, ];description不是装饰它是模型判断何时调用组件的主要依据。字段和描述写得越准生成的属性越稳定。MCP 服务查询演示 实战搭一个菜谱推荐功能场景定义用户问show me a recipe I can make。智能体不知道你有什么食材所以要先查再渲染。需要两件事写一个RecipeCard组件带份量调节按钮以及注册一个查可用食材的工具。const components [ { name: RecipeCard, description: Renders a recipe card, component: RecipeCard, propsSchema: z.object({ title: z.string().describe(Recipe name), ingredients: z.array(z.object({ name: z.string(), amount: z.number(), unit: z.string(), })), }), }, ]; const tools [ { name: get-available-ingredients, description: Get a list of all available ingredients, tool: () [pizza dough, tomatoes, basil, olive oil], inputSchema: z.object({}), outputSchema: z.array(z.string()), }, ];把这两个数组传给TamboProvider即可。智能体会先调用get-available-ingredients拿到食材清单再只用这些食材生成菜谱流式填进RecipeCard渲染。份量按钮走组件自身的 React 状态AI 生成的属性不会覆盖用户的本地操作。菜谱卡片由可用食材生成上手容易踩的坑现象智能体从不选你的组件只用纯文本回答。原因description是模型判断是否调用组件的主要依据写得含糊比如展示图表就难被命中。解法description 写成一句话使用场景propsSchema每个字段补.describe()。模型看懂字段含义后属性生成明显稳定。现象Provider 启动报错或不同用户的会话互相串。原因TamboProvider必须提供userKey或userToken之一这是会话归属的标识缺了后端无法区分线程。解法服务端渲染或可信后端用userKey纯前端应用用userTokenOAuth access token不要图省事省略。现象本地工具调用经常失败或超时。原因tools在浏览器里执行受 CORS 限制目标接口一抖整个工具调用就失败。解法让自有后端代理请求或把接口包成 MCP 服务器通过mcpServers传入把调用挪到服务端。现象自托管后前端连不上后端或 API key 无效。原因自托管栈是三个服务——Web8260、API8261、Postgres——而 CLI 初始化时生成的 key 属于托管云对本地 API 无效。解法用scripts/cloud/tambo-setup.sh生成 env 文件依次启动并初始化数据库后把apiKey换成本地实例的 key。谁适合用谁不适合Tambo AI 是 React 技术栈的方案前端依赖 react-sdk会话状态、智能体执行、流式传输都跑在它的后端上——托管云或自托管 Docker 三件套二选一。如果你的场景是让 AI 直接渲染并持续更新自有组件且团队就在 React 生态里值得试上手门槛不高会写 Zod 模式就会注册组件。如果只是要文字聊天输出或者你在 Vue、Svelte 技术栈上建议先看更通用的 LLM 应用框架。【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考