既存のSaaSにAI機能を追加したくても、何から手をつければいいかわからない——そういう状況でよく選ばれる組み合わせがある。

Claude API、Vercel AI SDK、Supabase pgvectorの3ツールだ。この3つを組み合わせると、プロバイダー差異の吸収からストリーミング実装、RAGによる文脈検索まで、週末という短期間でも動作するAI機能を既存プロダクトへ追加できる。この記事では、それぞれの役割と連携の仕組みを整理する。

この記事でわかること：

  • Claude APIを選ぶ理由と他モデルとの使い分け
  • Vercel AI SDKでストリーミング実装を短縮する仕組み
  • pgvectorでRAGを実装してAIに「文脈の記憶」を持たせる手順
  • モデルを1行で切り替えられる設計のメリット

このスタックが解決する課題

SaaSにAI機能を追加しようとすると、いくつかの実装上の壁にぶつかる。AIプロバイダーごとにAPIの形式が異なるため、後からモデルを変えると大量のコードを書き直す必要がある。ストリーミング対応も各プロバイダーの仕様を個別に実装しなければならない。さらに、AIがユーザーのドキュメントや社内データを参照できるようにするには、ベクトル検索の仕組みが別途必要だ。

この3ツールの組み合わせは、それぞれの課題を担当ツールが分担して解決する設計になっている。

Vercel AI SDK：プロバイダーを選ばない統一API

AI SDK by Vercel
The AI SDK is the TypeScript toolkit for building AI applications and agents with React, Next.js, Vue, Svelte, Node.js, …
sdk.vercel.ai

Vercel AI SDK（v6）は、AIプロバイダーとの通信を抽象化するTypeScriptライブラリだ。Claude、GPT-4、Geminiなど20以上のプロバイダーを同じAPIで呼び出せる。モデルの切り替えは、provider指定を1行変えるだけでよい。

SDKは3層構成になっている。AI SDK CoreはLLMへのテキスト生成・構造化データ生成・ツール呼び出しを統一APIで提供する。AI SDK UIはReact/Next.js向けのuseChatフックなど、チャットUIに必要なロジックをまとめたフック群だ。AI SDK RSCはReact Server Componentsでの生成UIに対応するが、現時点ではexperimental扱いでAI SDK UIの使用が推奨されている。

ストリーミングはstreamText関数一つで対応できる。以前はプロバイダーごとにSSEの実装を書く必要があったが、その手間がなくなる。ツール呼び出し（function calling）も統一APIで扱え、複数ステップのエージェント処理も実装できる。

インストールは以下で完了する。

npm install ai @ai-sdk/anthropic

Claude API：精度と命令追従を重視するなら

SaaSのAI機能では、ユーザーの指示を正確に実行できるかどうかが品質を左右する。Claude Sonnet 4.6はコスト・速度・推論精度のバランスが高く、SaaS向け機能の実装で選ばれることが多い。複雑な処理が必要な場面ではClaude Opus 4.7を選べる。

Vercel AI SDKからClaudeを呼び出す実装は次のようになる。

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

const result = streamText({
  model: anthropic('claude-sonnet-4-6'),
  prompt: 'ユーザーの質問をここに渡す',
});

将来的にモデルを変える場合も、anthropic('claude-sonnet-4-6')の部分を書き換えるだけで済む。OpenAIやGoogleへの切り替えも同じ手順でできる。バッチ処理に対応したユースケースでは、Anthropic APIのバッチ機能を使うとトークンコストを50%削減できる。

Supabase pgvector：PostgresをベクトルDBに変える

pgvector: Embeddings and vector similarity | Supabase Docs
pgvector: a Postgres extension for storing embeddings and performing vector similarity search.
supabase.com

pgvectorはPostgreSQLの拡張で、ベクトル（埋め込み）の保存と類似度検索に対応する。Supabaseはpgvectorをダッシュボードのエクステンション一覧からワンクリックで有効化できる。既存のPostgresスキーマにvector型の列を追加するだけなので、新しいデータベースを別途立てる必要はない。

RAG（Retrieval Augmented Generation）の実装は次の流れで進む。まず、ユーザーのドキュメントや社内データをテキストに変換する。次に、埋め込みモデル（OpenAIのtext-embedding-3-smallなど）でベクトル化し、pgvectorのテーブルに保存する。ユーザーから質問が来たら、その質問もベクトル化して類似度の高い文書を取得し、ClaudeへのプロンプトにRAGコンテキストとして渡す。

テーブルの定義例を示す。

CREATE TABLE documents (
  id serial PRIMARY KEY,
  content text NOT NULL,
  embedding vector(1536)
);

3ツールを組み合わせたアーキテクチャ

フロントエンドはVercel AI SDKのuseChatフックでチャットUIを実装し、Next.jsのAPI Routeへストリーミングで接続する。APIルートではSupabaseクライアントでpgvectorを検索してRAGコンテキストを組み立て、Vercel AI SDKのstreamTextでClaudeに渡す。結果はストリームでフロントエンドへ届く。

この構成の利点は各層が疎結合なことだ。AIモデルを変えてもフロントエンドを修正しなくてよい。ベクトルDB層をSupabase以外に差し替えても、APIルートのロジックを変えるだけで済む。既存のSaaSに組み込む場合も、API Routeを追加する形で対応でき、既存コードへの影響を最小限に抑えられる。

注意点

pgvectorでIVFFlatやHNSWインデックスを使いながら他の列でフィルタリングを行うと、返却件数が指定より少なくなることがある。Supabaseの公式ドキュメントが示すiterative searchを使うと、指定件数を確実に返せる。

RAGでClaudeに渡すコンテキストが大きくなるほど、1リクエストあたりの入力トークン数が増えてコストが上がる。検索する文書の件数や文字数をチューニングして、精度とコストのバランスを取ることが必要になる。