Vercel AI SDK 無料で自社アプリにAI機能を統合 開発者向け実装パターン集

自社アプリへのAI機能追加は、大規模な開発に見えるかもしれません。Vercel AI SDKなら、開発者1人と無料のSDKで、チャットや文書検索を組み込めます。この記事では、中小企業が社内業務から始める実装方法、料金の考え方、導入手順をコード例付きで整理します。

この記事のポイント

• Vercel AI SDKは無料。費用が発生するのは、主にAIモデルのAPI利用料です
• チャット・ストリーミング・エージェントの3パターンから段階的に始められます
• 既存のNext.jsアプリへ追加しやすいため、社内ツールの小さな機能から試せます
• AIサービス提供企業を変更しやすいため、料金や品質を比較できます
• 費用は利用量で変わります。小規模な社内利用でも、上限を決めて管理しましょう

🧩 Vercel AI SDKとは

Vercel AI SDKは、Vercel社が提供するオープンソースのAI開発フレームワークです。JavaScriptやTypeScriptで、AIモデルを使うアプリを開発できます。

OpenAI、Anthropic、GoogleなどのAIモデルを、似たコード構造で呼び出せる点が特徴です。AIサービス提供企業ごとに異なるAPI仕様を覚える負担を減らせます。

主な機能

• 複数のAIモデルを利用: プロバイダーごとの接続処理をまとめやすい
• ストリーミング応答: 生成された文章を順番に表示できる
• ツール呼び出し: 外部APIや社内処理をAIから呼び出せる
• Next.jsとの連携: Webアプリへ組み込みやすい

// OpenAIを使う場合
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text } = await generateText({
  model: openai('gpt-4o-mini'),
  prompt: '要約してください',
});

// Anthropicへ変更する場合
import { anthropic } from '@ai-sdk/anthropic';

const { text } = await generateText({
  model: anthropic('claude-sonnet-4-20250514'),
  prompt: '要約してください',
});

モデルを指定する部分を変えるだけで、接続先を変更できます。ただし、モデルごとに得意分野や料金が違うため、実際の業務データで確認することが必要です。

次は、無料で始められる理由と、中小企業での費用管理を確認します。

💡 中小企業の自社アプリに向く理由

Vercel AI SDKが中小企業に向く理由は、初期費用を抑えながら、小さく検証できることです。

SDK自体は無料

Vercel AI SDKはMITライセンスのオープンソースです。商用利用も可能で、SDKの利用料はかかりません。

ただし、開発者の作業時間は必要です。AIモデルのAPI利用料、データベース、公開用サーバーなどの費用も別に考えます。

AIモデルのAPI利用料を管理する

AIモデルの料金は、入力と出力のトークン数で決まります。トークンは、AIが文章を処理する単位です。

たとえば、月間1,000セッション、1セッションあたり10往復とします。1往復を入力300トークン、出力200トークンと仮定すると、月間使用量は次の通りです。

• 入力: 1,000 × 10 × 300 = 3,000,000トークン
• 出力: 1,000 × 10 × 200 = 2,000,000トークン

モデルや料金は変更されるため、金額は導入時に公式ページで再計算してください。編集部では、社内利用の費用を試算する際、利用者数、質問回数、入力文書の長さ、出力の長さを分けて見積もることを推奨します。

Vercelの無料プランから始める

Vercelには、個人や小規模な検証向けのHobbyプランがあります。利用条件や商用利用の可否、上限は変更される可能性があるため、契約前に公式料金ページで確認してください。

本番運用では、Vercel Proなどの有料プランが必要になる場合があります。公式料金ページでは、Proプランを月額$20として案内していますが、為替や税、契約条件によって日本円の支払額は変わります。

次は、社内FAQを例に、基本的なチャット機能を実装します。

💬 実装パターン1: チャットボット

チャットボットは、Vercel AI SDKの基本的な用途です。社内FAQ、問い合わせの一次受付、商品情報の検索などに利用できます。

useChatを使った最小実装

以下は、Next.jsのApp Routerを使った例です。SDKのバージョンによってAPIが変わるため、実装時は公式ドキュメントも確認してください。

// 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();
}

// app/page.tsx
'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === 'user' ? 'あなた: ' : 'AI: '}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="質問を入力してください"
        />
        <button type="submit">送信</button>
      </form>
    </div>
  );
}

この2ファイルで、ストリーミング対応のチャット画面を作れます。実際の導入では、認証、利用制限、ログ管理、個人情報の扱いも追加で検討します。

社内文書を使うRAG構成

RAGは、社内文書などの外部情報を検索し、その結果をAIの回答に利用する仕組みです。就業規則、製品マニュアル、過去の問い合わせ履歴などを対象にできます。

RAGでは、文書の分割方法や検索精度が回答品質に影響します。最初から全社文書を登録せず、経費精算マニュアルなど1種類から試すと、改善点を把握しやすくなります。

品質を保つ3つの対策

• 根拠を表示する: 参照した文書名や該当箇所を示す
• 分からない場合の返答を決める: 推測せず、確認を促す
• 定期的にテストする: 代表的な質問を用意し、回答を確認する

次は、回答を待つ間の操作感を改善するストリーミング応答を見ていきます。

⚡ 実装パターン2: ストリーミング応答

ストリーミング応答は、AIが生成した文章を順番に表示する方法です。すべての生成が終わるまで待つ必要がないため、処理中であることを利用者へ伝えられます。

ストリーミングの効果

• 待ち時間を把握しやすい: 生成中であることが分かる
• 画面が止まったように見えにくい: 通信中の状態を伝えられる
• 長い回答を読み始めやすい: 生成済みの部分から確認できる

離脱率が下がるかどうかは、利用者や画面構成によって変わります。編集部では、導入前後の利用継続率や中断率を計測して判断することを推奨します。

streamTextを使う

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

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

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

    return result.toDataStreamResponse();
  } catch (error) {
    console.error('AI API呼び出しエラー:', error);
    return new Response(
      'AIの応答生成中にエラーが発生しました。',
      { status: 500 }
    );
  }
}

toDataStreamResponse()で、サーバーからクライアントへ応答を順番に送ります。利用するSDKの版によって返却メソッドが異なる場合があるため、公式資料に合わせてください。

エラーと時間制限を設ける

AI APIは、通信障害や利用上限などで失敗することがあります。エラー内容を記録し、利用者には再試行方法を示しましょう。

また、応答が長時間返らない場合に備え、実行時間の上限も設定します。設定名や対応範囲は、利用するSDKとホスティング環境で確認してください。

次は、AIに社内処理を実行させるエージェントの基本構成を紹介します。

🤖 実装パターン3: エージェント

エージェントは、AIモデルが外部の関数やAPIを呼び出し、複数の処理を進める仕組みです。問い合わせの分類、担当者の特定、返信文の下書きなどに利用できます。

ツール呼び出しの実装例

// app/api/agent/route.ts
import { generateText, tool } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const classifyInquiry = tool({
  description: '問い合わせ内容をカテゴリに分類する',
  parameters: z.object({
    category: z.enum(['請求', '製品サポート', '営業', 'その他']),
    urgency: z.enum(['高', '中', '低']),
    summary: z.string().describe('問い合わせ内容の要約'),
  }),
});

const findAssignee = tool({
  description: 'カテゴリに応じて担当者を特定する',
  parameters: z.object({
    category: z.string(),
  }),
});

const draftReply = tool({
  description: '問い合わせに対する返信案を作成する',
  parameters: z.object({
    reply: z.string().describe('返信案の本文'),
  }),
});

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

  const result = await generateText({
    model: openai('gpt-4o'),
    tools: {
      classifyInquiry,
      findAssignee,
      draftReply,
    },
    prompt: `以下の問い合わせメールを処理してください。

---
${emailBody}
---

1. 問い合わせを分類してください
2. 担当者を特定してください
3. 返信案を作成してください
`,
  });

  return Response.json(result.toolResults);
}

この例では、AIが複数の処理を組み合わせます。実際に担当者を検索したり、メールを送信したりする場合は、各ツールに認証や権限確認を追加してください。

費用と安全性を確認する

エージェントは、1回の処理で複数回のAIモデル呼び出しが起きます。チャットより費用が増える可能性があるため、処理回数とトークン数を記録してください。

また、顧客対応や重要な社内処理を完全自動化する場合は、誤判定の影響が大きくなります。初期段階では、返信案の作成までにとどめ、人が承認してから送信する設計が現実的です。

次は、SDK、公開環境、AIモデルを含めた費用の全体像を整理します。

💰 費用の全体像

Vercel AI SDKを使う場合、主な費用は次の4つです。

Vercel Proの価格や条件は変更される可能性があります。日本円の金額を固定せず、契約時にVercel公式料金ページで確認してください。

AIモデルの料金比較

以下は、記事執筆時点で確認した代表的なモデルの例です。モデルの提供状況や料金は変更されるため、利用前に各社の公式ページで再確認してください。

旧モデル名や過去の料金を、2026年時点の価格として固定表示するのは避けます。モデルの退役や価格改定があるため、料金を試算する際は、使用するモデルの公式ページを参照してください。

月間費用の目安

編集部の推定では、小規模な社内ツールのAIモデル利用料は、数百円から数千円に収まるケースがあります。ただし、長い文書を毎回送る場合や、エージェントを多用する場合は増加します。

これは編集部の試算です。実際の費用は、利用量、モデル、為替、契約条件で変わります。導入前に月額上限を決め、実績をもとに更新してください。

次は、導入時に起きやすい失敗と、その防ぎ方を確認します。

⚠️ よくある失敗パターン

失敗1: 無料のSDKだけで予算を組む

AIモデルのAPI利用料、公開環境、データベース、開発工数を見落とすケースです。

対策: 利用者数、質問回数、入力と出力の長さを仮定し、月額上限を決めます。実際の利用量を記録し、毎月見直します。

失敗2: 指示文を軽視する

指示文が曖昧だと、回答の形式や品質が安定しません。

対策:

• 役割を指定する: 社内FAQ担当など、目的を明記する
• 根拠を限定する: 登録文書以外を推測しないよう指示する
• 確認質問を用意する: 情報不足時の対応を決める
• テストする: 代表的な質問を10〜20問用意する

失敗3: 最初から大規模なエージェントを作る

複数のシステムを一度に操作させると、開発や検証が複雑になります。

対策: まずは1機能のチャットから始め、次に文書検索や返信案作成を追加します。

失敗4: APIキーを公開する

APIキーを画面側のコードやGitリポジトリに書くと、不正利用につながるおそれがあります。

# .env.local（Gitにコミットしない）
OPENAI_API_KEY=sk-xxxxx

// サーバー側のAPIルートでのみ参照
import { openai } from '@ai-sdk/openai';

const model = openai('gpt-4o-mini', {
  apiKey: process.env.OPENAI_API_KEY,
});

次は、開発者1人で社内ツールへ導入する流れを示します。

🗺️ 導入ステップ

次は、導入前に確認しておきたい質問に答えます。

❓ よくある質問

Q1: プログラミングができなくても使えますか？

Vercel AI SDKには、JavaScriptまたはTypeScriptの知識が必要です。ノーコードツールではありません。

社内に開発者がいない場合は、外部の開発会社へ依頼する方法があります。その場合は、開発費、保守費、AIモデルのAPI利用料を分けて見積もりましょう。

Q2: Vercel以外でも使えますか？

Node.jsが動く環境であれば、AWS、Google Cloud、自社サーバーなどでも利用できます。ただし、認証、ストリーミング、環境変数の設定は、利用する環境に合わせて調整が必要です。

Q3: 日本語の資料はありますか？

公式資料は英語が中心です。日本語の解説は参考になりますが、SDKの版やAPI仕様が古い場合があります。実装前に、公式ドキュメントで現在の使い方を確認してください。

Q4: AIモデルはどう選びますか？

用途、品質、速度、料金で比較します。

料金は変更されるため、モデル名だけで判断せず、利用時点の公式価格を確認してください。

Q5: 機密情報をAIモデルへ送っても安全ですか？

AIモデルへ送信した情報は、提供企業のサーバーで処理されます。個人情報や機密情報を扱う場合は、データの保存期間、学習利用の有無、契約条件、アクセス権限を確認してください。

社内規程や個人情報保護法への対応も必要です。送信する情報を匿名化し、必要な範囲だけに限定する方法も検討します。

Q6: Next.js以外のReactアプリにも組み込めますか？

組み込めます。ただし、サーバー側のAPIルートやストリーミング処理を自分で用意する必要があります。Next.jsのApp Routerを使う場合より、実装量が増えることがあります。

次は、導入判断の要点をまとめます。

📚 まとめ: 社内の1機能から始める

Vercel AI SDKは、開発者がいる中小企業が自社アプリへAI機能を追加する際に、検討しやすい選択肢です。SDKは無料ですが、AIモデルのAPI利用料、公開環境、開発工数は必要です。

• 費用を分けて考える: SDK、公開環境、AIモデル、開発工数を別々に見積もる
• 小さく始める: 社内FAQや文書要約など、1つの業務から試す
• 品質を確認する: 根拠表示、テスト質問、誤回答の記録を用意する
• 安全性を優先する: APIキー、個人情報、権限、操作履歴を管理する
• 段階的に広げる: チャット、文書検索、返信案作成の順に検証する

経営者や事業主が導入を判断する際は、「何を自動化するか」だけでなく、「誰が確認するか」「月額上限はいくらか」も決めてください。まずは小さな社内業務で効果と費用を測り、その結果をもとに次の機能を検討する進め方が適しています。

🔗 出典・参考情報

• Vercel AI SDK公式ドキュメント: https://ai-sdk.dev/
• Vercel料金ページ: https://vercel.com/pricing
• OpenAI API料金ページ: https://openai.com/api/pricing/
• Anthropic料金ページ: https://www.anthropic.com/pricing
• Google Gemini API料金ページ: https://ai.google.dev/gemini-api/docs/pricing
• GitHubリポジトリ: https://github.com/vercel/ai

Mira ／ AI経営ラボ 編集長

料金プラン

👍 メリット

• オープンソースで無料。商用利用も制限なし
• OpenAI・Anthropic・Google など主要LLMを1つのAPIで統合
• ストリーミング応答が標準対応。UX向上が容易
• Next.js との相性が抜群。既存アプリへの組み込みがスムーズ
• ベンダーロックインが低い。プロバイダー変更もコード修正が最小限

👎 デメリット

• JavaScript/TypeScript の知識が必須。ノーコードでは使えない
• LLM API の利用料は別途発生する（SDK自体は無料）
• 日本語ドキュメントが少ない。英語の公式ドキュメント参照が必要
• Vercel 以外の環境（AWS・GCP）でも動くが、最適化はVercel寄り