タモボ 1.0：React コンポーネントを描画するエージェント向けのオープンソースツールキット

Tambo AI

React用のオープンソース生成型UIツールキット「Tambo」では、エージェントがあなたの UI を話すように構築できます。
コンポーネントを接続すると、Tambo がストリーミング・状態管理・MCP（マルチチャネルプロトコル）を処理します。

---

はじめに

• 無料で始める • ドキュメント • Discord
• Tambo 1.0 も登場！ アナウンス記事：「Introducing Tambo: Generative UI for React」をご覧ください

---

目次

• Tamboとは？
• はじめに
• 動作原理
• 機能一覧
• Tamboの比較
• コミュニティ
• ライセンス

---

Tamboとは？

Tamboは、UI（生成型 UI）をレンダリングするエージェントを構築するための React ツールキットです。
Zod スキーマでコンポーネントを登録すると、エージェントが適切なものを選択し、プロパティをストリーム化してユーザーと対話できるようにします。

npm create tambo-app my-tambo-app
cd my-tambo-app
npx tambo init      # クラウド版かセルフホスト版を選択
npm run dev

Tambo Cloud は無料で始められるホステッドバックエンドです。
セルフホスト版は Docker を使って自前のインフラ上に同じバックエンドを稼働させます。

---

何が含まれているか

1. Agent – Tambo が LLM の会話ループを実行します。OpenAI、Anthropic、Gemini、Mistral など任意の OpenAI 対応プロバイダーの API キーを使用可能です。LangChain や Mastra と連携できますが必須ではありません。
2. ストリーミングインフラ – LLM が生成したプロパティをコンポーネントへストリームし、キャンセル・エラー回復・再接続を自動で処理します。
3. Tambo Cloud / セルフホスト – クラウドは会話状態とエージェントのオーケストレーションを管理します。セルフホストでは同じバックエンドを自前の環境で実行します。

---

動作原理

AI に使用できるコンポーネントを伝えます。Zod スキーマがプロパティを定義し、これが LLM のツール定義となり、エージェントは関数呼び出しのように実行します。Tambo が結果をレンダリングします。

生成型コンポーネント

メッセージへの応答として一度だけ描画（チャート、要約、データ可視化など）。

const components: TamboComponent[] = [
  {
    name: "Graph",
    description: "Recharts ライブラリを使ってデータをチャートで表示",
    component: Graph,
    propsSchema: z.object({
      data: z.array(z.object({ name: z.string(), value: z.number() })),
      type: z.enum(["line", "bar", "pie"]),
    }),
  },
];

インタラクティブコンポーネント

ユーザーがリクエストを改善するたびに永続的に更新される（ショッピングカート、スプレッドシート、タスクボードなど）。

const InteractableNote = withInteractable(Note, {
  componentName: "Note",
  description: "タイトル・内容・色の変更が可能なノート",
  propsSchema: z.object({
    title: z.string(),
    content: z.string(),
    color: z.enum(["white", "yellow", "blue", "green"]).optional(),
  }),
});

プロバイダー

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  userKey={currentUserId}   // クライアント側アプリなら userToken を使用
  components={components}
>
  <Chat />
  <InteractableNote id="note-1" title="My Note" content="Start writing…" />
</TamboProvider>

フック

const { messages, isStreaming } = useTambo();
const { value, setValue, submit, isPending } = useTamboThreadInput();

---

機能一覧

機能	Tambo
MCP 統合	Linear、Slack、データベース、または独自の MCP サーバーに接続。ツール・プロンプト・誘導・サンプリングを含むフル MCP プロトコル対応。
ローカルツール	ブラウザ側で実行できる関数（DOM 操作、認証付きフェッチ、React ステートアクセスなど）を AI が呼び出せます。
コンテキスト・認証・提案	より良い応答のためにメタデータを渡し、認証プロバイダーから取得したユーザー・トークンを使用。現在の文脈に基づくクリック可能なプロンプトを生成します。

MCP 統合例

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

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

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  userKey={currentUserId}
  components={components}
  mcpServers={mcpServers}
>
  <App />
</TamboProvider>;

ローカルツール例

const tools: TamboTool[] = [
  {
    name: "getWeather",
    description: "場所の天気を取得する",
    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(),
    }),
  },
];

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  userKey={currentUserId}
  tools={tools}
  components={components}
>
  <App />
</TamboProvider>;

コンテキスト・認証・提案例

<TamboProvider
  apiKey={process.env.NEXT_PUBLIC_TAMBO_API_KEY!}
  userToken={userToken}
  contextHelpers={{
    selectedItems: () => ({
      key: "selectedItems",
      value: selectedItems.map(i => i.name).join(", "),
    }),
    currentPage: () => ({ key: "page", value: window.location.pathname }),
  }}
/>

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 互換プロバイダーなら何でも利用可能です。

---

Tambo の比較

機能	Tambo	Vercel AI SDK	CopilotKit	Assistant UI
コンポーネント選択	AI が描画するコンポーネントを決定	手動でツール→コンポーネントマッピング	LangGraph などのエージェントフレームワーク経由	チャット中心のツール UI
MCP 統合	標準搭載	実験的（v4.2+）	新規追加、SDK v5 必須	-
永続状態コンポーネント	あり	なし	共通状態パターン	なし
クライアント側ツール実行	宣言的・自動	手動で onToolCall	エージェント側のみ	なし
セルフホスト可能	MIT（SDK＋バックエンド）	Apache 2.0（SDKのみ）	MIT	MIT
ホステッドオプション	Tambo Cloud	なし	CopilotKit Cloud	Assistant Cloud
最適用途	UI 全体制御・ストリーミング＆ツール抽象化	マルチエージェントワークフロー	チャットインターフェース	-

---

コミュニティ

• Discord に参加して開発者やコアチームと交流。
• 貢献したい方は [Contributing Guide] をご覧ください。
• Twitter で @tambo_ai をフォロー。

---

ライセンス

MIT（特に明記がない限り）。一部ワークスペース（例：

apps/api

）は Apache‑2.0。