Tambo AI

面向 React 的开源生成式 UI SDK，支持流式渲染组件与 MCP 协议集成，让 AI Agent 能够直接渲染和交互 React 组件。

项目概述#

Tambo AI 是一个专注于 Generative UI（生成式用户界面） 的 React SDK。它解决的核心问题是：如何让 LLM 不仅仅输出文本，而是直接渲染丰富的 React 组件并与之交互。

核心理念#

开发者只需定义标准的 React 组件并附上 Zod Schema 描述
Tambo Agent 根据用户意图，自动选择组件并生成符合 Schema 的 Props
前端通过 SDK 实时流式接收 Props 并渲染组件

核心能力#

React SDK (@tambo-ai/react)#

提供用于线程管理、流式传输与组件渲染的 hooks 与 provider：

TamboProvider: 全局上下文提供者，负责配置 API Key、组件注册、工具注册及用户鉴权
useTambo(): 获取消息列表、流式状态
useTamboThreadInput(): 管理输入框状态、提交逻辑
useTamboSuggestions(): 获取 AI 生成的下一步建议

组件模型#

Generative Components（生成式）

一次性渲染，随对话生成即时结果：

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"]),
    }),
  },
];

Interactable Components（可交互式）

持久化存在，拥有唯一 ID，支持跨会话更新：

const InteractableNote = withInteractable(Note, {
  componentName: "Note",
  description: "A note supporting title, content, and color modifications",
  propsSchema: z.object({
    title: z.string(),
    content: z.string(),
    color: z.enum(["white", "yellow", "blue", "green"]).optional(),
  }),
});

内建 Agent#

无需外部框架即可运行 LLM 对话循环
支持自带密钥（BYOK）
可与 LangChain/Mastra 等配合（非必需）

Streaming Infrastructure#

Props 随 LLM 生成实时流式传输
支持取消、错误恢复与重连处理

MCP 集成#

支持完整的 MCP 协议，可连接外部系统/工具：

import { MCPTransport } from "@tambo-ai/react/mcp";

const mcpServers = [
  {
    name: "filesystem",
    url: "http://localhost:8261/mcp",
    transport: MCPTransport.HTTP,
  },
];

Local Tools#

可定义在浏览器端执行的工具（如 DOM 操作、鉴权 fetch、访问 React 状态）：

const tools: TamboTool[] = [
  {
    name: "getWeather",
    description: "Fetches weather for a location",
    tool: async (params: { location: string }) =>
      fetch(`/api/weather?q=${encodeURIComponent(params.location)}`).then((r) => r.json()),
    inputSchema: z.object({ location: z.string() }),
    outputSchema: z.object({ temperature: z.number(), condition: z.string(), location: z.string() }),
  },
];

使用场景#

AI 驱动的数据可视化：用户说"画出上个季度的销售趋势"，直接渲染折线图
动态交互组件：通过对话更新看板任务、修改购物车内容
连接外部数据的智能助手：通过 MCP 协议连接数据库或 API 并在 UI 展示

快速开始#

CLI 初始化#

npm create tambo-app my-tambo-app  # auto-initializes git + tambo setup
cd my-tambo-app
npm run dev

模板选项#

AI Chat with Generative UI: 聊天界面 + 动态组件生成
AI Analytics Dashboard: AI 驱动的分析仪表板

Provider 配置示例#

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  userKey={currentUserId}
  components={components}
  tools={tools}
  mcpServers={mcpServers}
  contextHelpers={{
    selectedItems: () => ({
      key: "selectedItems",
      value: selectedItems.map((i) => i.name).join(", "),
    }),
    currentPage: () => ({ key: "page", value: window.location.pathname }),
  }}
>
  <Chat />
  <InteractableNote id="note-1" title="My Note" content="Start writing..." />
</TamboProvider>

认证方式#

userKey: 服务端/可信环境
userToken: 客户端 OAuth，支持 Auth0、Clerk、Supabase、WorkOS 等主流提供商

部署选项#

Tambo Cloud: 托管后端，负责会话状态与 agent 编排
Self-hosted: 通过 Docker 在自有基础设施运行相同后端

LLM 提供者支持#

OpenAI
Anthropic
Cerebras
Google Gemini
Mistral
其他 OpenAI 兼容提供者