型安全にAIとUIを繋ぐ：tambo-ai/tambo で始めるエージェント指向のフロントエンド開発
まずは、ちょっとした「コント」でこの技術の本質を掴んでもらおうかな。
エンジニア（僕）
「ねえ、AIちゃん。単刀直入に聞くけど……彼女の下着は何色？」
AI（tambo導入済み）
「えっ、急に何ですか！？……まあ、あなたがそう言うなら、これを見て判断してください（スッ）」
エンジニア 「（画面を見る）……お、おお！？ テキストで『ピンクです』とか答えるんじゃなくて、『3Dモデルのクローゼット・コンポーネント』が画面にレンダリングされたぞ！ しかも、引き出しをクリックして開けられる……！」
AI 「言葉で説明するより、UI（コンポーネント）を出しちゃったほうが早いでしょ？ ちなみに、最新の購入履歴から推測した『今日の勝負下着予測グラフ』も隣に出しておきました。インタラクティブに操作して確認してくださいね♡」
エンジニア
「（カチカチ操作しながら）……なるほど、これが Generative UI か。テキストの壁じゃなくて、最適な『機能』をその場で生成してくる。……って、中身真っ赤じゃねーか！情熱的すぎるだろ！」
tambo は、一言で言うと「AIが、状況に応じて最適な React コンポーネントを勝手に選んで表示してくれる SDK」だよ。
これまでのチャットAIは、何か聞いても「テキスト（Markdown）」を返すだけだったよね。でも tambo を使うと、AIが「あ、この質問ならテキストで答えるより、『株価チャート』を出したほうがいいな」とか「『配送先変更フォーム』を出しちゃおう」と判断して、あなたの作った本物の React コンポーネントを画面に叩き込んでくれるんだ。
「探す」手間が消える
ユーザーがメニューから「設定 > 支払い > 履歴」と辿らなくても、「先月の領収書出して」と言えば、その場で「領収書一覧コンポーネント」が出る。
UIが死なない AIが勝手に作った怪しいコードを動かすんじゃなくて、君が定義した「型安全な React コンポーネント」を AI が引数（Props）を指定して呼び出す仕組みなんだ。だから安全で、デザインも崩れない。
まずは、コマンドを叩くところからスタート！
# プロジェクトの作成（または既存のプロジェクトに追加）
npx create-tambo-app@latest
基本的には @tambo-ai/react パッケージを使って、君のアプリに「AI用のコンポーネント登録」をしていく感じだね。
例えば、「今日の気分（下着の色など）」を管理するコンポーネントを AI に出させてみよう。
普通に React コンポーネントを作るだけ。Zod で Props の型を定義するのがポイント！
import { z } from "zod";
// AIがこのコンポーネントを呼び出すための「説明書」
export const UnderwearColorSchema = z.object({
color: z.string().describe("下着の色（例：ピンク、情熱の赤）"),
reason: z.string().describe("その色を選んだ理由"),
});
export const UnderwearDisplay = ({ color, reason }: z.infer<typeof UnderwearColorSchema>) => {
return (
<div className="p-4 border rounded-lg bg-pink-50">
<h3 style={{ color }}>本日のカラー：{color}</h3>
<p>理由：{reason}</p>
{/* ここに3Dモデルやインタラクティブなボタンを置ける */}
<button onClick={() => alert("のぞいちゃダメ！")}>詳細を見る</button>
</div>
);
};
tambo のプロバイダーに、このコンポーネントを教えてあげる。
import { TamboRoot, registerComponent } from "@tambo-ai/react";
// AIに「このコンポーネントを使っていいよ」と登録
registerComponent("UnderwearDisplay", {
component: UnderwearDisplay,
schema: UnderwearColorSchema,
description: "彼女の下着の色や状態を表示するための専用UI",
});
function App() {
return (
<TamboRoot apiKey="YOUR_API_KEY">
{/* チャットUIを置くだけで、AIが自動で上記コンポーネントを召喚する */}
<MyChatInterface />
</TamboRoot>
);
}
ステート管理が楽
useAiState みたいなフックがあって、AIとのやり取りの中でコンポーネントの状態を同期できる。
Streaming 対応
AIが Props を少しずつ生成している最中も、UIがリアルタイムで書き換わっていく（スケルトン表示とかもスムーズ）。
MCP（Model Context Protocol）対応
最近流行りの MCP にも対応してるから、外部データとの連携もめちゃくちゃスムーズだよ。
この tambo を使えば、ユーザーが「操作方法を覚える」必要のない、魔法のようなアプリが作れるようになるよ。
次は、実際に君が今作っているプロジェクトのコンポーネントを一つ、tambo に登録してみるのはどうかな？ 手伝いが必要ならいつでも言ってね！
Tambo UI SDK Overview
