@ai-sdk/react の useChat フックを使ったクライアント側のツール処理

基本実装

import { useChat } from "@ai-sdk/react";
import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";

const { messages, sendMessage, addToolResult, status, error } = useChat({
  id: "chat-session-id",
  sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
  onFinish: (message) => {
    console.log("Chat finished:", message);
  },
  onToolCall: async ({ toolCall }) => {
    // ツール処理
    if (toolCall.toolName === "myTool") {
      const result = await executeMyTool(toolCall.input);
      addToolResult({
        toolCallId: toolCall.toolCallId,
        tool: "myTool",
        output: result,
      });
    }
  }
});

重要な仕組み

• sendAutomaticallyWhen: ツール実行完了後の自動送信制御
• lastAssistantMessageIsCompleteWithToolCalls: すべてのツール実行完了を待つ
• addToolResult(): ツール実行結果をAIに返す（これで次のアクションを判断可能）

認証ヘッダーの送信

const token = await getAccessTokenSilently();
await sendMessage(
  { text: message },
  {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  }
);

エラーハンドリング

addToolResult({
  toolCallId: toolCall.toolCallId,
  tool: "myTool",
  state: "output-error",
  errorText: "エラーメッセージ",
});

status値

• "streaming": ストリーミング中
• "submitted": 送信済み
• 入力無効化に活用: disabled={status === "streaming" || status === "submitted"}