SaaSのMVP

Page content

AI活用による新規顧客獲得SaaSのMVP（Minimum Viable Product）を構築するための手順を、コマンド操作中心にまとめました。

Cloudflare環境（Astro + Clerk + Supabase + Stripe）での実装は、エッジコンピューティングの恩恵を受けられる非常に強力な構成です。

1. プロジェクトの初期化と依存関係のインストール

まずはベースとなるAstroプロジェクトを作成し、必要なSDKをインストールします。

Bash

# Astroプロジェクトの作成 (すべてデフォルト/yでOK)
npm create astro@latest my-ai-saas -- --template minimal
cd my-ai-saas

# 必要なパッケージのインストール
npm install @clerk/astro @supabase/supabase-js stripe @google/generative-ai
npm install -D wrangler # Cloudflareデプロイ用

2. Cloudflare Pages & データベースの準備

Cloudflareでのホスティング設定と、環境変数のための.envファイルを作成します。

Bash

# Cloudflare Adapterの追加
npx astro add cloudflare

# 環境変数の雛形作成
touch .env

.envファイルに以下のキーを準備してください（各管理画面から取得）：

  • CLERK_PUBLISHABLE_KEY / CLERK_SECRET_KEY

  • SUPABASE_URL / SUPABASE_ANON_KEY

  • STRIPE_SECRET_KEY

  • GEMINI_API_KEY

3. 各サービスの設定手順

Clerk (認証)

astro.config.mjs にClerkのインテグレーションを追加します。

JavaScript

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';
import clerk from '@clerk/astro';

export default defineConfig({
  output: 'server',
  adapter: cloudflare(),
  integrations: [clerk()],
});

Supabase (DB)

MVP用の顧客リスト（Leads）テーブルを作成します（SQLエディタで実行）。

SQL

CREATE TABLE leads (
  id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
  user_id TEXT NOT NULL,
  company_name TEXT,
  email TEXT,
  status TEXT DEFAULT 'new',
  ai_analysis TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW())
);

4. MVPのコア機能：AI解析ロジックの実装

src/pages/api/analyze.ts を作成し、Geminiを使用して顧客情報を解析するエンドポイントを構築します。

TypeScript

// エッセンスのみ抽出
import { GoogleGenerativeAI } from "@google/generative-ai";

export const POST: APIRoute = async ({ request }) => {
  const { prompt } = await request.json();
  const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

  const result = await model.generateContent(`新規顧客獲得のための戦略を提案して: ${prompt}`);
  const response = await result.response;
  
  return new Response(JSON.stringify({ text: response.text() }));
};

5. Stripe 決済フローの組み込み

サブスクリプション管理のために、StripeのCheckoutセッションを作成するエンドポイントを用意します。

Bash

# Stripe CLIでローカルテスト（インストール済みの場合）
stripe listen --forward-to localhost:4321/api/webhook

6. デプロイと運用

ローカルで動作確認後、Cloudflare Pagesへデプロイします。

Bash

# ビルド確認
npm run build

# Cloudflareへのデプロイ
npx wrangler pages deploy dist

MVP完成までの優先順位

  1. Auth (Clerk): ユーザーがログインできる状態を作る。

  2. Core AI (Gemini): 入力に対して「新規顧客獲得のヒント」を返す最小機能を実装。

  3. Data (Supabase): AIが生成した結果を保存し、一覧表示できるようにする。

  4. Payment (Stripe): 特定の機能（例：1日5回以上の解析）を制限し、課金へ誘導する。

この構成は、将来的に Cloudflare D1 や KV を活用してさらに低遅延なエッジネイティブ・アプリへ拡張できる拡張性を持っています。

開発中に特定のライブラリのエラーや、Cloudflare Workers特有の制限（Node.js APIの互換性など）に直面した際はいつでも聞いてください。