Tambo AI：让 AI 自己画界面的 React 工具包

Tambo AI 在 GitHub 上拿到了 11,158 颗 Star。

这是一个 React 工具包，干的事情很明确：让 AI 自己决定渲染哪个 UI 组件。你注册好组件和对应的 Zod schema，AI 根据用户请求自动挑选组件，把数据流式传过去，界面就出来了。

1、 它解决了什么问题

大多数 AI 应用的界面是固定的。用户问什么，模型答一段文字，结束了。想让模型根据上下文动态生成图表、表单、数据面板？得自己写一堆胶水代码，处理流式传输、状态同步、错误恢复，光是把这些基础设施搭完，业务逻辑还没开始写。

Tambo 把这一层抽掉了。你只需要关心两件事：定义组件、写好 schema。剩下的流式推送、组件选择、状态管理，Tambo 全包了。

2、 怎么用

三行命令起步：

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

项目会自动初始化 Git 和 Tambo 配置。跑起来之后就是一个带 AI 对话能力的 React 应用。

核心开发流程是这样的：先用 Zod 定义组件的 props schema，然后注册到 Tambo。这些 schema 会被转换成 LLM 的工具定义，模型在对话中自动调用。

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

用户说"按地区看看销售数据"，Tambo 自动选中 <Graph> 组件，把数据流式传过去，图表就渲染出来了。用户说"加一个任务"，<TaskBoard> 组件更新，状态实时同步。

3、 两种组件模式

Tambo 区分了两类组件。

生成式组件：AI 回复时一次性渲染。图表、数据摘要、可视化面板，用完即走。

可交互组件：用户可以持续操作和修改。购物车、电子表格、任务看板这类需要持久化状态的场景。用 withInteractable 包装一下就行：

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

4、 部署和扩展

Tambo 提供两种部署方式。Tambo Cloud 是托管后端，注册就能用，有免费额度。Self-hosted 通过 Docker 部署在自己的基础设施上，SDK 和后端都是 MIT 协议。

扩展能力方面，内置了 MCP 协议支持，可以接 Linear、Slack、数据库，或者自己写的 MCP server。也支持在浏览器端定义本地工具，处理 DOM 操作、带身份认证的请求、读取 React 状态这类事情。

LLM 供应商方面，OpenAI、Anthropic、Google Gemini、Mistral 以及所有兼容 OpenAI 协议的服务都能直接用。

5、 和同类工具的区别

和 Vercel AI SDK 比，Tambo 多了自动组件选择和持久化状态组件。和 CopilotKit 比，Tambo 不依赖 LangGraph 之类的 agent 框架，组件选择是声明式的，不需要手动映射。和 Assistant UI 比，Tambo 的侧重点在完整应用界面而不仅是聊天窗口。

简单说，Tambo 的定位是"让 AI 渲染整个应用界面"，而不只是在对话框旁边放几个按钮。

存中…(img-yGhFYj94-1782019998762)]

[外链图片转存中…(img-Y5a90Ob4-1782019998765)]