tambo-ai/tambo - 项目详情

项目介绍快速开始学习路径项目截图 2 贡献者 52 增长趋势代码统计生态关系项目时间线项目竞品依赖分析上榜历史

5分钟上手 Tambo：构建生成式UI的React智能体

本指南将帮助你在5分钟内创建一个React应用，集成Tambo智能体并看到组件动态渲染的效果

环境要求

支持的操作系统

macOS Windows Linux

运行环境

Node.js >= 18.0 必需

所需工具

npm 或 yarn

包管理工具

必需

操作步骤

创建React应用并安装Tambo

使用Create React App快速搭建项目并安装Tambo核心包

创建TypeScript React应用

npx create-react-app my-tambo-app --template typescript

进入项目目录

cd my-tambo-app

安装Tambo核心包

npm install @tambo-ai/tambo

预期结果：项目创建成功，Tambo包安装完成

如果已有React项目，可直接执行npm install @tambo-ai/tambo

配置TamboProvider

在应用入口文件中设置TamboProvider，这是Tambo的核心上下文

预期结果：在App.tsx中看到TamboProvider配置

记得替换YOUR_API_KEY为实际的API密钥

创建示例组件并注册

创建一个简单的React组件，并使用Zod模式注册到Tambo中

预期结果：组件成功注册，可以在智能体中使用

Zod模式定义了组件接收的参数类型，智能体会根据模式自动匹配

添加智能体交互界面

在应用中添加输入框和显示区域，让用户可以与智能体交互

预期结果：应用中出现输入框和组件渲染区域

useTamboThreadInput() hook会自动处理输入状态

启动应用并测试

运行开发服务器，测试智能体是否能动态渲染组件

启动开发服务器

npm start

预期结果：浏览器自动打开 http://localhost:3000，看到应用界面

在输入框中尝试输入'显示欢迎消息'，应该能看到WelcomeMessage组件渲染

验证成功

确认Tambo智能体已正确集成并能动态渲染UI

应用在浏览器中正常打开

输入框可以输入文本

输入'显示欢迎消息'后，页面动态渲染出欢迎组件

组件正确显示传入的参数内容

快速提示

配置

使用userKey进行服务器端身份验证，userToken用于客户端

开发

Zod模式要尽可能精确，这有助于智能体准确匹配组件

性能

Tambo支持流式传输属性，可以实现更流畅的UI更新体验

常见问题

TamboProvider报错：缺少userKey或userToken

确保在TamboProvider中提供了userKey或userToken参数，用于标识线程所有者

组件注册后智能体无法识别

检查Zod模式是否正确，确保模式与组件props类型匹配

TypeScript类型错误

确保安装了正确的TypeScript版本（>=4.9），并检查类型导入是否正确

智能体没有响应

检查API密钥是否正确，网络连接是否正常，以及TamboProvider配置是否完整

下一步

查看官方文档

深入了解Tambo的高级功能和配置选项

探索内置组件

尝试Tambo提供的其他内置组件和示例

集成自己的业务组件

将项目中的现有组件注册到Tambo中

配置MCP支持

设置模型上下文协议，增强智能体的上下文理解能力