Tambo AI 生成式 UI 完整指南让 React 组件听懂自然语言5 分钟跑起来【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai给 AI 聊天产品加生成界面的能力多数人最后要手动做一堆脏活解析模型输出的 JSON、校验参数、分发到对应组件还得自己处理流式中断和断线。Tambo AI原名 Hydra AI用 Zod 模式注册你的 React 组件模型就能自动选组件、流式下发 props 直接渲染会话状态、agent 执行循环和 MCP 接入由配套后端托管也支持自托管。它是什么Tambo AI 是一个面向 React 的生成式 UI 工具包生成式 UI界面不再完全写死而是由模型根据对话内容动态决定渲染哪个组件、填什么数据。它不只是前端 SDK仓库是一个 monoreporeact-sdk/是装进你应用的tambo-ai/reactapps/api是基于 NestJS 的后端负责会话状态与 agent 执行再加cli/脚手架和packages/下的核心库。简单说它是前端 SDK 可自托管后端的完整栈适合想给自己的产品加 AI 驱动界面、又不想从零搭 agent 基础设施的 React 团队。差异化亮点模型自己决定渲染哪个组件。传统 AI SDK 的常见做法是工具调用 → 你写死这个工具对应哪个组件而 Tambo 把 Zod 模式直接转成 LLM 工具定义哪个组件更合适由模型判断你不用维护映射表。组件状态与模型双向同步。可交互组件放在页面上后当前 props 会自动上报给模型模型也可以更新它们——点按钮改一次、再用自然语言改一次操作的是同一个组件。多数同类方案只支持模型生成、用户只读。MCP 协议内置。MCPModel Context Protocol是模型连接外部工具与数据源的开放协议。Tambo 完整支持工具、提示词、elicitations向用户追问补全信息和 sampling接 Linear、Slack、数据库等于在TamboProvider上多传一个mcpServers数组。后端可自托管SDK 是 MIT 许可。Cloud 和自托管跑的是同一套后端数据敏感的场景不用把会话状态交给第三方。实际怎么用对话里直接长出界面。官方模板演示了最典型的闭环注册一个 RecipeCard 组件和一个获取可用食材的本地工具输入给我看一道我能做的菜模型先调工具拿到食材清单再填好 props 流式渲染出卡片。你全程没写渲染分支和参数校验快速开始文档里的完整步骤就是这个流程。用自然语言操控页面上已有的组件。控制条的演示展示了常驻 UI 元素和对话协同工作用户可以点按钮直接改参数也可以说一句话让模型去改同一个组件的 props两种操作互不冲突。适合仪表盘、编辑器这类界面常驻、参数常变的场景。把外部系统接进对话。配一个mcpServers列表后模型可以在对话里调用数据库、工单系统的工具。仓库里 Supabase MCP 客户端的演示展示了一次完整的 MCP 对话流MCP 概念文档 覆盖客户端连接、服务端连接和具体特性。首次上手最快路径是从模板起步约 5 分钟npm create tambo-applatest my-tambo-app # 拉模板、装依赖、初始化 git 并生成 API key cd my-tambo-app npm run dev # 打开 localhost:3000 即可对话已有 React 项目则装tambo-ai/react后跑npx tambo init选择接入 Cloud 还是自托管想快速体验预置组件npx tambo full-send一行就能装好一批常用组件并接好线。想自托管跑仓库本身克隆后按顺序执行./scripts/cloud/tambo-setup.sh→ 编辑docker.env→tambo-start.sh起服务 →init-database.sh初始化库Web 在 8260、API 在 8261。核心机制拆解Zod 模式即组件契约。注册一个生成式组件只需给name、description、组件本身和propsSchema模式会被转成 LLM 的工具定义模型调用组件就像调函数参数自动生成Tambo 负责校验和渲染const components [ { 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]), }), }, ];props 是随模型生成过程流式下发的useTamboStreamStatus()可以拿到属性级别的流式状态做渐进渲染。两类组件两种生命周期。一次性生成式组件图表、摘要由模型在回复里创建常驻的可交互组件用withTamboInteractable(Note, { componentName, description, propsSchema })包装后自己放在页面上包装会自动做两件事把当前 props 上报给模型、把更新操作注册成工具于是用户手动改 模型语言改双向成立。本地工具。TamboTool数组里声明的函数跑在浏览器里适合 DOM 操作、带登录态的 fetch、读取 React 状态这类前端专属操作输入输出同样用 Zod 模式约束模型按需调用。实践中的注意点自托管要配 5 个必填项POSTGRES_PASSWORD加上API_KEY_SECRET、PROVIDER_KEY_SECRET、NEXTAUTH_SECRET三个 32 字符密钥再留一个FALLBACK_OPENAI_API_KEY当默认 LLM key也支持 Anthropic、Gemini、Mistral 等。docker.env.example里是占位值生产前必须换成强密钥。Zod 依赖只能装一套propsSchema/工具 schema 依赖zod-to-json-schemaZod 3 和 4 二选一新项目推荐 Zod 4混装会出问题。TamboProvider必须传userKey或userToken之一来标识会话所有者服务端可信环境用userKey纯客户端应用用 OAuth token。自托管含 Web、API、PostgreSQL 三个服务端口分别是 8260/8261/5433起之前先确认没被占用生产部署记得规划备份与升级流程。本地工具在浏览器执行敏感逻辑和密钥不要写进前端带认证的请求要自己显式携带凭证。完整的端口、环境变量和运维细节都在 SELF-HOSTING.md 和 docs/ 文档站源码里。Tambo AI 把模型输出和你的组件之间的胶水层收进了 SDK 和后端你只需要描述组件长什么样。先跑一遍模板应用再挑一个现有页面里的真实组件注册进去是验证它是否适合你项目最快的方式。【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Tambo AI 生成式 UI 完整指南：让 React 组件听懂自然语言，5 分钟跑起来
Tambo AI 生成式 UI 完整指南让 React 组件听懂自然语言5 分钟跑起来【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai给 AI 聊天产品加生成界面的能力多数人最后要手动做一堆脏活解析模型输出的 JSON、校验参数、分发到对应组件还得自己处理流式中断和断线。Tambo AI原名 Hydra AI用 Zod 模式注册你的 React 组件模型就能自动选组件、流式下发 props 直接渲染会话状态、agent 执行循环和 MCP 接入由配套后端托管也支持自托管。它是什么Tambo AI 是一个面向 React 的生成式 UI 工具包生成式 UI界面不再完全写死而是由模型根据对话内容动态决定渲染哪个组件、填什么数据。它不只是前端 SDK仓库是一个 monoreporeact-sdk/是装进你应用的tambo-ai/reactapps/api是基于 NestJS 的后端负责会话状态与 agent 执行再加cli/脚手架和packages/下的核心库。简单说它是前端 SDK 可自托管后端的完整栈适合想给自己的产品加 AI 驱动界面、又不想从零搭 agent 基础设施的 React 团队。差异化亮点模型自己决定渲染哪个组件。传统 AI SDK 的常见做法是工具调用 → 你写死这个工具对应哪个组件而 Tambo 把 Zod 模式直接转成 LLM 工具定义哪个组件更合适由模型判断你不用维护映射表。组件状态与模型双向同步。可交互组件放在页面上后当前 props 会自动上报给模型模型也可以更新它们——点按钮改一次、再用自然语言改一次操作的是同一个组件。多数同类方案只支持模型生成、用户只读。MCP 协议内置。MCPModel Context Protocol是模型连接外部工具与数据源的开放协议。Tambo 完整支持工具、提示词、elicitations向用户追问补全信息和 sampling接 Linear、Slack、数据库等于在TamboProvider上多传一个mcpServers数组。后端可自托管SDK 是 MIT 许可。Cloud 和自托管跑的是同一套后端数据敏感的场景不用把会话状态交给第三方。实际怎么用对话里直接长出界面。官方模板演示了最典型的闭环注册一个 RecipeCard 组件和一个获取可用食材的本地工具输入给我看一道我能做的菜模型先调工具拿到食材清单再填好 props 流式渲染出卡片。你全程没写渲染分支和参数校验快速开始文档里的完整步骤就是这个流程。用自然语言操控页面上已有的组件。控制条的演示展示了常驻 UI 元素和对话协同工作用户可以点按钮直接改参数也可以说一句话让模型去改同一个组件的 props两种操作互不冲突。适合仪表盘、编辑器这类界面常驻、参数常变的场景。把外部系统接进对话。配一个mcpServers列表后模型可以在对话里调用数据库、工单系统的工具。仓库里 Supabase MCP 客户端的演示展示了一次完整的 MCP 对话流MCP 概念文档 覆盖客户端连接、服务端连接和具体特性。首次上手最快路径是从模板起步约 5 分钟npm create tambo-applatest my-tambo-app # 拉模板、装依赖、初始化 git 并生成 API key cd my-tambo-app npm run dev # 打开 localhost:3000 即可对话已有 React 项目则装tambo-ai/react后跑npx tambo init选择接入 Cloud 还是自托管想快速体验预置组件npx tambo full-send一行就能装好一批常用组件并接好线。想自托管跑仓库本身克隆后按顺序执行./scripts/cloud/tambo-setup.sh→ 编辑docker.env→tambo-start.sh起服务 →init-database.sh初始化库Web 在 8260、API 在 8261。核心机制拆解Zod 模式即组件契约。注册一个生成式组件只需给name、description、组件本身和propsSchema模式会被转成 LLM 的工具定义模型调用组件就像调函数参数自动生成Tambo 负责校验和渲染const components [ { 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]), }), }, ];props 是随模型生成过程流式下发的useTamboStreamStatus()可以拿到属性级别的流式状态做渐进渲染。两类组件两种生命周期。一次性生成式组件图表、摘要由模型在回复里创建常驻的可交互组件用withTamboInteractable(Note, { componentName, description, propsSchema })包装后自己放在页面上包装会自动做两件事把当前 props 上报给模型、把更新操作注册成工具于是用户手动改 模型语言改双向成立。本地工具。TamboTool数组里声明的函数跑在浏览器里适合 DOM 操作、带登录态的 fetch、读取 React 状态这类前端专属操作输入输出同样用 Zod 模式约束模型按需调用。实践中的注意点自托管要配 5 个必填项POSTGRES_PASSWORD加上API_KEY_SECRET、PROVIDER_KEY_SECRET、NEXTAUTH_SECRET三个 32 字符密钥再留一个FALLBACK_OPENAI_API_KEY当默认 LLM key也支持 Anthropic、Gemini、Mistral 等。docker.env.example里是占位值生产前必须换成强密钥。Zod 依赖只能装一套propsSchema/工具 schema 依赖zod-to-json-schemaZod 3 和 4 二选一新项目推荐 Zod 4混装会出问题。TamboProvider必须传userKey或userToken之一来标识会话所有者服务端可信环境用userKey纯客户端应用用 OAuth token。自托管含 Web、API、PostgreSQL 三个服务端口分别是 8260/8261/5433起之前先确认没被占用生产部署记得规划备份与升级流程。本地工具在浏览器执行敏感逻辑和密钥不要写进前端带认证的请求要自己显式携带凭证。完整的端口、环境变量和运维细节都在 SELF-HOSTING.md 和 docs/ 文档站源码里。Tambo AI 把模型输出和你的组件之间的胶水层收进了 SDK 和后端你只需要描述组件长什么样。先跑一遍模板应用再挑一个现有页面里的真实组件注册进去是验证它是否适合你项目最快的方式。【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考