🤖
【Live Vibe Coding】~ Cursor & Supabase & LINE MCP~ イベントレポート
2025 年6 月19 日、YouTube Live で配信された 「Live Vibe Coding 〜Cursor & Supabase & LINE MCP〜」。 Cursor の AI コーディング支援と LINE MCP、そして Supabase Edge Functions を組み合わせ、 “Claude に聞く筋トレ Bot” をゼロから組み上げる 60 分一本勝負のライブでした。
登壇は しげる。さん（LINE API Expert） がドライバー、 たけしさん がナビゲーター兼モデレーター。 チャットにはエンジニアの「これ動くのか!?」という熱い視線が注がれ、画面にはカーソルとターミナルが並ぶ——まさに“キーボードの音まで聞かせる”開発実況です。
1. オープニング ―― 目標は「1 時間で動く Bot」
しげる。さんが掲げたゴールはシンプルながら野心的です。
Supabase にテーブルを自動生成
LINE MCP でフレックスメッセージ UI を即席作成
Edge Functions にデプロイし、実機の LINE で動作確認
時間が余れば Claude API と接続しメニュー生成を自動化
「もし Step3 まで行けたら万々歳。Step4 は第2回で」と笑いながらも、開発の呼吸はすでにフルスロットルです。
2. Cursor が切り拓くリサーチと雛形生成
まず行ったのは 技術スタックの自動調査。 左ペインで LINE MCP と入力し AI パネル をオートサーチに切り替えると、数秒で
MCP とはモデルコンテキストプロトコル
ホスト – クライアント – サーバー構成
プッシュ／ブロードキャストの使い分け
といった概要がマークダウンで吐き出されます。
生成された LINEMCP_Overview.md は即座に private_md フォルダーへ移動。 複数人開発を見据え、生成ファイルをリポジトリに混ぜない Git ignore 戦略 もさらりと共有していた点が印象的でした。
3. LINE 公式アカウントと MCP サーバーの下ごしらえ
続いて LINE Developers コンソールへ。ここで躓きがひとつ。 ビジネス ID でログインしているとユーザー ID が表示されない という UI 変更に遭遇します。
チャットの視聴者から
「古いチャネルで開いてみては？」 「ユーザー ID はチャンネル基本設定の下部ですよ」
と即座にフィードバックが寄せられ、無事解決。 ライブならではの“集団デバッグ”が場を温めました。
取得した Channel Access Token と Channel Secret を MCP の ~/.cursor/mcp.json へ記述し、Cursor を再起動。こんにちは と打つと Bot から「こんにちは！」が届き、疎通確認はクリア です。
4. Supabase Edge Functions を一発デプロイ
本編最大の見どころはここでした。
4.1 テーブル定義の自動生成
Cursor に
Supabase の users_status と training_history テーブルを作り、
Edge Function に保存・取得処理を書いてと指示すると、SQL の CREATE TABLE と TypeScript の雛形が瞬時に出力。
4.2 MCP からのシームレスデプロイ
生成された関数フォルダーを丸ごと Supabase にプッシュする工程も、 npx supabase functions deploy line-bot --project-ref ... を AI が提案 → ターミナルへ貼り付け → 15 秒後には Production URL が発行。
「昔は CLI でしかデプロイできず、コードはブラックボックスだった。 いまはコンソール上で編集もできる。便利過ぎて震える」 というたけしさんのコメントに、多くの頷きがチャットを流れました。
5. フレックスメッセージを“会話駆動”で生成
テーブルと関数が整ったところで、メニュー UI を実装。 Cursor へ
「今日の筋トレ」と言われたら
パワーアップ / ダイエット / シェイプアップ
の 3 ボタンをフレックスで返す JSON を作成せよとプロンプトすると、わずか数行で JSON が完成。 ボタン押下時の postback.data には purpose=power_up などが入り、Edge Function 側の分岐と自然に連携します。
ボタンの色が緑だった箇所を「赤にして」と言えば即時再生成。 “コーディングというより対話”——まさに次世代の UI 体験でした。
6. 動作確認 ―― LINE に届いた筋トレ提案
ユーザー：今日の筋トレ
Bot：目的選択のフレックス
ユーザー：パワーアップ
Bot：部位選択フレックス（上半身／下半身／フルボディ）
ユーザー：上半身
Bot：プッシュアップ 3×10、ダンベルロー 3×12 …
ここまでが 1 時間内に完了。Supabase 側の training_history テーブルには、ユーザー ID と選択内容・日時がきちんと保存されていることもログで確認できました。
7. Q&A ハイライト
質問 | 回答 |
|---|---|
フレックスだけで LP のように長尺デザインは可能か | カルーセルやボタンテンプレートとの組み合わせで実現できる。LP 風の縦長画像は Bubble を分割し連結する裏技が有効 |
Edge Functions の JWT 認証をオフにしたのはなぜ？ | LINE からの Webhook は署名で検証済み。内部 API でないため簡易に無効化した |
MCP で送信数 200 通/日を超えたら？ | コンパクトプラン（無料枠）を使い切った時点でライトプランへアップグレードするか、メッセージ分割・バッチ配信で抑える設計が必要 |
8. 次回への布石 ―― Claude 連携と履歴参照へ
今回は Step 1（固定文言の Bot）まででタイムアップ。 次回は
Claude API でメニュー文面をリアルタイム生成
過去 5 件のトレーニング履歴を Flex カルーセルで表示
Supabase Row Level Security を活用したマルチユーザー化
を目標に掲げることがアナウンスされました。
総括 ―― “コードを書く”から“システムを会話で組む”時代へ
今回のライブは、単なるハンズオンを越え 「AI エージェントと協調しながらプロダクトを組み立てる」という開発スタイルそのものを可視化した場でした。
手作業だったテーブル定義とデプロイが一声で終わる
UI モックを JSON で書かず、色や文言を会話で修正する
トラブルはコミュニティの声で即座に解決
“作る”ハードルが劇的に下がる一方で、何を作るか・どこで価値を出すか の重要性が増していることも実感します。
Cursor、Supabase、LINE MCP——3 つの革新を 60 分に凝縮したこのイベントは、 「もう開発は一人で黙々と行う時代じゃない」 そんな未来の気配を確かに届けてくれました。
Yardでは、AI・テック領域に特化したスポットコンサル サービスを提供しています。
興味がある方は、初回の無料スポットコンサルをお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
Read next
Loading recommendations...