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: 'Explain how LLM embeddings work in two sentences.',
});

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: 'Walk me through setting up a Next.js app.' },
  ],
});

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: 'Generate a fictional software engineer profile.',
});

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

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

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

ツールを使うと、生成中にモデルが外部関数(検索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: 'Get current weather for a location',
      parameters: z.object({
        city: z.string().describe('City name'),
        unit: z.enum(['celsius', 'fahrenheit']).default('celsius'),
      }),
      execute: async ({ city, unit }) => {
        // Replace with a real weather API call
        return { city, temperature: 22, unit, condition: 'sunny' };
      },
    }),
  },
  prompt: 'What is the weather in Tokyo right now?',
});

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: 'Plan my outdoor activities for this weekend in Berlin.',
});

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: 'You are a research assistant. Use available tools to answer thoroughly.',
  prompt: 'What are the main differences between Llama 3.1 and Qwen3?',
  tools: {
    search: tool({
      description: 'Search the web for current information',
      parameters: z.object({ query: z.string() }),
      execute: async ({ query }) => searchWeb(query),
    }),
    summarize: tool({
      description: 'Summarize a 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="Ask something..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>Send</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: 'What are the tradeoffs between RAG and fine-tuning for a customer support bot?',
});

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

import { streamText } from 'ai';

const result = streamText({
  model: novita('qwen/qwen3-235b-a22b-instruct-2507'),
  messages: [
    { role: 'system', content: 'You are a helpful coding assistant.' },
    { role: 'user', content: 'Show me how to build a REST API with FastAPI.' },
  ],
});

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: 'Evaluate a mathematical expression',
      parameters: z.object({ expression: z.string() }),
      execute: async ({ expression }) => {
        return { result: eval(expression) }; // 本番では安全な数式パーサーを使用してください
      },
    }),
  },
  prompt: 'What is 12% of 847, then divide by 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アプリケーションを構築するためのボイラープレートを排除します。テキスト生成、ストリーミング、ツール呼び出し、エージェントループを、任意のLLMプロバイダーで統一されたAPIで実現します。useChatを使ったストリーミングチャットインターフェース、generateObjectを使った構造化データの抽出、外部ツールを呼び出すマルチステップエージェントの実行など、SDKが配管処理を担当するため、アプリケーションロジックに集中できます。

オープンモデルの推論には、Novita AIのOpenAI互換APIが@ai-sdk/openai-compatibleを介してSDKに直接組み込めます。Llama、Qwen3、DeepSeek、Mistralなど70以上のモデルにアクセスでき、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 docsはありますか?

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

non-OpenAI モデルでも ai sdk のツールを使用できますか?

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

vercel ai sdk docs と ai-sdk.dev のドキュメントの違いは何ですか?

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

artificial intelligence SDKs と LLM API を直接呼び出すことの比較はどうですか?

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

おすすめ記事