阿超 > tambo

tambo

2026-01-23

前端

从不浪费时间的人，没有工夫抱怨时间不够。——杰弗逊

Tambo AI：让 React 界面“根据对话自动长出来”的 Generative UI SDK

如果你的用户不该学会使用你的应用，而是应用该学会理解用户，那么 Tambo 的理念会让你眼前一亮。Tambo 是一套专为 React 打造的“Generative UI” SDK：你注册可用的组件，AI 会在自然语言对话中决定渲染哪些组件、以什么参数渲染。对新手和高手呈现出不同的界面，对“我想要的就是那张按地区分组的上季度销售图”这类自然指令，自动生成正确的交互与视图。

它是什么

  • 一套针对 React 的生成式界面 SDK
  • 让你“注册”组件及其 props schema，然后由 AI 决定何时以及如何渲染
  • 支持一次性渲染的“生成式组件”和可持续交互更新的“可交互组件”
  • 通过 Provider、Hooks、MCP 集成、Local tools 等机制形成完整的开发体验

为什么这么做

  • 大多数软件都以“统一心智模型”来组织界面，但并不适合每个用户
  • 对话式 UI 让用户更自然地表达需求；AI 把需求翻译成界面和操作
  • 初学者与资深用户可以看到不同的东西；流程不必“点到第 5 步”，而是“直接说出你要的”

快速上手：创建项目与启动

1
2
3
4
npx tambo create-app my-tambo-app
cd my-tambo-app
npx tambo init      # 选择云端（Tambo Cloud）或自托管（Self-hosted）
npm run dev
  • Tambo Cloud：免费托管后端
  • Self-hosted：在你自己的基础设施上运行（MIT）

也可以直接使用官方模板与组件库：

工作原理：两类组件

  • 生成式组件（Generative）：对消息作出一次性响应，渲染图表、摘要、可视化等
  • 可交互组件（Interactable）：随用户迭代更新，持久化并按 ID 管理（购物车、表格、任务板等）

注册组件：用 Zod 定义 props

1
2
3
4
5
6
7
8
9
const components: TamboComponent[] = [{
  name: "Graph",
  description: "Displays data as charts",
  component: Graph,
  propsSchema: z.object({ 
    data: z.array(z.object({ name: z.string(), value: z.number() })), 
    type: z.enum(["line", "bar", "pie"]) 
  }),
}];

同一个项目里既可以有生成式组件，也可以把组件包装为可交互组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Generative: AI creates on-demand
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: persists and updates by 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(),
  }),
});

文档：

Provider：把能力注入到 App

1
2
3
4
5
6
7
<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  components={components}
>
  <Chat />
  <InteractableNote id="note-1" title="My Note" content="Start writing..." />
</TamboProvider>

如果你的 App 有登录态，可以把用户的 userToken（OAuth access token）传给 Provider，实现端到端鉴权与身份关联。文档：Provider Options

Hooks：消息、线程与流状态

  • 输入与发送：useTamboThreadInput
  • 线程管理与流式返回：useTamboThread
  • 流状态与 props 渲染状态：useTamboStreamStatus

示例：

1
2
3
4
const { value, setValue, submit, isPending } = useTamboThreadInput();

<input value={value} onChange={(e) => setValue(e.target.value)} />
<button onClick={() => submit()} disabled={isPending}>Send</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const { thread } = useTamboThread();

{
  thread.messages.map((message) => (
    <div key={message.id}>
      {Array.isArray(message.content) ? (
        message.content.map((part, i) =>
          part.type === "text" ? <p key={i}>{part.text}</p> : null,
        )
      ) : (
        <p>{String(message.content)}</p>
      )}
      {message.renderedComponent}
    </div>
  ));
}
1
2
3
4
5
6
const { streamStatus, propStatus } = useTamboStreamStatus();

if (!streamStatus.isSuccess) return <Spinner />;
{
  propStatus["title"]?.isSuccess && <h3>{title}</h3>;
}

文档：

MCP 集成：把外部系统接进来

原生支持 MCP 协议（工具、提示、引导、采样等），可以连接 Linear、Slack、数据库或自定义 MCP 服务器。

1
2
3
4
5
6
7
8
9
10
11
12
13
import { MCPTransport } from "@tambo-ai/react/mcp";

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

<TamboProvider components={components} mcpServers={mcpServers}>
  <App />
</TamboProvider>;

文档：Model Context Protocol

本地工具：在浏览器里执行

定义浏览器侧可执行的工具（DOM、鉴权请求、React 状态访问等），让 AI 能调用它们：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const tools: TamboTool[] = [
  {
    name: "getWeather",
    description: "Fetches weather for a location",
    tool: async (location: string) =>
      fetch(`/api/weather?q=${encodeURIComponent(location)}`).then((r) =>
        r.json(),
      ),
    toolSchema: z
      .function()
      .args(z.string())
      .returns(
        z.object({
          temperature: z.number(),
          condition: z.string(),
          location: z.string(),
        }),
      ),
  },
];

<TamboProvider tools={tools} components={components}>
  <App />
</TamboProvider>;

文档：Adding Tools

Context、Auth 与 Suggestions

给 AI 提供额外上下文（用户状态、应用设置、当前页面等），以及基于身份的鉴权；还可启用建议（Suggestions）功能。

1
2
3
4
5
6
7
8
9
10
<TamboProvider
  userToken={userToken}
  contextHelpers={{
    selectedItems: () => ({
      key: "selectedItems",
      value: selectedItems.map((i) => i.name).join(", "),
    }),
    currentPage: () => ({ key: "page", value: window.location.pathname }),
  }}
/>
1
2
3
4
5
6
7
const { suggestions, accept } = useTamboSuggestions({ maxSuggestions: 3 });

suggestions.map((s) => (
  <button key={s.id} onClick={() => accept(s)}>
    {s.title}
  </button>
));

文档：

支持的 LLM 提供商

OpenAI、Anthropic、Cerebras、Google Gemini、Mistral，以及所有 OpenAI 兼容提供商。完整列表见：docs.tambo.co/models

对比同类（简述）

  • 组件选择：Tambo 由 AI 决定渲染哪些组件；许多 SDK 仍需手动映射工具与组件
  • MCP：Tambo 内置支持；部分 SDK 处于实验或新近支持状态
  • 可交互持久化：Tambo 支持；部分产品侧重纯聊天或无状态组件
  • 客户端工具执行：Tambo 声明式自动；有的需要手工 onToolCall 或仅限 Agent 侧
  • 自托管与云：Tambo SDK+后端开源（MIT），同时提供 Tambo Cloud

定价与部署

  • Self-hosted：永久免费，MIT 许可；5 分钟 Docker 初始化

    1
    2
    npx tambo init
    # Select "Self-hosted"

  • Tambo Cloud：免费层起步，然后按量付费

    • Free：每月 10,000 条消息
    • Growth：$25/月，200k 消息 + 邮件支持
    • Enterprise：自定义量、SLA、SOC 2、HIPAA
      详见：Pricing

开发者体验与仓库结构

  • 要求：Node.js 22+、npm 11+，可选 Docker

  • 运行：

    1
    2
    3
    4
    git clone https://github.com/tambo-ai/tambo.git
    cd tambo
    npm install
    npm run dev        # apps/web + apps/api

  • 常用命令：

    1
    2
    3
    4
    npm run build
    npm run lint         # lint:fix 可自动修复
    npm run check-types
    npm test

  • 数据库（Docker）：

    1
    2
    3
    npm run db:generate
    npm run db:migrate
    npm run db:studio

  • 结构：

    • apps/：Web（Next.js）、API（NestJS）、MCP 服务
    • packages/：共享代码（Drizzle schema、LLM helpers、工具等）
    • 根目录：react-sdk/、cli/、showcase/、docs/、create-tambo-app/

  • CLI 独立文档（tambo-cli）：支持 init、add、update 等命令，能自动把组件安装到你的 Next.js 项目里
    详见：cli/README.md

Devcontainer 与并行工作流（加分项）

  • 支持用 git worktree 为每个分支创建独立 devcontainer，适合多 Agent/多开发者并行
  • 端口自动处理（8260–8263 及冲突转移），容器内的 Web/API/Docs 可独立启动
  • 容器自动挂载宿主的认证：SSH、Git、GitHub CLI、Claude Code 等，减少重复登录
    详见：.devcontainer/README.md

适合用在什么场景

  • 面向终端用户的“对话式导航 + 生成式界面”，少点击更直达
  • 数据分析与可视化：让用户用自然语言请求图表、分组、筛选
  • 管理工具与仪表盘：持久交互组件（任务板、笔记、购物车）按需生成与更新
  • 与第三方系统整合（Linear、Slack、DB、文件系统）：用 MCP 统一接入数据面
  • 自托管或云端部署都可；本地与生产统一 SDK

小结

Tambo 并不是“另一套聊天组件”，而是把“界面即功能”的思想往前推了一步：你把可用的 UI 能力注册清楚，AI 在对话中自动选择合适的组件与参数，形成对任务的即时界面响应。生成式组件让结果即时可视化，可交互组件让任务持续演进。与 MCP、Local Tools、Context/Auth、Suggestions 合作，就成了让产品“学会用户”的完整工具链。

想试试？用 CLI 初始化一个项目，注册几个组件，把 Provider 套上，再用 Hooks 提交一条“自然语言需求”。你会看到界面从对话里“长出来”。