让 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 keyOpenAI、Anthropic、Gemini、Mistral 等任何 OpenAI 兼容接口都行前端只负责注册组件。仓库是 monorepopackages/react-sdk是前端 SDKpackages/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 分钟能做完的晚餐模型生成配料和步骤填进卡片还能按人数缩放用量。 云端还是自托管走云端后端托管会话状态、编排都归它管免费额度够起步。适合先把前端跑通、验证产品形态。自托管三个服务WebNext.js8260 端口、APINestJS8261 端口、PostgreSQL5433 端口。步骤大致是跑./scripts/cloud/tambo-setup.sh它从docker.env.example拷出docker.env把数据库密码、各类 32 位密钥、模型 API key 换成自己的值跑./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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 让 AI 直接渲染你的 React 组件：Tambo 生成式 UI 工具包上手
让 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 keyOpenAI、Anthropic、Gemini、Mistral 等任何 OpenAI 兼容接口都行前端只负责注册组件。仓库是 monorepopackages/react-sdk是前端 SDKpackages/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 分钟能做完的晚餐模型生成配料和步骤填进卡片还能按人数缩放用量。 云端还是自托管走云端后端托管会话状态、编排都归它管免费额度够起步。适合先把前端跑通、验证产品形态。自托管三个服务WebNext.js8260 端口、APINestJS8261 端口、PostgreSQL5433 端口。步骤大致是跑./scripts/cloud/tambo-setup.sh它从docker.env.example拷出docker.env把数据库密码、各类 32 位密钥、模型 API key 换成自己的值跑./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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考