tools-and-context

ツールとコンテキスト

ツール、MCP サーバー、コンテキストを通じて、Tambo にデータと機能へのアクセスを提供します。

クイックスタート

// Custom tool Tambo can call
const fetchUserTool = defineTool({
  name: "fetchUser",
  description: "Fetch user by ID",
  inputSchema: z.object({ userId: z.string() }),
  tool: async ({ userId }) => fetchUser(userId),
});

<TamboProvider tools={[fetchUserTool]}>
  <App />
</TamboProvider>;

カスタムツール

Tambo が呼び出せる JavaScript 関数を登録します。

import { defineTool, TamboProvider } from "@tambo-ai/react";
import { z } from "zod";

const fetchUserTool = defineTool({
  name: "fetchUser",
  description: "Fetch a user by ID",
  inputSchema: z.object({
    userId: z.string().describe("The user ID to fetch"),
  }),
  outputSchema: z.object({
    name: z.string(),
    email: z.string(),
  }),
  tool: async ({ userId }) => {
    const user = await fetchUser(userId);
    return user;
  },
});

<TamboProvider tools={[fetchUserTool]} components={components}>
  <App />
</TamboProvider>;

ツールの要点

• inputSchema：パラメーター用の Zod オブジェクトです。フィールドには .describe() を使用します
• outputSchema：戻り値用の Zod スキーマです（省略可能）
• tool：入力パラメーターを含む単一のオブジェクトを受け取る関数です
• transformToContent：リッチコンテンツの応答（画像、書式設定されたテキスト）を有効にします

MCP サーバー

外部 MCP サーバーに接続して、ツール、リソース、プロンプトを利用します。

機能	サーバー側	クライアント側
パフォーマンス	高速（直接接続）	低速（ブラウザー経由）
認証	OAuth + API キー	ブラウザーセッションのみ
ローカルサーバー	なし	あり（localhost）
設定	Tambo ダッシュボード	React コード

サーバー側の設定

1. プロジェクトダッシュボードに移動します
2. 「Add MCP Server」をクリックします
3. URL とサーバーの種類（StreamableHTTP または SSE）を入力します
4. 必要に応じて OAuth を完了します

クライアント側の設定

npm install @modelcontextprotocol/sdk@^1.24.0 zod@^4.0.0 zod-to-json-schema@^3.25.0

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

<TamboProvider
  mcpServers={[
    {
      url: "http://localhost:8123/",
      serverKey: "local",
      transport: MCPTransport.HTTP,
    },
  ]}
>
  <App />
</TamboProvider>;

コンテキストヘルパー

すべてのメッセージに動的なコンテキストを提供します。

<TamboProvider
  contextHelpers={{
    currentPage: () => ({ url: window.location.href }),
    currentTime: () => ({ time: new Date().toISOString() }),
    selectedItems: () => selectedItems.map((i) => i.name),
  }}
>
  <App />
</TamboProvider>

動的コンテキストヘルパー

実行時にヘルパーを追加または削除します。

const { addContextHelper, removeContextHelper } = useTamboContextHelpers();

useEffect(() => {
  addContextHelper("project", () => ({ projectId, projectName }));
  return () => removeContextHelper("project");
}, [projectId, projectName, addContextHelper, removeContextHelper]);

コンテキスト添付ファイル

次のメッセージに一度だけ使用するコンテキストです（送信後にクリアされます）。

const { addContextAttachment, attachments, removeContextAttachment } =
  useTamboContextAttachment();

function handleSelectFile(file) {
  addContextAttachment({
    context: file.content,
    displayName: file.name,
    type: "file",
  });
}

ローカルリソース

ユーザーがメッセージ内で参照できる、@ メンション可能なリソースを登録します。

静的リソース

import { TamboProvider, ListResourceItem } from "@tambo-ai/react";

const resources: ListResourceItem[] = [
  { uri: "docs://api", name: "API Reference", mimeType: "text/plain" },
  { uri: "docs://faq", name: "FAQ", mimeType: "text/plain" },
];

const getResource = async (uri: string) => {
  const content = await fetchDoc(uri);
  return { contents: [{ uri, mimeType: "text/plain", text: content }] };
};

<TamboProvider resources={resources} getResource={getResource}>
  <App />
</TamboProvider>;

動的リソース

const listResources = async (search?: string) => {
  const docs = await fetchDocs();
  return docs
    .filter((d) => !search || d.name.includes(search))
    .map((d) => ({
      uri: `docs://${d.id}`,
      name: d.title,
      mimeType: "text/plain",
    }));
};

const getResource = async (uri: string) => {
  const doc = await fetchDocument(uri);
  return { contents: [{ uri, mimeType: "text/plain", text: doc.content }] };
};

// Both listResources and getResource must be provided together
<TamboProvider listResources={listResources} getResource={getResource}>
  <App />
</TamboProvider>;

プログラムによる登録

const { registerResource, registerResources } = useTamboRegistry();

// Single resource
registerResource({
  uri: "user://file.txt",
  name: "File",
  mimeType: "text/plain",
});

// Batch registration
registerResources(
  docs.map((d) => ({
    uri: `docs://${d.id}`,
    name: d.title,
    mimeType: "text/plain",
  })),
);

コンテキストの種類の概要

種類	呼び出されるタイミング	使用例
コンテキストヘルパー	すべてのメッセージ	周辺の状態（現在のページ、時刻）
コンテキスト添付ファイル	次のメッセージのみ	ユーザーが選択したファイル、選択範囲
リソース	@ メンション時	ドキュメント、検索可能なデータ