ai-sales

Page content

いいね、ここは“迷うと一気に止まる”ポイント。
なのでコピペでそのまま進められるCLI手順を出す👇

ゴール

👉 Astro + Clerk + Supabase + Gemini がローカルで動く状態

0. 前提

事前に入れておく👇

node -v   # v18以上
npm -v

① プロジェクト作成（Astro）

npm create astro@latest ai-sales
cd ai-sales
npm install

② 必要ライブラリ

npm install @supabase/supabase-js @google/generative-ai
npm install @clerk/astro

③ Clerkセットアップ

npx clerk@latest init

👉 途中で👇

「Framework」→ Astro
「Use Clerk components」→ Yes

環境変数が自動生成される

.env

PUBLIC_CLERK_PUBLISHABLE_KEY=pk_xxx
CLERK_SECRET_KEY=sk_xxx

④ Supabaseセットアップ

# CLIインストール
npm install -g supabase

# ログイン
supabase login

# 初期化（ローカル設定）
supabase init

プロジェクト作成（Web側）

👉 Supabase で新規プロジェクト作成

URL & KEY取得 → .env

PUBLIC_SUPABASE_URL=https://xxx.supabase.co
PUBLIC_SUPABASE_ANON_KEY=xxx

⑤ DB作成（Supabase SQL）

SupabaseのSQLエディタで👇

create table leads (
  id uuid primary key default uuid_generate_v4(),
  name text,
  company text,
  status text default 'new'
);

create table messages (
  id uuid primary key default uuid_generate_v4(),
  lead_id uuid references leads(id),
  content text,
  type text,
  created_at timestamp default now()
);

⑥ Gemini APIキー設定

👉 Google から取得

GEMINI_API_KEY=xxx

⑦ ディレクトリ作成

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

⑧ ファイル作成（CLIで一気に）

touch src/lib/supabase.ts
touch src/lib/gemini.ts

touch src/pages/index.astro
touch src/pages/dashboard.astro

touch src/pages/api/create.ts
touch src/pages/api/generate.ts
touch src/pages/api/reply.ts

⑨ 開発サーバ起動

npm run dev

👉 表示👇

http://localhost:4321

⑩ 動作確認フロー

順番に👇

/ → ログイン（Clerk）
/dashboard → 画面表示
リード追加
Generate DM
Reply生成

⑪ よくあるエラー（先に潰す）

① env読めない

👉 Astroは import.meta.env を使う

② Supabase接続エラー

👉 URL or KEYミス

③ Geminiエラー

👉 APIキー or quota

④ Clerkリダイレクト

👉 localhost設定確認

⑫ Git初期化（やっとけ）

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

⑬ デプロイ（最短）

Cloudflare or Vercel👇

npm run build

一番重要なポイント

CLIより大事👇

👉 “全部作ってから売るな”

正しい順番

CLIで動かす
5人に使う
売る
改善

まとめ

このコマンド通りやれば👇

👉 今日中に営業開始できる状態になる

必要なら次👇

「Cloudflare完全デプロイ手順（CLI）」
「LinkedIn自動化スクリプト」
「最初の100リード抽出方法」

ここまでやると“開発→売上”が繋がる。