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

Tambo AI React生成式UI工具包让AI直接渲染你的组件【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-aiTambo AIhydra-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 keyOpenAI、Anthropic、Gemini等BYO keySDK内置了模型对话循环。后端可以选择Tambo托管也可以用仓库里的Docker脚本自托管Web、API、Postgres三个服务配置见 SELF-HOSTING.md。这个仓库是个monoreporeact-sdk是你在自己项目里用的SDKpackages/backend、packages/core是后端核心packages/ui-registry是预构建组件库cli是命令行工具apps/下是Web、API、文档站点。你实际只用得着前几个。 核心机制Zod模式就是AI的函数签名整条链路是用户自然语言消息 → 后端跑LLM对话循环其中每个注册组件的propsSchema被转成LLM的工具定义模型像调函数一样决定用哪个组件、传什么参数 → props以流式方式推到前端React实时渲染取消、断线重连由框架处理。你可以把它理解成每个组件都是暴露给AI的一个APIZod模式就是它的接口文档。这段代码就是在做注册// 把一个图表组件注册给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跑对话循环但不带模型keytambo init时配置换providerOpenAI/Anthropic/Gemini/Mistral等改配置即可。interactable组件渲染时要给稳定id状态更新靠id关联到既有实例id不稳定会出现每条消息各长一个组件、改不动老组件的情况。下一步可以看看README.md完整功能清单以及与Vercel AI SDK、CopilotKit的对比表选型时值得花三分钟SELF-HOSTING.mdDocker自托管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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考