Windsurf×Supabaseで議事録アプリを高速構築する
WindsurfのCascade AIとSupabaseを使って議事録管理Webアプリを構築する実践手順を、AI補助コーディングのコツとあわせて解説します。
はじめに
会議が終わるたびに「あの議事録、どこに保存したっけ？」と探し回った経験はないでしょうか。 Google ドキュメントや社内 Wiki に書いたはずが、ファイルが増えすぎて検索しにくくなっているケースは多いです。 また、担当者によって書き方がバラバラで、後から読み返しても「誰が何を決めたのか」が追えないという問題もあります。 こういった課題を解決するために、議事録専用の管理アプリを自作するのは有効な手段です。 本記事では、AI コーディング IDE の Windsurf と オープンソースの BaaS Supabase を組み合わせて、シンプルな議事録管理 Web アプリを数時間で構築する手順を解説します。 コードの大半は Windsurf の AI エージェント「Cascade」に生成させるため、フロントエンド経験が浅い方でも取り組みやすい内容です。
使用するツールと全体構成
今回使用するツールを簡単に紹介します。
Windsurf は Codeium 社が開発する AI ファーストな IDE で、プロジェクト全体のコードを把握した上でエージェントが実装を進める「Cascade」機能が特徴です。 単なるコード補完にとどまらず、複数ファイルにまたがる変更やリファクタリングを自然言語の指示だけで実行できます。
Supabase は PostgreSQL をベースにしたオープンソースの Backend-as-a-Service です。 認証・データベース・ストレージ・リアルタイム API を管理ダッシュボードとシンプルな SDK で利用できます。 無料枠が充実しており、個人プロジェクトや社内ツールの用途であれば費用をほぼかけずに運用できます。
アプリの全体構成は以下のとおりです。
ブラウザ（Next.js App Router）
↓ HTTPS
Vercel（フロントエンドホスティング）
↓ HTTPS REST API / Realtime WebSocket
Supabase（データベース・認証）
├── meetings テーブル（議事録データ）
└── Supabase Auth（メール認証）
STEP 1 — Supabase プロジェクトのセットアップ
Supabase の管理画面（app.supabase.com）にアクセスし、新規プロジェクトを作成します。 プロジェクト名は英数字のみを使う方が後の設定で混乱しにくいです。 リージョンは Northeast Asia (Tokyo) を選択すると、日本からのレイテンシを最小化できます。
プロジェクトが起動したら SQL Editor を開き、次の SQL を実行してテーブルと Row Level Security ポリシーを作成します。
-- 議事録テーブルの作成
CREATE TABLE meetings (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
created_at timestamptz NOT NULL DEFAULT now(),
updated_at timestamptz NOT NULL DEFAULT now(),
title text NOT NULL,
date date NOT NULL,
content text NOT NULL DEFAULT '',
attendees text[] NOT NULL DEFAULT '{}',
user_id uuid NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE
);
-- 更新日時を自動更新するトリガー
CREATE OR REPLACE FUNCTION update_updated_at()
RETURNS TRIGGER LANGUAGE plpgsql AS $$
BEGIN
NEW.updated_at = now();
RETURN NEW;
END;
$$;
CREATE TRIGGER meetings_updated_at
BEFORE UPDATE ON meetings
FOR EACH ROW EXECUTE FUNCTION update_updated_at();
-- Row Level Security の有効化と各操作のポリシー
ALTER TABLE meetings ENABLE ROW LEVEL SECURITY;
CREATE POLICY "select own meetings"
ON meetings FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "insert own meetings"
ON meetings FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "update own meetings"
ON meetings FOR UPDATE USING (auth.uid() = user_id);
CREATE POLICY "delete own meetings"
ON meetings FOR DELETE USING (auth.uid() = user_id);
RLS を有効にすることで、ログイン中のユーザーは自分が作成した議事録しか参照・変更できません。 万が一 API キーが漏洩しても、RLS がデータを守る最後の防線として機能します。 SQL 実行後は Settings → API から Project URL と anon public key を控えておきます。
STEP 2 — Windsurf で Next.js プロジェクトを初期化する
ターミナルで次のコマンドを実行してプロジェクトを作成し、Supabase の SDK をインストールします。
npx create-next-app@latest meeting-notes \
--typescript --tailwind --eslint --app --src-dir=false \
--import-alias "@/*"
cd meeting-notes
npm install @supabase/supabase-js @supabase/ssr
プロジェクトルートに .env.local を作成し、先ほど控えた値を入力します。
NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJ...
.env.local が .gitignore に含まれていることを必ず確認してください。
create-next-app のデフォルト設定では含まれていますが、念のため確認する習慣をつけると安心です。
Windsurf でプロジェクトフォルダを開いたら、次のステップに進みます。
STEP 3 — Cascade に Supabase クライアントの実装を依頼する
Windsurf の Cascade パネル（Ctrl+L で開く）に次の指示を入力します。
lib/supabase.ts と lib/supabase-server.ts を作成してください。
- lib/supabase.ts はブラウザ用クライアントを export default する
- lib/supabase-server.ts は App Router の Server Component / Route Handler 用クライアントを export する
- @supabase/ssr の createBrowserClient と createServerClient を使うこと
- 環境変数は NEXT_PUBLIC_SUPABASE_URL と NEXT_PUBLIC_SUPABASE_ANON_KEY を参照すること
- middleware.ts も作成し、すべてのリクエストで Supabase のセッションをリフレッシュすること
TypeScript の型エラーが出ないように実装してください。
Cascade はプロジェクト全体のファイル構成を把握した上でコードを生成するため、パスのミスやインポートエラーが起きにくいです。 生成後に型エラーが残っている場合は、エラーメッセージをそのまま Cascade に貼り付けると自動で修正してくれます。
STEP 4 — CRUD 画面を Cascade に生成させる
ログイン済みユーザーが議事録を一覧・作成・編集・削除できる 3 つのページを、次の指示で一度に生成します。
以下の 3 つのページを TypeScript で実装してください。
1. app/page.tsx — 議事録一覧（date 降順）
- タイトル・日付・出席者数を表示するカードリスト
- 「新規作成」ボタンで /meetings/new へ遷移
2. app/meetings/new/page.tsx — 新規作成フォーム
- フィールド: title / date / content（textarea）/ attendees（カンマ区切り入力）
- 保存後は / へリダイレクト
3. app/meetings/[id]/page.tsx — 詳細・編集・削除
- 表示モードと編集モードをトグルで切り替え
- 削除は window.confirm で確認してから実行
データ操作は lib/supabase.ts のクライアントを使い、フォーム送信は Server Actions で実装してください。
スタイルは Tailwind CSS のみ使用し、外部 UI ライブラリは使わないでください。
3 ファイルをまとめて指示することで、Cascade がルーティングや import の依存関係を一貫して把握した状態でコードを生成できます。
生成後に npm run dev で http://localhost:3000 を開き、UI の動作を確認します。
STEP 5 — 認証機能を追加する
Supabase Auth のメール認証を使って、サインアップ・サインイン・ログアウト機能を追加します。 Cascade に次のように指示します。
Supabase Auth を使ったメール認証を実装してください。
- app/auth/sign-in/page.tsx — サインインフォーム（メール・パスワード）
- app/auth/sign-up/page.tsx — サインアップフォーム（メール・パスワード）
- app/auth/callback/route.ts — OAuth コールバック処理の Route Handler
- layout.tsx のヘッダーに、ログイン中のメールアドレスとログアウトボタンを追加
- 未ログインのユーザーを /auth/sign-in にリダイレクトするよう middleware.ts を更新
実装後は Supabase 管理画面の Authentication → URL Configuration を開きます。
Site URL に http://localhost:3000 を、Redirect URLs に http://localhost:3000/auth/callback を追加します。
本番環境へのデプロイ後はこれらの値を Vercel の URL に更新することを忘れないようにしてください。
STEP 6 — 動作確認とデプロイ
npm run dev でローカルサーバーを起動し、次の項目を順番に確認します。
- サインアップするとメールが届き、確認リンクをクリックするとログイン状態になること
- 議事録の作成・一覧表示・編集・削除がすべて正常に動作すること
- 別アカウントでログインしても他ユーザーのデータが見えないこと（RLS の検証）
- DevTools のネットワークタブで Supabase への API リクエストが 200 を返していること
動作確認が完了したら GitHub にプッシュし、Vercel でプロジェクトを新規作成してデプロイします。
Vercel の Environment Variables に .env.local と同じキーと値を入力します。
Supabase の Redirect URLs に Vercel の本番 URL を追加すれば公開完了です。
Cascade への指示を効果的にするコツ
Cascade を使っていると、指示が曖昧なときに的外れなコードが生成されることがあります。 次の 3 点を意識すると、修正の往復が大幅に減ります。
制約を最初に明示する とブレが減ります。
「@supabase/ssr を使う」「Server Actions で実装する」「外部 UI ライブラリは使わない」といった制約を冒頭に書くと、Cascade が正しい選択肢を選びやすくなります。
曖昧な指示は Cascade が「よくある実装」を選んでしまい、後から変更が必要になるケースが増えます。
ファイル構成と責務をセットで伝える と依存関係のエラーが減ります。 「このファイルはこれを export する」「このページはこのライブラリを使う」という構造を明示することで、Cascade が一貫したコードを生成できます。 複数ファイルにまたがる実装は、一度の指示でまとめて依頼する方が個別に依頼するより整合性が取れます。
.windsurfrules でルールを固定する と毎回の指示が不要になります。
プロジェクトルートに .windsurfrules ファイルを置くと、すべての Cascade 会話でルールが自動適用されます。
「Tailwind CSS のみ使用」「型アサーションより型ガードを優先」など、プロジェクト固有のルールを記載しておくと便利です。
まとめ
Windsurf の Cascade に自然言語で指示するだけで、Supabase のスキーマ設計から Next.js の認証・CRUD 機能まで、議事録管理アプリの骨格を数時間で作り上げることができます。 手動でコードを書く量が減る分、「どんなデータ構造にするか」「RLS でどのようにアクセス制御するか」といった設計の判断に集中できます。 今後の拡張として、議事録の全文検索（Supabase の pg_trgm 拡張）や Slack への自動通知（n8n との連携）も検討してみてください。