Vercel AI SDK

Page content

以下は **「個人で作れるAI SaaSの最小テンプレート」**です。
約100行で AIチャット + ログ保存 + 課金準備可能な構造になっています。

使う主な技術

Next.js
Vercel AI SDK
OpenAI
PostgreSQL
Stripe（後で追加）

まずは 最小AI SaaSの骨格を作ります。

① プロジェクト作成

npx create-next-app@latest ai-saas
cd ai-saas

インストール

npm install ai @ai-sdk/openai @ai-sdk/react
npm install drizzle-orm postgres

② 環境変数

.env.local

OPENAI_API_KEY=xxxxx
DATABASE_URL=postgres://user:pass@localhost:5432/ai

③ AI 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.toAIStreamResponse()
}

④ Chat UI

app/page.tsx

"use client"

import { useChat } from "@ai-sdk/react"

export default function Page() {

  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "/api/chat"
  })

  return (
    <main style={{maxWidth:700,margin:"40px auto"}}>

      <h1>AI SaaS</h1>

      {messages.map(m => (
        <div key={m.id}>
          <b>{m.role}:</b> {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="質問を書く"
          style={{width:"100%",padding:10}}
        />
      </form>

    </main>
  )
}

⑤ AIログ保存（SaaS化）

lib/db.ts

import postgres from "postgres"

export const sql = postgres(process.env.DATABASE_URL!)

ログ保存

route.ts

import { sql } from "@/lib/db"

await sql`
insert into messages (content)
values (${JSON.stringify(messages)})
`

⑥ DBテーブル

create table messages (
 id serial primary key,
 content jsonb,
 created_at timestamp default now()
);

⑦ 起動

npm run dev

http://localhost:3000

AI SaaSが動きます。

このテンプレートの構造

ai-saas
│
├ app
│  ├ api/chat/route.ts
│  └ page.tsx
│
├ lib/db.ts
└ .env.local

この100行テンプレートでできること

すでに

AIチャット
ストリーミング
DB保存
SaaS拡張

が可能です。

SaaSにするための追加（重要）

次を追加するだけです。

認証

NextAuth.js

課金

Stripe

DB

Supabase

個人AI SaaSの典型構成

Next.js
↓
Vercel AI SDK
↓
OpenAI
↓
Supabase
↓
Stripe

これで 1人SaaSが完成します。

実は今一番伸びている個人AI SaaS

2025〜2026で急増しているのは

AI営業メール生成
AI SEO記事生成
AIカスタマーサポート
AI議事録
AIコードレビュー

です。

ここでは Vercel AI SDK を 30分で理解できる最小AIアプリを作ります。
構成は AIチャット + ストリーミング + ツール呼び出しまで入った 実用レベルの最小構成です。

この例は Next.js で作ります（AI SDKと一番相性が良い）。

全体構成（最小AIアプリ）

AI Chat App
│
├─ Next.js
├─ Vercel AI SDK
├─ OpenAI
└─ React Chat UI

① プロジェクト作成

npx create-next-app@latest ai-demo
cd ai-demo

インストール

npm install ai @ai-sdk/openai @ai-sdk/react

② APIキー設定

.env.local

OPENAI_API_KEY=xxxxxxxx

（例：OpenAI）

③ AI 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.toAIStreamResponse()
}

ポイント

streamText()

これが AI SDKの核心APIです。

④ Chat UI

作成

/app/page.tsx

コード

"use client"

import { useChat } from "@ai-sdk/react"

export default function Page() {

  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "/api/chat"
  })

  return (
    <main style={{maxWidth:600, margin:"40px auto"}}>

      <h1>AI Chat</h1>

      {messages.map(m => (
        <div key={m.id}>
          <b>{m.role}:</b> {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="質問を書く"
          style={{width:"100%"}}
        />
      </form>

    </main>
  )
}

⑤ 起動

npm run dev

ブラウザ

http://localhost:3000

AIチャット完成。

ここまでで理解できること

この最小アプリで AI SDKの核心をすべて体験できます

機能	実装
AI呼び出し	`streamText()`
ストリーミング	`toAIStreamResponse()`
チャット管理	`useChat()`
React UI	Next.js

⑥ AIツール（Agent化）

次に AIがプログラムを呼ぶ機能を追加します。

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,

    tools: {
      getTime: {
        description: "現在時刻を取得",
        execute: async () => {
          return new Date().toLocaleString()
        }
      }
    }

  })

  return result.toAIStreamResponse()
}

AIに聞く

今の時間は？

AIが ツールを自動実行します。

⑦ Vercelにデプロイ

GitHubにpush

git push

Vercel に接続すると

自動デプロイ

環境変数

OPENAI_API_KEY

を追加。

完成アプリのコード構造

ai-demo
│
├─ app
│   ├─ api
│   │   └─ chat
│   │       └─ route.ts
│   └─ page.tsx
│
├─ .env.local
└─ package.json

これで理解できるAI開発の核心

この最小アプリを理解すると

AIチャット
AIエージェント
AI SaaS
RAG

全部作れるようになります。

もし本当にAI SaaSを作るなら

この構成に追加します

Next.js
↓
Vercel AI SDK
↓
PostgreSQL
↓
Stripe
↓
Auth

よく使うもの

PostgreSQL
NextAuth.js
Stripe

結論から言うと、Vercel AI SDK Cookbook の中で 最初に試すべき順番は3つだけです。
（いきなりAgentやRAGに行くと理解しにくいです）

Cookbookには ストリーミング・チャット・ツール・RAG・Agentなど多数のレシピがあります。(v5.ai-sdk.dev)

まず試すべきサンプル（最短ルート）

① Stream Text（最初）

Stream Text

理由

AI SDKの基本API
ほぼ全ての機能の土台

学べること

streamText()
AIストリーミング
APIルート

作れるもの
→ AI回答API

② Chat with Chat Prompt

Generate Text with Chat Prompt

理由

AIチャットの基本
メッセージ構造を理解できる

学べること

messages = [
 { role: "user", content: "質問" }
]

これが AIアプリの基本構造です。

③ useChat（React）

Send Custom Body from useChat

理由

UI連携
AIチャットアプリ完成

学べること

useChat()

Reactで

チャットUI
ストリーミング
API接続

が完成します。

次に試すべき（中級）

④ Call Tools

AIがプログラムを呼ぶ

例

天気API
DB検索
計算

AIエージェントの基本。

⑤ Generate Object

AIにJSONを生成させる

例

{
 title: "",
 summary: "",
 tags: []
}

AI SaaSではかなり重要。

上級（最後）

⑥ RAG Agent

外部データ検索

構成

ユーザー質問
↓
ベクトル検索
↓
AI回答

画像 / PDF解析

学習のおすすめ順序（重要）

Step1

Stream Text

↓

Step2

Chat Prompt

↓

Step3

useChat

↓

Step4

Call Tools

↓

Step5

RAG

この順番でやると
3時間でAI SaaSの基本を理解できます。

実は一番おすすめのサンプル

Cookbookより先にこれを見ると早いです。

Vercel AI Chatbot Template

理由

AI SDK全部入り
実際のSaaS構成
本番レベル

💡もしよければですが、
Cookbookより もっと理解が速い方法があります。

AIチャット
ツール
RAG

まで 一気に理解できます。

Vercel AI SDK 使い方ガイド

Vercel AI SDKは、AIを使ったアプリケーションをNext.jsなどで簡単に構築するためのライブラリです。

インストール

npm install ai
# プロバイダーも必要に応じてインストール
npm install @ai-sdk/openai      # OpenAI
npm install @ai-sdk/anthropic   # Anthropic
npm install @ai-sdk/google      # Google

基本構造

SDKは大きく3つのレイヤーに分かれています。

AI SDK Core   → LLMとのやり取り（generateText, streamText など）
AI SDK UI     → UIフック（useChat, useCompletion など）
AI SDK RSC    → React Server Components対応

1. テキスト生成（generateText）

シンプルな1回きりの応答生成。

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

const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: 'TypeScriptの特徴を3つ教えてください',
});

console.log(text);

2. ストリーミング（streamText）

リアルタイムに文字を流す。チャットUIに最適。

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

const result = streamText({
  model: anthropic('claude-opus-4-20250514'),
  prompt: '量子コンピュータを簡単に説明して',
});

// テキストをストリームで受け取る
for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

3. Next.js App Router での実装

APIルート（Server側）

// 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'),
    system: 'あなたは親切なアシスタントです。',
    messages,
  });

  return result.toDataStreamResponse();
}

フロントエンド（Client側）

// 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}>
          <strong>{m.role === 'user' ? 'あなた' : 'AI'}:</strong>
          <p>{m.content}</p>
        </div>
      ))}

      {/* 入力フォーム */}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="メッセージを入力..."
        />
        <button type="submit">送信</button>
      </form>
    </div>
  );
}

4. Tool Calling（関数呼び出し）

AIに外部ツールを使わせる機能。

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

const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: '東京の天気は？',
  tools: {
    getWeather: tool({
      description: '指定した都市の天気を取得する',
      parameters: z.object({
        city: z.string().describe('都市名'),
      }),
      execute: async ({ city }) => {
        // 実際のAPIを呼ぶ処理
        return { city, temperature: 25, condition: '晴れ' };
      },
    }),
  },
  maxSteps: 3, // ツール呼び出しの最大ステップ数
});

5. 構造化データ生成（generateObject）

JSONなど型付きデータを生成する。

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

const { object } = await generateObject({
  model: openai('gpt-4o'),
  schema: z.object({
    name: z.string(),
    age: z.number(),
    hobbies: z.array(z.string()),
  }),
  prompt: '架空の人物プロフィールを作成してください',
});

console.log(object.name);   // 型安全にアクセスできる
console.log(object.hobbies); // string[]

6. マルチモーダル（画像入力）

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

const { text } = await generateText({
  model: anthropic('claude-opus-4-20250514'),
  messages: [
    {
      role: 'user',
      content: [
        {
          type: 'image',
          image: 'https://example.com/image.jpg', // URLまたはBase64
        },
        {
          type: 'text',
          text: 'この画像を説明してください',
        },
      ],
    },
  ],
});

7. useChat の主要オプション

const {
  messages,        // メッセージ履歴
  input,           // 入力値
  isLoading,       // ストリーム中かどうか
  error,           // エラー情報
  handleSubmit,    // フォーム送信ハンドラ
  handleInputChange,
  stop,            // ストリーム停止
  reload,          // 最後のメッセージを再生成
  append,          // プログラムでメッセージを追加
} = useChat({
  api: '/api/chat',           // カスタムエンドポイント
  initialMessages: [],         // 初期メッセージ
  onFinish: (msg) => { ... }, // 完了時コールバック
  onError: (err) => { ... },  // エラー時コールバック
});

8. 環境変数の設定

# .env.local
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...
GOOGLE_GENERATIVE_AI_API_KEY=...

SDKは自動的に対応する環境変数を読み込みます。

よく使うパターン早見表

やりたいこと	使うAPI
1回だけ返答が欲しい	`generateText`
リアルタイムでストリーミング	`streamText`
JSONで構造化データが欲しい	`generateObject`
チャットUIを作る	`useChat`
AIに関数を呼ばせる	`tool` + `generateText`
画像を入力したい	`messages`の`content`配列

公式ドキュメントは sdk.vercel.ai が詳しいので、併せて参照してみてください。

① プロジェクト作成

② 環境変数

③ AI API（核心）

④ Chat UI

⑤ AIログ保存（SaaS化）

⑥ DBテーブル

⑦ 起動

このテンプレートの構造

この100行テンプレートでできること

SaaSにするための追加（重要）

認証

課金

DB

個人AI SaaSの典型構成

実は今一番伸びている個人AI SaaS

全体構成（最小AIアプリ）

① プロジェクト作成

② APIキー設定

③ AI API（サーバー）

④ Chat UI

⑤ 起動

ここまでで理解できること

⑥ AIツール（Agent化）

⑦ Vercelにデプロイ

完成アプリのコード構造

これで理解できるAI開発の核心

もし本当にAI SaaSを作るなら

まず試すべきサンプル（最短ルート）

① Stream Text（最初）

② Chat with Chat Prompt

③ useChat（React）

次に試すべき（中級）

④ Call Tools

⑤ Generate Object

上級（最後）

⑥ RAG Agent

⑦ Multi-Modal Agent

学習のおすすめ順序（重要）

実は一番おすすめのサンプル

Vercel AI SDK 使い方ガイド

インストール

基本構造

1. テキスト生成（generateText）

2. ストリーミング（streamText）

3. Next.js App Router での実装

APIルート（Server側）

フロントエンド（Client側）

4. Tool Calling（関数呼び出し）

5. 構造化データ生成（generateObject）

6. マルチモーダル（画像入力）

7. useChat の主要オプション

8. 環境変数の設定

よく使うパターン早見表