🤖
Supabase & LINE MCP ~アプリケーション編 ~ イベントレポート
「Live Vibe Coding」第2弾――今回は Supabase と LINE MCP、そして Claude API を掛け合わせ、「筋トレメニューを提案してくれる LINE Bot」を 90 分で作り切る挑戦が行われました。 ドライバーは LINE API エキスパート歴 8 年の しげる。 さん、ナビゲーターは個人サービスを 2 本運営する たけし さん。 コードもトラブルもすべて包み隠さず配信する“生コーディング”の熱量を、当日の進行順に追い掛けます。
オープニング ― 技術スタックのおさらい
Supabase
Edge Functions で TypeScript 製 API を無償公開
GUI から関数コードとデプロイを直接操作可能
LINE MCP
Flex Message をブラウザだけで試作・デバッグ
Messaging API キー管理、チャネル設定も一元化
Cursor
Claude、Gemini など複数 LLM をワンクリック切替
コード差分をチャット上で確認・マージ
Claude API
今回は claude-3-opus を中心に利用（途中 sonnet へ切替）
「今日の筋トレ」という自然文入力から 3 日分のメニューと負荷配分を自動生成
しげる。さんは「前回（第1弾）でデータ永続化までは完成済み。今日は 生成 AI を組み込む ところから」とゴールを宣言しました。
1️⃣ Claude API を Edge Function に組み込む
Supabase Edge Function を新規作成
supabase functions new training
環境変数を GUI で登録
CLAUDE_API_KEYCLAUDE_API_URLCursor でプロンプト設計
目的（下半身／上半身／フルボディ）
目標（筋肥大／ダイエットなど）
直近履歴を渡し重複種目を回避
ハプニング①:
max_tokensが整数ではなく文字列で送信され 400 Bad Request 発生。 ハプニング②: モデルバージョンを誤指定し model not found。 いずれも Cursor でエラーログを丸ごと貼り付け、「正しいパラメータで書き直して」と指示→即復旧。
Edge Function をデプロイし、LINE から「今日の筋トレ」と送信すると、下のようなテキストが返るようになりました。
【下半身／筋肥大プラン】
1. バーベルスクワット 4×8
2. ブルガリアンスクワット 3×10
3. ルーマニアンデッドリフト 3×8
...2️⃣ 履歴テーブルを追加し「直近5件」を取り出す
マイグレーション
create table training_history (
id uuid primary key default gen_random_uuid(),
user_id text not null,
target text,
goal text,
menu jsonb,
created_at timestamp with time zone default now()
);Tips
CLI の
supabase db pushで一発適用GUI からでも SQL 実行 → ログ確認が可能
ローカル開発派は
supabase startで Docker コンテナを立てておくと高速
Edge Function で保存 & 取得
await supabase
.from('training_history')
.insert({ user_id, target, goal, menu });
const { data } = await supabase
.from('training_history')
.select('*')
.eq('user_id', user_id)
.order('created_at', { ascending: false })
.limit(5);ハプニング③: マイグレーションは成功したが
db pushがパスワード誤設定で失敗。 GUI で SQL をコピペ実行し即解決――「ローカル/リモート両刀 でデバッグできるのが Supabase の強み」と二人が口をそろえました。
3️⃣ Flex Message 化の壁と格闘
履歴を「カルーセル表示で一覧したい」という段階で時間との戦いに突入。
Cursor に 「Flex Message のサンプルを 5 件分生成して」と依頼
返ってきた JSON を貼り付けるも、LINE MCP で 400 Invalid Flex
調査の結果
altText未設定contents.bubbleなのにtype: "card"を指定
チャット修正 → デプロイ → LINE で検証…を 3 ループほど回すもタイムアップ。今回はテキスト形式での履歴返却をゴールとしました。
4️⃣ Q&A ハイライト
質問 | 回答（抜粋） |
|---|---|
Supabase Edge Functions と Cloud Functions の違いは？ | Vercel Edge と同系の Deno ランタイム 。コールドスタートが平均 10 ms 台なので LINE Bot の応答 SLA に収まりやすい 。 |
ローカル開発 vs リモート開発の使い分けは？ | CLI で Docker 起動 → ローカル DB 接続 が重い案件では推奨。小規模なら「GUI directly on prod」でサクッと。 |
Cursor で外部 API の最新仕様を保つコツは？ | ① 公式ドキュメント URL をチャットに貼って コンテキスト固定 ② Gem\nCLI など外部検索ツールをルールとして登録し既定サーチをオーバーライド。 |
Claude のモデル選択基準は？ | sonnet ＝コスパ、 opus ＝高精度。試行回数が多い開発中は sonnet 、アルゴリズム確定後に opus でチューニング。 |
Flex Message が動かないときの最短デバッグ? | LINE MCP の シミュレーター に JSON を直接貼り、エラー位置を即確認→Edge Function へフィードバック。 |
まとめ ― “実弾” で磨く生成 AI × BaaS
ライブコーディングの醍醐味は「正答より失敗例にこそ学びが宿る」と再認識させてくれる点にあります。 今回も トークン型、モデル名、Flex 定義、db push など、ドキュメントを読むだけでは気づきにくい落とし穴が次々出現。しかし、
Supabase の高速デプロイと可視化ログ
Cursor による AI 支援リファクタ
MCP のシミュレーター
を組み合わせることで、配信時間内に “生成 AI ボット + 永続ストレージ” を形にできました。
筆者あとがき──「粘りを支える道具たち」
自動生成は 万能ではなく高速道路。行き止まりにぶつかったとき、GUI と CLI の二刀流、LLM のモデル切替、ログの即時閲覧といった “手動の逃げ道” を持っているかが完成スピードを左右します。 今日のセッションは、その逃げ道を惜しげもなく披露してくれた点で価値ある 90 分でした。
次回は Flex Message のカルーセル完成と、ユーザープロフィール連携まで――と期待しつつ、画面越しに送られてくるキーボードのタイピング音をまた楽しみに待ちたいと思います。
Yardでは、AI・テック領域に特化したスポットコンサル サービスを提供しています。
興味がある方は、初回の無料スポットコンサルをお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
Read next
Loading recommendations...