ai-sales-mvp

結論から言うと、OpenAI → Geminiへの置き換えは「SDK差し替え＋API呼び出し変更」だけです。
構造はそのまま使えます（Astro / Clerk / Supabaseはそのまま）。

🧩 変更ポイント（最小）

やることは3つだけ👇

パッケージ変更
APIキー追加
ai.tsを書き換え

📦 ① Geminiパッケージ追加

npm install @google/generative-ai

🔑 ② 環境変数追加

.env に追加👇

GEMINI_API_KEY=xxx

👉 APIキーは
Google AI Studio で取得

🧠 ③ AIコード差し替え（これが本体）

src/lib/ai.ts を丸ごと置き換え👇

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(
  import.meta.env.GEMINI_API_KEY
);

export async function generateMessage(lead: any) {
  const model = genAI.getGenerativeModel({
    model: "gemini-1.5-flash",
  });

  const prompt = `
あなたは優秀な営業です。
以下の情報から短い営業メールを書いてください。

会社名: ${lead.company}
担当者: ${lead.name}
課題: ${lead.problem}
`;

  const result = await model.generateContent(prompt);
  const response = await result.response;

  return response.text();
}

⚠️ ④ 既存コードはそのままでOK

これらは変更不要👇

/api/generate.ts
フロント（LeadForm）
Supabase
Clerk

👉 AI部分だけ差し替えで動く

🧪 ⑤ 動作確認

npm run dev

or APIテスト👇

curl -X POST http://localhost:4321/api/generate \
  -H "Content-Type: application/json" \
  -d '{"company":"テスト株式会社","name":"田中","problem":"営業効率が低い"}'

⚡ モデル選び（重要）

用途別👇

gemini-1.5-flash
→ 速い・安い（MVP最適）
gemini-1.5-pro
→ 精度高い（本番向け）

💡 OpenAIとの違い（実務）

正直ベース👇

Gemini：安い・速い
OpenAI：安定・品質やや上

👉 MVPならGeminiで十分

🔥 よくあるハマり

APIキー未設定
.env変更後に再起動してない
モデル名ミス

🚀 これでできること

AI営業文生成（Gemini）
Supabase保存
Clerkログイン

👉 完全に“無料寄り構成”に寄せられる

次やるなら👇

AIの精度を上げるプロンプト設計（CV出るレベル）
返信自動化（Gmail連携）
AIごとに切り替えるマルチモデル設計

必要なら全部出します。

🧑‍💻 ① プロジェクト作成

# フォルダ作成
mkdir ai-sales-mvp
cd ai-sales-mvp

# Astroプロジェクト作成
npm create astro@latest .

# 質問は全部デフォルトでOK
# → minimal / typescript yes / install yes

📦 ② 必要パッケージインストール

npm install @supabase/supabase-js openai react react-dom

⚛️ ③ React有効化（Astro用）

npx astro add react

📁 ④ フォルダ作成

mkdir -p src/lib
mkdir -p src/components
mkdir -p src/pages/api

📄 ⑤ ファイル作成（空ファイル）

touch src/lib/supabase.ts
touch src/lib/ai.ts
touch src/pages/api/generate.ts
touch src/components/LeadForm.tsx

🔑 ⑥ 環境変数

touch .env

中身（エディタで記入）👇

PUBLIC_SUPABASE_URL=xxx
PUBLIC_SUPABASE_ANON_KEY=xxx
OPENAI_API_KEY=xxx

🧠 ⑦ 開発サーバー起動

npm run dev

👉 ブラウザで

http://localhost:4321

🧪 ⑧ APIテスト（任意）

curl -X POST http://localhost:4321/api/generate \
  -H "Content-Type: application/json" \
  -d '{"company":"テスト株式会社","name":"田中","problem":"営業効率が低い"}'

👉 AIの返答がJSONで返ってくれば成功

🚀 ⑨ Git管理（推奨）

git init
git add .
git commit -m "initial MVP"

☁️ ⑩ デプロイ（Cloudflare）

# Wranglerインストール
npm install -g wrangler

# ログイン
wrangler login

# デプロイ
wrangler pages deploy dist

※ 事前に build

npm run build

⚠️ よくある詰まりポイント

ここだけ注意👇

.envが読み込まれない
→ 再起動（npm run dev）
APIエラー
→ OpenAIキー確認
Reactが動かない
→ astro add reactやり忘れ

✅ 最短ゴール

ここまでで👇

ローカルで動く
入力 → AI生成 → 表示

👉 これができればMVP完成

ここから先は「作る」より「売る」が重要です。

もし次いくなら👇

ClerkログインをCLI込みで完全構築
Stripe課金（Webhook含む）コマンド一式
Supabase RLSまで含めた本番構成

全部コマンドレベルで出せます。

いいですね。実際にそのままMVPとして動く最小構成を出します。
（Astro + Clerk + Supabase + AI の“最短ルート”）

🧩 全体構成

/project
├─ src/
│  ├─ pages/
│  │  ├─ index.astro        ← ダッシュボード
│  │  ├─ login.astro
│  │  └─ api/
│  │     └─ generate.ts     ← AI生成API
│  ├─ lib/
│  │  ├─ supabase.ts
│  │  └─ ai.ts
│  └─ components/
│     └─ LeadForm.tsx
├─ .env
├─ package.json

① package.json

{
  "name": "ai-sales-mvp",
  "type": "module",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  },
  "dependencies": {
    "astro": "^4.0.0",
    "@supabase/supabase-js": "^2.0.0",
    "openai": "^4.0.0"
  }
}

② 環境変数（.env）

PUBLIC_SUPABASE_URL=xxx
PUBLIC_SUPABASE_ANON_KEY=xxx
OPENAI_API_KEY=xxx

③ Supabase接続

src/lib/supabase.ts

import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  import.meta.env.PUBLIC_SUPABASE_URL,
  import.meta.env.PUBLIC_SUPABASE_ANON_KEY
)

④ AI処理

src/lib/ai.ts

import OpenAI from "openai";

const client = new OpenAI({
  apiKey: import.meta.env.OPENAI_API_KEY,
});

export async function generateMessage(lead: any) {
  const prompt = `
あなたは優秀な営業です。
以下の情報から短い営業メールを書いてください。

会社名: ${lead.company}
担当者: ${lead.name}
課題: ${lead.problem}
`;

  const res = await client.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [{ role: "user", content: prompt }],
  });

  return res.choices[0].message.content;
}

⑤ API（AI呼び出し）

src/pages/api/generate.ts

import type { APIRoute } from 'astro';
import { generateMessage } from '../../lib/ai';

export const POST: APIRoute = async ({ request }) => {
  const body = await request.json();
  const message = await generateMessage(body);

  return new Response(JSON.stringify({ message }), {
    status: 200,
  });
};

⑥ フロント（メイン画面）

src/pages/index.astro

---
import LeadForm from "../components/LeadForm";
---

<html>
  <body>
    <h1>AI営業ツール</h1>
    <LeadForm client:load />
  </body>
</html>

⑦ フォーム（React）

src/components/LeadForm.tsx

import { useState } from "react";

export default function LeadForm() {
  const [form, setForm] = useState({
    company: "",
    name: "",
    problem: ""
  });
  const [result, setResult] = useState("");

  const handleSubmit = async () => {
    const res = await fetch("/api/generate", {
      method: "POST",
      body: JSON.stringify(form),
    });

    const data = await res.json();
    setResult(data.message);
  };

  return (
    <div>
      <input placeholder="会社名"
        onChange={e => setForm({...form, company: e.target.value})} />

      <input placeholder="担当者"
        onChange={e => setForm({...form, name: e.target.value})} />

      <input placeholder="課題"
        onChange={e => setForm({...form, problem: e.target.value})} />

      <button onClick={handleSubmit}>生成</button>

      <pre>{result}</pre>
    </div>
  );
}

⑧ Supabaseテーブル（最低限）

create table leads (
  id uuid primary key default uuid_generate_v4(),
  company text,
  name text,
  problem text,
  created_at timestamp default now()
);

🚀 これでできること

この状態で👇

入力フォーム
AI営業文生成
表示

👉 “価値検証できるMVP”としては十分

⚡ 次に足すべき（優先順）

DB保存（insert）
コピー or メール送信
認証（Clerk）
Stripe課金

🔥 正直なアドバイス

このコードで重要なのは「完成度」じゃないです。

👉 今すぐ3人に使わせること

LinkedInで送る
知り合いに投げる
自分で営業に使う