Vercel AI SDK useChatフックとクライアント側ツール実行パターン / PaPut

mizulba

9か月前

Vercel AI SDK useChatフックとクライアント側ツール実行パターン

React

TypeScript

Vercel AI SDK

知識

運用

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

基本実装

typescript

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に返す（これで次のアクションを判断可能）

認証ヘッダーの送信

typescript

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

エラーハンドリング

typescript

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

status値

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