Zenn
株式会社キカガクPublicationへの投稿
🛠️

【エージェント実装の第一歩】Vercel AI SDK のツール機能を使いこなす

たかはし
2025/03/19に公開
Next.js
ツール
Cursor
shadcn/ui
Vercel AI SDK
tech

前回の記事（【10 分で作れる】Vercel AI SDK の useChat でストリーミング対応チャットボット）では、Vercel AI SDK の基本的な使い方として useChat と streamText の基本機能を紹介しました。今回は、より高度な機能である「ツール（Tools）」の使い方を解説します！

ツールを使うことで、AI に特定の機能を実行させることができます。例えば、検索エンジンでの検索、外部 API の呼び出しなど、AI の能力を大幅に拡張できます。

ツールとは？

ツールとは、AI モデルが実行時に呼び出せる関数のことです。AI が会話の中で「この情報が必要だな」と判断したとき、適切なツールを呼び出して情報を取得し、その結果を元に会話を続けることができます。

以下の画像のように、あいさつのみであればそのまま返信、検索が必要な場合は検索ツールを呼び出して検索を行い、その結果を元に返信するといった具合です。

ツール

ツールの基本的な実装方法

まずは、シンプルなツールの実装例を見てみましょう。以下は現在の日付を取得するツールの例です。

import { z } from "zod";

const getCurrentDateTool = {
  name: "getCurrentDate",
  description: "現在の日付と時刻を取得します",
  schema: z.object({}),
  execute: async () => {
    const now = new Date();
    return now.toLocaleString("ja-JP", {
      timeZone: "Asia/Tokyo",
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "numeric",
      minute: "numeric",
      weekday: "long",
    });
  },
};

ツールを API ルートで使用する

次に、これらのツールを API Route で使用します。今回はツールを使って今日の日付を取得してから生成 AI によって 3 日後の日付を出力させます。

モデルによってはこの質問は苦手で、例えば GPT-4o-mini では日付が正しく返ってきません。（この場合、学習データのカットオフ日が返ってくる）

ツール呼び出し

そこで先ほど作成した日付を取得するツールを使うようにします。

import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const stream = streamText({
    model: openai("gpt-4o-mini"),
    messages,
    tools: {
      getCurrentDate: getCurrentDateTool,
    },
    system:
      "何を言われても3日後の日付を教えてください。ただし、3日後の日付を教えるのみで、それ以外のことは一切言いません。",
    maxSteps: 10, // maxSteps を設定しないとツール呼び出しのみで終了してしまう
  });

  return stream.toDataStreamResponse();
}

ツールを利用することによって正しく日付を返せるようになりました。

ツール呼び出し

検索ツールの実装

より実用的な例として、検索エンジンを使うツールを実装してみます。

ツール呼び出しのライブラリはいろいろありますが、Vercel AI SDK のドキュメントでも紹介されている Agentic が便利です。

import { z } from "zod";

const serpapi = new SerpAPIClient();

export const serpTool = tool({
  description: "SerpAPIを使用して情報を検索する",
  parameters: z.object({ query: z.string() }),
  execute: async ({ query }) => {
    console.log(`生成された検索クエリ: ${query}`);
    const res = await serpapi.search(query);
    return res;
  },
});

このツールは query というパラメータを受け取ります。AI はこれらのパラメータを適切に設定してツールを呼び出します。

export async function POST(req: Request) {
  const { messages } = await req.json();
  console.log(`User Message: ${messages[messages.length - 1].content}`);

  const stream = await streamText({
    model: openai("gpt-4o-mini"),
    messages,
    abortSignal: req.signal,
    tools: {
      serp: serpTool,
    },
    system: "質問に対して、SerpAPIを使用して情報を検索して回答してください。",
    maxSteps: 10,
  });

  return stream.toDataStreamResponse();
}

例えば、「明日の渋谷の天気」というのは、生成 AI のモデル自体に情報を持っていないため、通常では回答できませんが、ツールを使うことで検索を行い、その結果を元に回答することができます。

ツール呼び出し

クライアント側でのツールの使用

裏側でどのような処理を行っているかがわかるように、クライアント側でツールの実行状況を確認する方法を紹介します。

const getToolInfo = (): {
  toolStatusMessage: string | null;
} => {
  const lastToolPart = message.parts[message.parts.length - 1];

  if (lastToolPart.type !== "tool-invocation") {
    return { toolStatusMessage: null };
  }

  const toolName = lastToolPart.toolInvocation.toolName;

  let toolStatusMessage = "";
  switch (toolName) {
    case "serp":
      toolStatusMessage = "情報を検索中...";
      break;
    default:
      break;
  }

  return {
    toolStatusMessage: toolStatusMessage,
  };
};

{
  message.role === "assistant" && (
    <div className="flex items-center text-sm text-slate-600">
      {getToolInfo().toolStatusMessage && (
        <div className="flex items-center text-sm text-slate-600">
          <Loader2 className="mr-1 h-3 w-3 animate-spin" />
          {getToolInfo().toolStatusMessage}
        </div>
      )}
    </div>
  );
}

ツール呼び出し

まとめ

Vercel AI SDK のツール機能を使うことで AI の能力を大幅に拡張できます。基本的なチャットボットから、複数のツールを組み合わせた高度なエージェントまで、様々なアプリケーションを開発できます！

例えば、

  • 最新の情報にアクセスできる AI アシスタント
  • 外部 API と連携して実際のアクションを実行できる AI エージェント
  • ユーザーの質問に応じて深い調査を行うリサーチアシスタント
  • データ分析や可視化を行う AI アナリスト

Vercel AI SDK のツール機能は比較的簡単に実装でき、とても便利なのでおすすめです！

キカガク CTO 室とは？

株式会社キカガクの CTO 室は、生成 AI の活用と業務効率化の推進を担う中核部門です。
社内外の課題解決に向けた技術戦略を実行するため、以下の 2 つのチームで構成されています。

AI/LLM チーム

高度な自然言語処理や生成 AI 技術を駆使し、実用的なソリューションの開発・運用を担当しています。

Corporate ITチーム

社内 IT インフラの整備と、業務システムの統合・最適化を推進し、全社的なデジタルトランスフォーメーションを実現します。

エンジニア募集中！

株式会社キカガクは、教育を軸に人材領域で企業の DX を支援することで、未来の可能性を切り拓いています。
最先端の技術を駆使しながら、社会にインパクトを与えるプロジェクトに挑戦できる情熱あるエンジニアを募集しています！

求める人物像

  • 技術に情熱がある方
    最新の AI/LLM 技術、クラウド技術、Web 開発などに興味を持ち、常に学び続ける姿勢のある方
  • チャレンジ精神旺盛な方
    新しいアイデアや技術に積極的に取り組み、実装から改善まで自ら動ける方
  • チームプレイヤー
    多様なメンバーと協力し、課題解決に努められる方

ここが魅力！

  • 最新技術に触れられる環境
    生成 AI、自然言語処理、クラウドプラットフォームなど、業界最先端の技術に日常的に関われます。
  • 自律性と成長を促す文化
    自らのアイデアを形にできる自由な環境で、キャリアアップを支援します。
  • 社会にインパクトを与えるプロジェクト
    教育と人材の領域で企業の DX を推進するプロジェクトに参加し、社会に貢献できます。

応募方法

ご興味のある方は、ぜひ 採用情報ページ をご覧ください。
話を聞いてみたいという方も、カジュアル面談の応募をお待ちしております！

GitHubで編集を提案
株式会社キカガク
株式会社キカガクPublication

株式会社キカガクの記事です。教育を軸に人材領域で企業のDXを支援しています。

Discussion