Tambo 1.0：让AI代理直接渲染React组件的开源工具包

Tambo 1.0 是一个新开源的 React 工具包，可以让开发者构建能够动态渲染UI组件的AI代理。不同于传统的聊天机器人只能返回文本，Tambo 让AI代理能够根据用户的请求自动选择合适的UI组件并实时传入数据。

项目简介

• 项目地址：github.com/tambo-ai/tambo
• 许可证：MIT（SDK + 后端）
• npm包：@tambo-ai/react
• 官网：tambo.co

Tambo 解决什么问题

传统的AI聊天界面只能显示纯文本回复。但很多场景下，用户需要的是交互式的UI组件：

• 问”帮我看看这个月的销售数据”→ 应该显示一个图表，而不是一堆数字
• 说”帮我订一张明天去上海的机票”→ 应该显示机票搜索组件，而不是纯文本
• 要求”分析这个CSV文件”→ 应该显示数据表格和可视化，而不是文字描述

Tambo 就是为了解决这个问题：让AI代理能够”说出”UI组件，而不是只能说出文字。

核心概念

1. 生成式组件（Generative Components）

每次消息渲染一次的组件，适合图表、摘要、可视化等一次性展示。注册时使用 Zod schema 定义组件的 props 结构。

2. 可交互组件（Interactable Components）

持续存在并随用户请求更新的组件，适合购物车、电子表格、任务看板等。使用 withInteractable() HOC 包装。

3. MCP 集成

内置支持 Linear、Slack、数据库和自定义 MCP 服务器。完整支持 MCP 协议：工具、提示、引导和采样。

4. 本地工具

可以定义浏览器端的工具（DOM操作、认证请求、React状态访问），AI代理可以直接调用这些工具。

快速上手

创建一个新项目：

npm create tambo-app my-tambo-app
cd my-tambo-app
npm install
npm run dev

注册一个组件：

import { useTamboComponent } from "@tambo-ai/react";
import { z } from "zod";

const salesChartSchema = z.object({
  data: z.array(z.object({
    month: z.string(),
    revenue: z.number(),
  })),
  title: z.string(),
});

function SalesChart({ data, title }) {
  return (
    <div>
      <h3>{title}</h3>
      {/* 渲染图表 */}
    </div>
  );
}

// 注册组件
useTamboComponent({
  name: "SalesChart",
  description: "显示销售数据的图表",
  component: SalesChart,
  schema: salesChartSchema,
});

与其他方案的对比

部署方式

• Tambo Cloud：官方托管版，有免费额度
• 自托管：通过 Docker 部署，完全控制数据

适用场景

• 需要富UI交互的AI助手
• 内部工具的AI化改造
• 数据分析类应用
• 电商/客服场景的AI代理

来源

• GitHub 项目：tambo-ai/tambo
• 官方博客：Introducing Tambo
• Hacker News 讨论（101分）：news.ycombinator.com