Vercel AI SDKの全体像: できることと導入の第一歩

Posted at 2026-03-14

Vercel AI SDKの全体像: できることと導入の第一歩

LLMアプリ開発でよく聞く Vercel AI SDK。

何を解決してくれるのか
useChat だけのライブラリなのか

このあたりを、実装目線で整理します。

私が作っている KOSOUM（リーンキャンバスをAIと対話しながら作るアプリ） で実装した際に得られた内容を整理しました。
ビジネスモデルやアイデア整理に便利なツールなので、興味がある方はぜひ使ってみてください！
https://kosoum.com/

先に結論

Vercel AI SDKはUI専用ではない
構成は大きく Core と UI の2層

Vercel AI SDKとは

Vercel AI SDKは、複数LLMプロバイダを横断して扱いながら、
テキスト生成・ストリーミング・ツール呼び出し・UI連携を統一するためのSDKです。

開発時の価値は次の2つです。

モデル呼び出しの書き方を揃えられる
フロントとストリーム連携の実装を簡潔にできる

KOSOUMでの実装例です👇

1. AI SDK Core

Coreはサーバー側で使うことが多いレイヤーです。

主な機能:

機能	役割	向いている場面
`generateText`	1回のテキスト生成	単発の応答を返すAPI
`streamText`	トークンを逐次返すストリーミング生成	チャットUIやリアルタイム表示
`generateObject`	スキーマに沿った構造化出力	JSON整形、フォーム入力補助、後続処理連携
Tool Calling	ツール実行フローを組み込む	外部API呼び出し、業務ロジック連携

代表例

import { generateText } from "ai";

const result = await generateText({
  model: openai("gpt-4.1-mini"),
  prompt: "新規事業アイデアを3つ",
});

console.log(result.text);

Coreのポイントは、モデルごとの差をアプリ側で吸収しやすいことです。

2. AI SDK UI

UIはフロントエンド向けのレイヤーで、チャット体験を実装しやすくします。

主な機能:

機能	役割	向いている場面
`useChat` を使った会話状態管理	メッセージ履歴・送信状態・更新を管理	チャット画面の基本実装
ストリーミング表示	生成結果を段階的に描画	体感速度を上げたいUI
ツールイベントとの連携	ツール呼び出し結果をUIに反映	AI提案の適用、外部処理結果の表示

代表例

import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport, isTextUIPart, isToolUIPart } from "ai";

const { messages, sendMessage } = useChat({
  transport: new DefaultChatTransport({ api: "/api/chat" }),
});

return (
  <div>
    {messages.map((m) => (
      <div key={m.id}>
        {m.parts?.map((part, i) => {
          // ストリーミング表示（text-delta がここに反映される）
          if (isTextUIPart(part)) return <p key={i}>{part.text}</p>;

          // ツールイベントの表示（tool-output など）
          if (isToolUIPart(part)) {
            return (
              <pre key={i}>
                {part.type} {JSON.stringify(part.output ?? part.input)}
              </pre>
            );
          }
          return null;
        })}
      </div>
    ))}
  </div>
);

UIのポイントは、SSEの取り回し・ストリーミング描画・ツールイベント反映を自前実装しなくてよいことです。

実装時に意識したいポイント

モデル名をアプリ内で直書きしすぎない
モデルIDをコード中に散らすと、切り替えや廃止対応の漏れが起きやすくなります。
用途キー（例: chat_fast, chat_quality）だけをアプリ側で指定し、実際の provider/model は1箇所の設定レイヤーで解決する構成にすると運用しやすくなります。

const MODEL_MAP = {
  chat_fast: { provider: "openai", model: "gpt-4.1-mini" },
  summarize: { provider: "google", model: "gemini-2.5-flash" },
} as const;

ストリーム仕様を統一する
ストリーミングの不具合は、API側のイベント形式とUI側の期待形式のズレで起きることが多いです。
サーバー側でイベントを正規化し、UIはその形式だけ読むようにすると安定します。

// 例: サーバーから返すイベント形式を固定
{ type: "text-start", id }
{ type: "text-delta", id, delta }
{ type: "tool-output-available", toolCallId, output }
{ type: "finish", finishReason: "stop" }

仕様変更時にUI全体へ波及させないため、変換責務は1箇所（adapter層）に寄せるのがおすすめです。

ツール呼び出しは責務を小さく分ける
大きな1ツールより、小さなツール複数の方が保守しやすい。
※ ただし数が多い場合はツール定義の読み込みコストや選択ミスを避けるため、Tool Search Tool などで動的に候補を絞る設計が有効。
失敗系を最初に作る
タイムアウト、レート制限、キー未設定時のUXを先に決める。
これを先に設計しておくと、障害時でもユーザーが次の行動を取りやすくなり、運用時の原因切り分けも速くなります。
あわせて、無限リトライや不要なAPI呼び出しを防げるため、コスト事故の予防にもつながります。

他フレームワークとの使い分け

Vercel AI SDKは「UIとモデル呼び出しの標準化」が強みです。

一方で、

複雑なエージェント制御
ワークフロー設計
ツール実行の高度なオーケストレーション

が中心なら、Mastraなどの実行基盤と組み合わせると設計しやすくなります。

AG-UIとの関係（補足）

AG-UIは、AgentとUI間のイベント駆動プロトコルです。
Vercel AI SDKもストリーミングUI連携を扱いますが、立ち位置は異なります。

Vercel AI SDK: アプリ実装向けのSDK（Core + UI）
AG-UI: Agent/UI間の相互運用を狙うプロトコル

言い換えると、次の理解が近いです。

AG-UI: エージェントとUIがやり取りするための統一ルール（共通プロトコル）
Vercel AI SDK: SDK内で最適化された実装ルール + 実装機能（Core/UI）

つまり「AG-UI = ルール中心」「Vercel AI SDK = ルールだけでなく実装そのものも提供」という違いがあります。

イメージとしては次の通りです。

Vercel AI SDKで完結させる: 単一アプリ内で素早く実装
AG-UIを採用する: 異なるエージェント基盤やクライアント間でイベント仕様を合わせたいとき

まとめ

Vercel AI SDKは、

Coreで推論処理を揃え、
UIで会話体験を揃える

ための実践的なSDKです。

AIアプリの入出力を標準化する基盤として見ると活用しやすくなります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up