Vercel AI SDK: AI アプリケーション開発のための完全ガイド

Vercel AI SDK: AI アプリケーション開発のための完全ガイド

Vercel AI SDK は、AI アプリケーションを構築するための TypeScript ツールキットです。テキスト生成、ストリーミング、構造化出力、ツール呼び出し、マルチステップのエージェントループを単一の統一 API で処理し、主要な LLM プロバイダーすべてで動作します。もし OpenAI や Anthropic を直接 Next.js アプリに配線しようとして、結局 3 種類のストリーミング実装をメンテナンスすることになった経験があるなら、この SDK がその問題を解決します。

このガイドでは、SDK のコア機能、Novita AI の OpenAI 互換 LLM API との接続方法、そして単なるチャットボット以上のものを構築する開発者向けのエージェントワークフローについて説明します。

Vercel AI SDK とは?

Vercel AI SDK(npm パッケージ名: ai)は、LLM プロバイダー間の違いを抽象化するオープンソースライブラリです。OpenAI、Anthropic、Google ごとに異なるストリーミングプロトコルを学習する代わりに、同じ generateTextstreamTextgenerateObject 関数を呼び出し、単一のインポートを変更するだけでプロバイダーを切り替えられます。

SDK は 2 つのレイヤーで構成されています。

  • AI SDK Core はモデルとのやり取りを処理します: テキスト生成、ストリーミング、構造化オブジェクト、ツール呼び出し、埋め込み、エージェントループ。
  • AI SDK UI は React フック(useChatuseCompletionuseObjectuseAssistant)と、Next.js、SvelteKit、Nuxt 向けのアダプターを提供し、ブラウザでのストリーミング状態を管理します。

OpenAI Chat Completions 形式を実装するプロバイダーに接続するための @ai-sdk/openai-compatible パッケージもあり、これが Novita AI の統合方法です。

SDK は Node.js、Deno、エッジランタイム(Cloudflare Workers、Vercel Edge)、ブラウザ環境で動作します。

AI SDK Core: generateText、streamText、generateObject

SDK とプロバイダーパッケージをインストールします:

npm install ai @ai-sdk/openai

generateText

非ストリーミングの補完(バッチ処理、分類、ワンショット生成)向け:

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text } = await generateText({
  model: openai('gpt-4o-mini'),
  prompt: 'LLMの埋め込みがどのように機能するかを2文で説明してください。',
});

console.log(text);

streamText

レイテンシが重要なチャットインターフェース向け:

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

const result = streamText({
  model: openai('gpt-4o-mini'),
  messages: [
    { role: 'user', content: 'Next.js アプリのセットアップ方法を教えてください。' },
  ],
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

generateObject

生のテキストではなく構造化された JSON 出力が必要な場合 — スキーマの検証は Zod を使って自動的に処理されます:

import { generateObject } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { object } = await generateObject({
  model: openai('gpt-4o-mini'),
  schema: z.object({
    name: z.string(),
    skills: z.array(z.string()),
    experienceLevel: z.enum(['junior', 'mid', 'senior']),
  }),
  prompt: '架空のソフトウェアエンジニアのプロフィールを生成してください。',
});

console.log(object.name, object.skills);

SDK はモデルを有効な JSON に強制するために必要なシステムプロンプトの注入と、不正な出力があった場合のリトライを処理します。

AI SDK ツール: 関数呼び出しとツールの使用

ツールを使うと、モデルが生成中に外部関数(検索 API、データベースクエリ、計算機など)を呼び出せるようになります。SDK の tools パラメータは、各キーが呼び出し可能な関数となるオブジェクトを受け取ります:

import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const { text, toolCalls } = await generateText({
  model: openai('gpt-4o-mini'),
  tools: {
    getWeather: tool({
      description: '指定された場所の現在の天気を取得する',
      parameters: z.object({
        city: z.string().describe('都市名'),
        unit: z.enum(['celsius', 'fahrenheit']).default('celsius'),
      }),
      execute: async ({ city, unit }) => {
        // 実際の天気 API 呼び出しに置き換えてください
        return { city, temperature: 22, unit, condition: 'sunny' };
      },
    }),
  },
  prompt: '今の東京の天気はどうですか?',
});

console.log(text);

tool() ヘルパーは Zod スキーマから execute 関数パラメータへの型推論を提供します。手動の JSON 解析は不要です。

マルチステップのツール呼び出し

デフォルトでは、generateText は 1 ラウンドのツール呼び出しで停止します。maxSteps を設定すると、モデルがツール結果を後続の推論に使用できるようになります:

const { text } = await generateText({
  model: openai('gpt-4o'),
  maxSteps: 5,
  tools: { getWeather, searchWeb, lookupCalendar },
  prompt: '今週末のベルリンでのアウトドア活動を計画してください。',
});

SDK はツール呼び出し → 結果 → 継続ループを自動的に処理します。各ステップは onStepFinish を介して公開されており、中間の推論を確認できます。

Vercel AI SDK による AI エージェントループの構築

AI SDK におけるエージェントは、十分な情報が得られたと判断するまでツールを使ってループ内で動作するモデルです。パターンはマルチステップのツール呼び出しと同じですが、より多くのツールと長い maxSteps を使用します:

import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const result = await generateText({
  model: openai('gpt-4o'),
  maxSteps: 10,
  system: 'あなたはリサーチアシスタントです。利用可能なツールを使って徹底的に答えてください。',
  prompt: 'Llama 3.1 と Qwen3 の主な違いは何ですか?',
  tools: {
    search: tool({
      description: '最新情報をウェブ検索する',
      parameters: z.object({ query: z.string() }),
      execute: async ({ query }) => searchWeb(query),
    }),
    summarize: tool({
      description: 'URL の内容を要約する',
      parameters: z.object({ url: z.string() }),
      execute: async ({ url }) => fetchAndSummarize(url),
    }),
  },
  onStepFinish({ stepType, toolCalls, toolResults }) {
    console.log('Step:', stepType, toolCalls?.map(t => t.toolName));
  },
});

本番のエージェントパイプラインでは、Novita AI をモデルバックエンドとして接続することで、コストとスループットを規模に応じて制御できます。これについては次のセクションで説明します。

AI SDK React: useChat フックと Next.js 統合

useChat フックは、ボイラープレートなしでストリーミングチャットの状態を管理します:

// app/chat/page.tsx
'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
  });

  return (
    <div>
      {messages.map(m => (
        <div key={m.id} className={m.role === 'user' ? 'user' : 'assistant'}>
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="何か質問してください..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>送信</button>
      </form>
    </div>
  );
}

対応するルートハンドラー:

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

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

  const result = streamText({
    model: openai('gpt-4o-mini'),
    messages,
  });

  return result.toDataStreamResponse();
}

toDataStreamResponse() は Vercel AI ストリームプロトコルを処理し、クライアント側の useChat がネイティブに解釈します。API から構造化オブジェクトをストリーミングする場合は、useChatuseObject に、streamTextstreamObject に置き換えます。

Vercel AI SDK で Novita AI を使用する方法

Novita AI は https://api.novita.ai/v3/openai で OpenAI 互換の API を提供しており、OpenAI Chat Completions 形式を使用する任意の SDK(Vercel AI SDK を含む)にドロップインで置き換え可能です。

AI SDK で Novita AI を使う理由

Novita AI は 70 以上のオープンソースモデル(Llama 3.3 70B、Qwen3、DeepSeek V3、Mistral、Gemma 3)を単一の API エンドポイントでホストしています。GPU インフラを管理する必要はありません。エージェントワークフローでは、サーバーレス API が構成変更なしで小規模な 7B 命令モデルから大規模な推論モデルまでスケールします。

セットアップ

OpenAI 互換プロバイダーパッケージをインストール:

npm install ai @ai-sdk/openai-compatible

プロバイダーを構成:

import { createOpenAICompatible } from '@ai-sdk/openai-compatible';

const novita = createOpenAICompatible({
  name: 'novita',
  baseURL: 'https://api.novita.ai/v3/openai',
  apiKey: process.env.NOVITA_API_KEY,
});

これでセットアップ完了です。他の AI SDK プロバイダーとまったく同じように使用できます:

import { generateText } from 'ai';

const { text } = await generateText({
  model: novita('meta-llama/llama-3.3-70b-instruct'),
  prompt: 'カスタマーサポートボットにおける RAG とファインチューニングのトレードオフは何ですか?',
});

ストリーミングも同様に動作します:

import { streamText } from 'ai';

const result = streamText({
  model: novita('qwen/qwen3-235b-a22b-instruct-2507'),
  messages: [
    { role: 'system', content: 'あなたは役立つコーディングアシスタントです。' },
    { role: 'user', content: 'FastAPI で REST API を構築する方法を教えてください。' },
  ],
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

Novita AI でのツール呼び出し

関数呼び出しをサポートするモデルは、追加設定なしで AI SDK のツールインターフェースと連携します。Llama 3.3 70B Instruct と Qwen3 は Novita の API を通じてツール呼び出しをサポートしています:

import { generateText, tool } from 'ai';
import { z } from 'zod';

const { text } = await generateText({
  model: novita('meta-llama/llama-3.3-70b-instruct'),
  maxSteps: 5,
  tools: {
    calculator: tool({
      description: '数式を評価する',
      parameters: z.object({ expression: z.string() }),
      execute: async ({ expression }) => {
        return { result: eval(expression) }; // 本番環境では安全な数式パーサーを使用してください
      },
    }),
  },
  prompt: '847 の 12% はいくつですか?それを 3.14 で割ってください。',
});

環境設定

.env.local に Novita API キーを追加:

NOVITA_API_KEY=your_novita_api_key_here

キーは novita.ai で取得できます。新規アカウントには API をテストするための無料クレジットが含まれています。

長時間実行ワークロード向けエージェントサンドボックス

コードの実行、ファイルシステムへのアクセス、または数分間のワークフローを実行するエージェントタスクには、Novita AI の Agent Sandbox が LLM API の上に分離された実行環境を提供します。AI SDK がモデルの推論層を処理し、サンドボックスがエッジ関数のタイムアウト内では実行できないステートフルな実行を処理します。

Vercel AI SDK 向けの LLM プロバイダーの選び方

AI SDK を使えばプロバイダーの切り替えは簡単ですが、本番環境で選択する前にトレードオフを理解しておく価値があります。

レイテンシ: ストリーミングチャットでは、最初のトークンが出るまでの時間が総生成速度よりも重要です。小規模モデル(8B~14B)は最初のトークンが速く出力されます。Novita AI のサーバーレスエンドポイントは、オープンモデルでのコールドスタートレイテンシを低く抑えるよう最適化されています。

スケール時のコスト: GPT-4o は優れていますが、大量のクエリがある場合、最先端モデルと適切にチューニングされたオープンモデル(例: Llama 3.3 70B)の価格差は大きくなります。AI SDK を使えば、アプリケーションロジックを書き換えることなく、両方を試すことができます。

ツール呼び出しのサポート: すべてのモデルが関数呼び出しを確実にサポートしているわけではありません。特定のモデルを実際のツールスキーマでテストしてください。同じモデルファミリーでもプロバイダーによって動作は異なります。

コンテキストウィンドウ: ドキュメントが多い RAG や長い会話履歴では、コンテキスト制限を確認してください。多くのオープンモデルは 128K トークンをサポートしており、実用的なほとんどのユースケースをカバーします。

ベンダーロックイン: AI SDK のプロバイダー抽象化と Novita AI の OpenAI 互換エンドポイントにより、アプリケーションコードに触れることなくモデルを切り替えたり、フォールバックプロバイダーを追加したりできます。

まとめ

Vercel AI SDK は AI アプリケーション構築におけるボイラープレートを排除します。テキスト生成、ストリーミング、ツール呼び出し、エージェントループを単一の API で、あらゆる LLM プロバイダー間で実現します。useChat を使ったストリーミングチャットインターフェース、generateObject を使った構造化データの抽出、外部ツールを呼び出すマルチステップエージェントまで、SDK が配管を処理し、アプリケーションロジックに集中できます。

オープンモデルの推論には、Novita AI の OpenAI 互換 API が @ai-sdk/openai-compatible を介して SDK に直接組み込めます。70 以上のモデル(Llama、Qwen3、DeepSeek、Mistral)にアクセスでき、GPU インフラを管理する必要はなく、アプリケーションコードに触れることなくモデルを切り替えたりプロバイダーのフォールバックを追加したりできます。

novita.ai で始めましょう。新規アカウントには無料クレジットが含まれています。

FAQ

ai sdk react とは何ですか?

AI SDK の React 統合は ai/react パッケージに含まれています。useChatuseCompletionuseObjectuseAssistant といったフックを提供し、React フロントエンドをサーバーサイドのストリーミングルートに接続します。フックはストリーミング状態、メッセージ履歴、ローディングインジケーター、エラーハンドリングを処理するため、コンポーネントの状態で ReadableStream を管理する必要はありません。

ai sdk 5 で追加された機能は?

AI SDK 5(2025 年半ばにベータリリース)では、プロバイダー仕様が型安全性のために再設計され、UI 状態管理とモデルインタラクションロジックが分離され、エージェント UI の状態をシリアライズしやすくする新しいメッセージ形式が導入されました。2026 年に新しいプロジェクトを始める場合は、ai-sdk.dev で最新の安定バージョンを確認してください。SDK はバージョン 6 および 7 へと進化し続けています。

参照できる ai sdk のドキュメントはありますか?

公式ドキュメントは ai-sdk.dev にあります。プロバイダー設定ガイド、すべてのコア関数の API リファレンス、フレームワーク統合のチュートリアル(Next.js、Nuxt、SvelteKit)、RAG、エージェントループ、構造化抽出などの一般的なパターン向けのクックブック例が含まれています。

ai sdk のツールは OpenAI 以外のモデルでも使用できますか?

はい。関数呼び出しをサポートする任意のプロバイダーが AI SDK の tool() インターフェースで動作します。Novita AI は関数呼び出しをサポートするいくつかのオープンモデルをホストしています。動作の品質は異なります。Novita の API を通じて利用可能なオープンモデルの中で、マルチステップのツール使用に最も信頼できるのは Llama 3.3 70B と Qwen3 です。

vercel ai sdk のドキュメントと ai-sdk.dev のドキュメントの違いは?

同じものです。ドキュメントは以前 sdk.vercel.ai にありましたが、ai-sdk.dev にリダイレクトされます。SDK は Vercel チームによってメンテナンスされていますが、オープンソースであり、Vercel インフラへのデプロイに依存していません。

人工知能 SDK は LLM API を直接呼び出すのとどう違いますか?

シンプルな単発のリクエストであれば、直接 API 呼び出しで十分です。SDK は、複数のことを同時に必要とする場合に価値があります。UI フレームワークに統合されたストリーミング、マルチステップのツール呼び出しループ、構造化出力の検証、統一されたプロバイダー切り替え、プロバイダー間での一貫したリトライ/エラーハンドリングなどです。AI SDK はこれらすべてをライブラリレベルで処理するため、プロジェクトごとに再構築する必要はありません。

おすすめ記事