Vercel AI SDKとは｜使い方とLLMアプリ開発の始め方

Vercel AI SDKとは｜TypeScript向けのLLM統合ツールキット

AI SDKは、LLMを使うアプリケーションとエージェントを構築するためのTypeScriptツールキットです。 公式ドキュメントでは、React・Next.js・Vue・Svelte・Node.jsに対応したツールキットと説明されています（AI SDK by Vercel 公式ドキュメント）。

名前に「Vercel」が付いて語られることが多いものの、パッケージ名は単に ai で、公式サイトでも「AI SDK」と表記されています。Vercelが開発・メンテナンスしているため通称として「Vercel AI SDK」が定着した、という経緯です。

Vercelへのデプロイは必須ではない

よくある誤解を先に潰しておきます。AI SDKを使うために、アプリをVercelにデプロイする必要はありません。

ただのnpmパッケージなので、AWSでもGoogle CloudでもオンプレのNode.jsサーバーでも動きます。Next.jsすら必須ではなく、素のNode.jsスクリプトから呼ぶこともできます。

Vercelというホスティング基盤そのものについては、Vercelとは？特徴・Next.js連携・料金・案件動向をフリーランス視点で解説で扱っています。

解決しているのは「プロバイダーごとの差分」と「ストリーミング」

AI SDKを使わずにLLMアプリを作ると、だいたい次の3つで時間を溶かします。

1. プロバイダーごとにSDKもレスポンス形式も違う。OpenAIとAnthropicではメッセージの組み立て方も、ツール呼び出しの返り方も揃っていません

2. ストリーミングの実装が面倒。サーバーから届くチャンクを解釈し、Reactの状態へ流し込み、途中でキャンセルできるようにする。この配線は毎回ほぼ同じなのに、毎回書くことになります

3. 構造化出力の扱いが煩雑。JSONで返してほしいのに自然文が混ざる、スキーマ検証を自前で書く、といった定番の苦労があります

AI SDKはこの3つをまとめて引き受けます。モデルを差し替えても呼び出し側のコードはほぼ変わらない、というのが最大の売りです。

ミニFAQ：AI SDKはフロントエンド専用？

いいえ。生成処理を担うAI SDK Coreはサーバーサイドで動くものです。フロント側のフックを提供するAI SDK UIと組み合わせて使う設計で、どちらか一方だけを使うこともできます。

AI SDKの構成｜CoreとUIの2層を理解する

AI SDKは役割の異なる2つのパッケージ群で構成されています。 この分け方を理解しておくと、ドキュメントのどこを読むべきかが即座に判断できます。

公式ドキュメントでは、CoreはLLMでテキスト・構造化オブジェクト・ツール呼び出しを生成しエージェントを構築するための統一API、UIはチャットや生成UIを素早く構築するためのフレームワーク非依存なフック群と説明されています。

AI SDK Core｜サーバー側の生成処理

Coreで押さえる関数は、まず4つで足ります。

• generateText：生成が終わってからまとめて受け取る。バッチ処理や非同期ジョブ向き

• streamText：トークンが生成されるそばから流す。チャットUIはほぼこれ

• generateObject：スキーマに沿った構造化データを受け取る

• streamObject：構造化データを部分的に流しながら受け取る

この4つの使い分けが、AI SDKの学習コストの大半を占めます。逆に言えば、ここさえ押さえれば残りは必要になったときに調べれば間に合います。

構造化出力そのものの考え方は、LLMの構造化出力とは｜JSON出力とFunction Callingの使い分けで整理しています。

AI SDK UI｜チャット画面用のフック

UI側が提供するフックは3つです。公式のAI SDK UI概要ページによると、それぞれの役割は次のようになっています（AI SDK UI Overview）。

• useChat：チャットメッセージのリアルタイムストリーミングと、メッセージ・ローディング・エラー状態の管理

• useCompletion：テキスト補完。ストリーミングされた内容でUIを自動更新

• useObject：ストリーミングされたJSONオブジェクトの処理

執筆時点の公式ドキュメントでは、React（@ai-sdk/react）、Vue（@ai-sdk/vue）、Svelte（@ai-sdk/svelte）、Angular（@ai-sdk/angular）が公式パッケージとして挙げられ、SolidJS向けはコミュニティメンテナンス版という扱いになっています。フレームワークによって提供される名称が異なる点には注意が必要です。対応範囲は更新されるため、使う前に公式ページで確認してください。

対応プロバイダーは公式ページ掲載分で17種

2026年10月時点で公式プロバイダーのページに掲載されているのは17種です。 xAI Grok、OpenAI、Anthropic、Google、Google Vertex、Mistral、Cohere、DeepSeek、Moonshot AI、Groq、Together AI、Fireworks、Alibaba、DeepInfra、Cerebras、Hugging Face、Basetenが挙げられています（AI SDK Providers）。これとは別に、Language Model Specificationに沿って作られたコミュニティプロバイダーも存在します。

プロバイダーの追加・統合は随時行われるため、採用を検討する際は公式ページの現在の掲載内容を確認してください。

ここで大事なのは、公式プロバイダーでも対応機能が揃っているわけではない点です。 公式ページには画像入力・オブジェクト生成・ツール使用・ツールストリーミングの対応状況が機能対比表で整理されています。モデルを差し替える前に、この表で該当機能の対応を確認してください。

Vercel AI SDKの使い方｜4ステップの全体像

使い方は「入れる→呼ぶ→型をつける→道具を渡す」の4段階で捉えると見通しが良くなります。 コードの細部より、どの段階で何を決めるのかを先に掴むほうが実務では効きます。

ステップ1：インストールとプロバイダーの選定

本体パッケージ（ai）と、使うプロバイダーのパッケージをあわせて入れます。APIキーは環境変数に置き、クライアント側のコードには絶対に出しません。

この段階で決めるのは「どのモデルを第一候補にするか」です。AI SDKは差し替えが効くとはいえ、プロンプトの効き方はモデルごとに違います。最初から複数モデルを想定するなら、評価の仕組みも同時に考えておくと後が楽です。評価設計についてはLLM評価（Evals）とは｜LLM-as-a-Judgeと品質保証の実務まで解説を参照してください。

ステップ2：テキスト生成を通す

まずはgenerateTextで1往復を成立させます。ここが通れば、認証・ネットワーク・モデル指定の問題はクリアできています。

次にstreamTextへ切り替えて、サーバーからブラウザへ流す経路を作ります。チャット体験の良し悪しは、最初のトークンが返るまでの体感時間でほぼ決まります。 生成完了を待ってから一気に表示する実装は、同じモデルでも遅く感じられます。

ステップ3：構造化出力で型をつける

自然文のまま受け取ると、後続処理のパース地獄が待っています。generateObjectにスキーマを渡せば、検証済みのオブジェクトとして受け取れます。

分類・抽出・要約の構造化といった処理は、この段階で一気に実装が安定します。

ステップ4：ツール呼び出しとエージェント

ツール呼び出しは、LLMに「使っていい関数」を渡す仕組みです。ツールは入力スキーマで引数を定義し、実行関数で処理を書きます。

公式のAgents概要ページでは、エージェントを「LLMがツールをループで使ってタスクを達成するもの」と定義し、ToolLoopAgentを推奨の実装方法として紹介しています（AI SDK Agents）。ループはコンテキスト管理と停止条件によって制御され、停止条件がタスク完了のタイミングを決めます。

この停止条件の設計を省くと、ループが止まらずトークンを浪費します。 最大ステップ数の上限は、動くようになった直後ではなく最初に入れてください。

ミニFAQ：Python版はありますか

AI SDKはTypeScript向けのツールキットで、Python版の公式提供はありません。Pythonで同様のことをするなら、LangChainやLlamaIndexなど別系統のライブラリが選択肢になります。

LangChain・LlamaIndex・Difyとの違い

守備範囲が重なるようで、実は得意な場所がはっきり分かれています。 「どれが優れているか」ではなく「何を作るか」で選ぶ領域です。

判断の目安

• フロントエンドまで自分で作る、TypeScriptで完結させたい → AI SDK

• 検索・前処理・複雑な分岐があり、Python資産がある → LangChain系。LangChainとは？できること・活用事例から年収・将来性まで解説を参照

• 文書取り込みとRAGが中心 → LlamaIndexとは｜RAG構築の仕組み・LangChainとの違いを解説

• 複雑なエージェントのループ制御が主題 → LangGraphとは｜LangChainとの違い・エージェント構築の基本やAIエージェント開発フレームワーク比較｜LangGraph・CrewAI・AutoGen

• まずノーコードで検証したい → Difyとは？ノーコードでLLMアプリを構築できる生成AIプラットフォームを徹底解説

併用もよくある構成です。Python側でRAGの検索APIを立て、TypeScript側のAI SDKから叩く、という分担は素直に機能します。RAGの仕組み自体はRAGとは？仕組み・活用事例・導入メリットをわかりやすく解説で解説しています。

v0との違い

同じVercel製でも、v0 by Vercelとは？AIによるUIコード生成の使い方・料金・案件動向を解説で扱っているv0は、プロンプトからUIコードを生成する開発支援ツールです。v0は「作る側を助ける道具」、AI SDKは「作ったアプリに組み込む部品」 という違いがあります。両者は競合しません。

バージョンの選び方｜v5・v6・v7の違い

AI SDKは更新が速く、メジャーバージョン間の差分が大きいライブラリです。 記事やブログを読むときは、それがどの系列の話かを必ず確認してください。

執筆時点の最新安定版

本記事執筆時点（2026年10月）でnpmのaiパッケージのlatestタグが指しているのは7系です。あわせて6系・5系にもタグが振られており、既存プロジェクトの保守向けに並行して参照できる状態です。最新の状況は公式リポジトリのリリース一覧で確認してください。

バージョン番号を断定した記事は短期間で古くなります。学習を始める際は、公式ドキュメントのバージョン表記を自分の目で確認するのが確実です。

v7での主な破壊的変更

以下は、執筆時点で公式の移行ガイドに記載されている内容から影響が大きいものを抜き出したものです（AI SDK 7.0 Migration Guide）。移行ガイドは加筆・修正されることがあるため、実際の移行作業では公式ページの現行版を参照してください。

Node.js 22以上の要求は、既存プロジェクトでは最初の関門になりやすい箇所です。 実行基盤のランタイムバージョンが上げられない現場では、7系への移行がそこで止まります。

旧バージョンが残っている案件での注意

5系・6系が動いている現場は珍しくありません。ただしサポート方針は時期によって変わるため、参画前にアップデート計画の有無を確認してください。 依存パッケージのEOLと同時に問題化するケースがあり、「動いているから大丈夫」とは言い切れません。

experimental_接頭辞が付いた機能は、名称や引数が変わる前提で扱うのが安全です。接頭辞付きのAPIを本番の重要経路に深く埋め込むと、アップデートのたびに修正範囲が広がります。

実務で詰まりやすい5つのポイント

APIキーをクライアントに出してしまう

もっとも多い事故です。AI SDK UIのフックはブラウザで動くため、そこから直接プロバイダーを呼ぶ構成にするとキーが露出します。生成処理は必ずサーバー側のルートハンドラやAPIルートを経由させてください。

ランタイムの違いでライブラリが動かない

エッジランタイムとNodeランタイムでは、使えるNode APIが異なります。ファイルシステムや一部の暗号化ライブラリに依存した処理をエッジ側に置くと、ローカルでは動いて本番で落ちる、という典型的な事故になります。

トークンコストの見積もりが甘い

ストリーミングでサクサク動くと、裏でトークンを大量に消費していることを忘れがちです。会話履歴を毎回全量送る実装は、ターンが進むほど入力トークンが膨らみます。

履歴の要約・切り詰め、モデルの使い分けといった対策は、LLMコスト最適化案件の単価相場｜トークン削減・推論設計のフリーランス実務で扱っています。

プロンプトインジェクションの対策が後回しになる

ユーザー入力をそのままプロンプトに流す実装は、ツール呼び出しを伴うと危険度が跳ね上がります。外部から注入された指示でツールが実行される経路ができあがるためです。

対策の考え方はプロンプトインジェクション対策｜LLMアプリのセキュリティ実装ガイド、出力側の制御はLLMのガードレールとは｜出力制御の実装パターンとツール選定にまとめています。

プロバイダーを差し替えたら挙動が変わる

モデル差し替えのコストが低いことと、差し替えても結果が同じであることは別の話です。プロンプトの効き方、ツール呼び出しの素直さ、構造化出力の安定度はモデルごとに違います。差し替えを想定するなら、簡単でいいので評価セットを先に用意しておいてください。

ケース別の使いどころ

既存のNext.jsアプリにチャットを足す

AI SDKがもっとも素直にハマるケースです。サーバー側のルートハンドラでstreamTextを呼び、クライアント側はuseChatで受ける。この構成なら、動くものを作るまでは短時間で到達できます。

Next.js自体についてはNext.jsとは？React基盤のフレームワークの特徴・できること・年収・将来性をフリーランス視点で解説を参照してください。

社内RAGのフロント側を担当する

検索基盤がPythonで組まれていて、フロント側だけTypeScriptというケースです。Python側を検索APIとして切り出し、AI SDKからは「検索ツール」として渡す構成にすると、責務が綺麗に分かれます。

この分担は、チームのスキルセットが分かれている現場で特に機能します。 無理に片方の言語へ寄せる必要はありません。

社内に生成AI活用のPoCを作る

まず動くものを見せたい段階なら、Difyのようなノーコードツールで検証してから、本番化のタイミングでAI SDKへ移すという順番も現実的です。PoCの段階でコードを書き込みすぎると、要件が変わったときの手戻りが大きくなります。

フリーランス案件でのVercel AI SDK

「AI SDK経験者募集」という形で名指しされる案件は、現状ではあまり見かけません。 多くは「Next.js／TypeScriptでの開発経験」＋「生成AI機能の実装経験」という括りの中に含まれる形です。

ここでの記述は、2026年10月時点で首都圏中心の主要フリーランスエージェント数社の公開案件ページを確認した範囲の観測で、週3〜5日の準委任案件を想定しています。公開案件数がまだ多くない領域のため、観測ベースの目安として読んでください。

その範囲で見る限り、AI SDKは単独スキルとして募集要件に立つより、フロントエンド案件やAIアプリ開発案件の実装手段として現れるケースが中心です。単体で案件を探すより、TypeScript・Next.jsの案件を軸に、生成AI実装の経験を提示材料として使うほうが現実的でしょう。

求められやすいスキルの組み合わせ

• TypeScriptでの実務経験。基礎はTypeScriptとは？JavaScriptとの違いや年収、将来性について解説で確認できます

• React／Next.jsでのアプリ実装経験

• LLM APIを使った実装経験（プロンプト設計・ストリーミング・コスト意識）

• セキュリティ観点（キー管理、入力検証）

AI領域全体での言語選択の考え方は生成AI時代に需要が伸びるプログラミング言語｜LLM開発・AIアプリ実装の主要選択肢で整理しています。

単価の考え方

AI SDKという特定ライブラリ名で切り出した単価相場を示せるほど、公開案件の母数はまとまっていません。そのため本記事では、AI SDK単体の単価レンジを数字で提示することは避けます。 実務上は、TypeScript／Next.jsの案件レンジを基準に、生成AI実装の経験がどう評価されるかを個別に見ていくことになります。

隣接領域として、AIエージェント開発案件の単価相場｜必要スキル・獲得ルートを解説に目を通しておくと、LLM実装を含む案件の相場観が掴みやすくなります。単価を体系的に上げる考え方は【2026年最新版】フリーランスエンジニアの単価相場と単価の上げ方とは？にまとめています。

自分がどのくらいの単価を狙えるか気になる方は、無料のフリーランスエンジニア単価診断で現在の市場単価の目安を確認できます。TypeScript案件の募集状況はTypeScript案件一覧から確認できます。

導入前チェックリスト

着手前にこれだけ潰しておくと、後戻りが減ります。

まとめ

AI SDKは、TypeScriptでLLMアプリを作るときの配線を肩代わりしてくれるツールキットです。 プロバイダーの差分吸収とストリーミング実装という、毎回書くことになる面倒を引き受けてくれる点に価値があります。

要点を整理します。

• 構成はCore（サーバー側の生成）とUI（チャット用フック）の2層。この分け方を押さえればドキュメントを読む場所がわかる

• 使い方はgenerateText・streamText・generateObject・streamObjectの4関数が中心。ここから広げていけばよい

• LangChain系とは守備範囲が違う。TypeScriptでフロントまで一体で作るならAI SDK、Pythonでのデータ処理が主ならLangChain系

• 公式プロバイダーは執筆時点の掲載で17種あるが、機能の対応状況は揃っていない。公式の対比表で確認する

• バージョン差分が大きい。v7はNode.js 22以上・ESMのみ。参照する記事がどの系列か必ず確認する

• 案件では単独スキルより、TypeScript／Next.js案件の中の実装手段として現れることが多い

次の一歩としては、公式ドキュメントのクイックスタートで最小構成を動かし、そのあとツール呼び出しまで触ってみる流れをおすすめします。手を動かした経験は、そのまま案件での説明材料になります。

参照した一次情報は次のとおりです。

• AI SDK by Vercel 公式ドキュメント

• AI SDK UI Overview

• AI SDK Agents Overview

• AI SDK Providers

• AI SDK 7.0 Migration Guide

• vercel/ai リリース一覧（GitHub）