Vercel AI SDK を使って Next.js アプリに AI 機能を追加する

mkdir vercel-ai-sdk-example
cd vercel-ai-sdk-example

npm init -y

{
  "type": "module",
  "scripts": {
    "start": "tsx src/index.js"
  }
}

npm install ai @ai-sdk/anthropic dotenv zod
npm install -D @types/node tsx typescript

ANTHROPIC_API_KEY=<YOUR_API_KEY>

import { anthropic } from "@ai-sdk/anthropic";
import { generateText } from "ai";
import dotenv from "dotenv";
 
// .env file を読み込む
dotenv.config();
 
const { text } = await generateText({
  model: anthropic("claude-3-7-sonnet-20250219"),
  system:
    "あなたは旅行プランナーです。旅行者の要望に応じて、最適な旅行プランを提案してください。",
  prompt:
    "日帰り旅行の計画を立ててください。出発地は東京で、目的地は箱根です。観光スポットや食事のおすすめも含めてください。",
});
 
console.log(text);

npx tsx src/index.ts

import { streamText } from "ai";
 
const result = streamText({
  model: anthropic("claude-3-7-sonnet-20250219"),
  system:
    "あなたは旅行プランナーです。旅行者の要望に応じて、最適な旅行プランを提案してください。",
  prompt:
    "日帰り旅行の計画を立ててください。出発地は東京で、目的地は箱根です。観光スポットや食事のおすすめも含めてください。",
});
 
// ストリーミングされたテキストを受け取る
for await (const chunk of result.textStream) {
  console.log(chunk);
}

import { anthropic } from "@ai-sdk/anthropic";
import { generateText, tool } from "ai";
import dotenv from "dotenv";
import { z } from "zod";
 
dotenv.config();
 
const result = await generateText({
  model: anthropic("claude-3-7-sonnet-20250219"),
  tools: {
    // ツールの名前をキーに指定する
    weather: tool({
      // ツールの説明
      description: "指定した都市の天気を取得します。",
      // ツールの実行に必要な引数のスキーマを指定する
      parameters: z.object({
        location: z.string().describe("天気を取得したい都市名"),
        date: z.string().describe("天気を取得したい日付"),
      }),
      // ツールを呼び出したときに実行される非同期関数
      execute: async ({ location, date }) => {
        // ここではダミーの結果を返す
        return {
          location,
          date,
          temperature: Math.floor(Math.random() * 30) + 1,
          condition: Math.random() > 0.7 ? "晴れ" : "曇り",
        };
      },
    }),
  },
  system:
    "あなたは旅行プランナーです。旅行者の要望に応じて、最適な旅行プランを提案してください。",
  prompt:
    "日帰り旅行の計画を立ててください。出発地は東京で、目的地は箱根です。\n" +
    "観光の予定は必ず晴れた日にしてください。\n" +
    "希望の日付は 2025 年 4 月 1 日から 2025 年 4 月 3 日の間です。\n" +
    "天気予報を確認して、旅行プランを提案してください。\n",
});
 
console.log(result.text);
console.log(result.toolCalls);

箱根への日帰り旅行プランをご希望ですね。2025年4月1日から20日の間で晴れの日を選んで計画を立てたいとのことです。まずは、その期間の箱根の天気予報を確認してみましょう。
[
  {
    type: 'tool-call',
    toolCallId: 'toolu_01XN9qgUkcFJcpAfaLB3EcFk',
    toolName: 'weather',
    args: { location: '箱根', date: '2025-04-01' }
  }
]

const result = await generateText({
  model: anthropic("claude-3-7-sonnet-20250219"),
  maxSteps: 5,
  tools: {
    weather: tool({
      description: "指定した都市の天気を取得します。",
      parameters: z.object({
        location: z.string().describe("天気を取得したい都市名"),
        date: z.string().describe("天気を取得したい日付"),
      }),
      execute: async ({ location, date }) => {
        // ここではダミーの結果を返す
 
        return {
          location,
          date,
          temperature: Math.floor(Math.random() * 30) + 1,
          condition: Math.random() > 0.7 ? "晴れ" : "曇り",
        };
      },
    }),
  },
  system:
    "あなたは旅行プランナーです。旅行者の要望に応じて、最適な旅行プランを提案してください。",
  prompt:
    "日帰り旅行の計画を立ててください。出発地は東京で、目的地は箱根です。\n" +
    "観光の予定は必ず晴れた日にしてください。\n" +
    "希望の日付は 2025 年 4 月 1 日から 2025 年 4 月 3 日の間です。\n" +
    "天気予報を確認して、旅行プランを提案してください。\n",
});

result.steps.forEach((step, i) => {
  console.log("Step:", i + 1);
 
  console.log("Text:", step.text);
  console.log("ToolResults:", step.toolResults);
});
 
console.log(result.text);

const result = await generateText({
  model: anthropic("claude-3-7-sonnet-20250219"),
  maxSteps: 5,
  onStepFinish: ({ text, toolResults }) => {
    console.log("Step finished:");
    console.log("Text:", text);
    console.log("ToolResults:", toolResults);
  },
  // ...
});

npx create-next-app@latest

npm install ai @ai-sdk/anthropic @ai-sdk/react zod

ANTHROPIC_API_KEY=<YOUR_API_KEY>

import { anthropic } from '@ai-sdk/anthropic';
import { streamText } from 'ai';
 
// 30 秒間のストリーミングを許可する
export const maxDuration = 30;
 
// POST メソッドを使用してリクエストを処理する
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const result = streamText({
    model: anthropic('claude-3-7-sonnet-20250219'),
    messages,
  });
 
  // HTTP ストリームレスポンスを作成する
  return result.toDataStreamResponse();
}

"use client";
 
import { useChat } from "@ai-sdk/react";
 
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, reload } =
    useChat();
 
  return (
    <div className="max-w-2xl mx-auto p-6 bg-gray-50 min-h-screen">
      <div className="space-y-4 mb-6">
        {messages.map((message) => (
          <div
            key={message.id}
            className={`p-4 rounded-lg ${
              message.role === "user"
                ? "bg-blue-100 ml-8 border-blue-200 border"
                : "bg-gray-100 mr-8 border-gray-200 border"
            }`}
          >
            <div className="font-semibold mb-1 text-sm text-gray-600">
              {message.role === "user" ? "You" : "Claude"}
            </div>
            <div className="text-gray-800 whitespace-pre-wrap">{message.content}</div>
            {message.role === "assistant" && (
              <button
                className="mt-2 text-sm text-blue-600 hover:underline"
                onClick={() => reload()}
              >
                Regenerate response
              </button>
            )}
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={input}
          onChange={handleInputChange}
          placeholder="Type your message..."
          className="flex-1 px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          type="submit"
          className="bg-blue-600 text-white px-4 py-2 rounded-full hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          Send
        </button>
      </form>
    </div>
  );
}

npm run dev

import { anthropic } from "@ai-sdk/anthropic";
import { streamText, tool } from "ai";
import { z } from "zod";
 
export const maxDuration = 30;
 
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const result = streamText({
    model: anthropic("claude-3-7-sonnet-20250219"),
    messages,
    tools: {
      dice: tool({
        description: "サイコロを振ってランダムな数を生成します",
        parameters: z.object({
          sides: z.number().optional().default(6).describe("サイコロの面の数"),
          rolls: z.number().optional().default(1).describe("振る回数"),
        }),
        execute: async ({ sides, rolls }) => {
          const results = Array.from(
            { length: rolls },
            () => Math.floor(Math.random() * sides) + 1
          );
          return results;
        },
      }),
    },
    maxSteps: 5,
  });
 
  return result.toDataStreamResponse();
}