スクールカウンセリングAI — Next.js(Vercel)版 セットアップ

フロントエンド(React)とバックエンド(API Route)を Next.js 1つにまとめ、Vercel にデプロイする構成です。 ナレッジと会話記録は DB(Supabase Postgres)にあり、クライアントに知識も API キーも入っていません。

2026年9月に単一HTML + Supabase Edge Function構成から移行しました。 DBはSupabaseのまま、 実行環境だけVercelに変わっています。

ブラウザ(page.tsx・表示のみ)
   │  fetch("/api/chat")  ※同一オリジンなのでCORS設定は不要
   ▼
Next.js Route Handler(Vercel)
   │  ・APIキーを保持して Claude を呼ぶ
   │  ・DB からナレッジを読んでプロンプトを組む
   │  ・入力フィルタ → 生成 → 出力チェック
   │  ・会話 / 見立て / 安全判定を保存
   │  ・危機判定なら人へ通知
   ▼
Postgres(Supabase。データベースとしてのみ利用)
   knowledge / sessions / messages / safety_events

---

ファイル

ファイル	役割
db/schema.sql	Supabase の SQL Editor に貼って実行(スキーマ変更のたびに再実行が必要。下記参照)
db/seed_knowledge_all.sql	同上(schema.sql の後)。本番の DB のナレッジ全件(2026年11月9日の書き出しから作った。180件)
db/seed_knowledge_safety.sql	同上(seed_knowledge_all.sql の後)。安全のナレッジ D3〜D6(書き出しの時点で本番に無かった)
db/seed_knowledge_boundaries.sql	同上(seed_knowledge_safety.sql の後)。「秘密の約束をしない」D7(同じく本番に無かった)
db/seed_knowledge_shima5.sql	嶋先生のログレビュー5回目のナレッジ SH5-1〜15(2026年11月11日)
db/knowledge.json	本番のナレッジの控え(テストが読む)。ナレッジ管理画面の「JSONで書き出す」→ node scripts/import-knowledge-export.mjs <ファイル> --write で作り直す
db/archive/	以前の seed(seed_knowledge.sql・_structured・_shima3。中身は seed_knowledge_all.sql に入っている)
src/safety.mjs	安全層(CRISIS_WORDS/OUTPUT_NG)の共通モジュール
src/app/api/chat/route.ts	バックエンド本体。Vercelにデプロイされる
src/app/page.tsx / layout.tsx / globals.css	フロントエンド(表示のみ)

---

手順

1. Supabase プロジェクトを作る(DBとして)

https://supabase.com で新規プロジェクトを作成。リージョンは Tokyo を選んでください。 Edge Function は使わないので、作るのはプロジェクトとテーブルだけです。

2. テーブルを作る

SQL Editor で db/schema.sql を実行 → 続けて db/seed_knowledge_all.sql を実行(ナレッジ全件) → 続けて db/seed_knowledge_safety.sql(D3〜D6)・db/seed_knowledge_boundaries.sql(D7)・db/seed_knowledge_shima5.sql(SH5-1〜15)を実行。 どれも同じ id があれば上書きするか何もしないので、2回流しても同じになる(2026年11月9日に一時的な Postgres で確かめた)。

既にSupabaseプロジェクトを作成済みの場合も、db/schema.sql は毎回必ず再実行してください。 このファイルは create table if not exists / add column if not exists / (ビューは drop view if exists + create view)だけで書かれているため、既存のテーブルやデータには 影響しません。逆に言うと、コード側だけ更新してSupabase側で db/schema.sql を再実行し忘れると、 アプリが前提にしている列やビューがまだ無い状態になり、 column "mode" of relation "knowledge" does not exist や column session_overview.phase does not exist のような「column ... does not exist」エラーに なります。この種のエラーを見たら、原因を個別に調べる前に、まず最新の db/schema.sql の 全文をSupabaseのSQL Editorに貼って再実行してください。 それで直らない場合だけ、 他の原因を疑ってください。

確認:

select src, count(*) from knowledge group by src order by 2 desc;

理 54 / 石 42 / 嶋 40 / 嶋石 5 / 設 7 / 技 26 の計 174 件になっていれば成功です。

手元で npm run check:knowledge を打っても確かめられます(.env.local の SUPABASE_URL / SUPABASE_SERVICE_ROLE_KEY を使う。DB は読むだけで、Gemini も呼ばない)。seed にある行が DB に 欠けていれば、どのファイルを実行し直せばよいかを表示します。seed を実行し直すと、そのファイルにある行は seed の内容で上書きされる(DB で本文を直した行があれば元に戻る)ので注意してください。

3. Vercelにデプロイする

GitHubにpushしたこのリポジトリを、Vercelのダッシュボードから「Add New... → Project」で Importしてください。Next.jsプロジェクトなので自動検出され、ビルド設定は変更不要です。

CLIを使う場合:

npm install -g vercel
vercel login
vercel link
vercel deploy --prod

main 以外のブランチ(作業ブランチ)を確認したいとき

Vercelダッシュボードでこのリポジトリを接続していれば、main(Production Branch)以外の ブランチにpushしても、Vercel側で自動的に「Preview Deployment」が作られます。 public/admin.html はビルド成果物に含まれる静的ファイルの一つなので、admin.htmlだけを個別にデプロイする手順は 存在しません。アプリ全体のデプロイ(本番・プレビューのどちらでも)に自動で含まれます。

作業ブランチ用のURLは、次のいずれかで見つかります。

• Vercelダッシュボード → 対象プロジェクト → Deployments タブ → ブランチ名で絞り込み、 最新のデプロイの「Visit」を開く
• GitHubのコミット一覧・PRに、Vercel Bot(GitHub連携が有効な場合)が 「✅ Preview: https://...」のようなステータス・コメントを自動で付ける
• Git Branch URL(ブランチが変わってもURLが固定される。コミットのたびに変わる個別URLより こちらが便利): https://<プロジェクト名>-git-<ブランチ名を小文字化し/と_を-に置換したもの>-<Vercelのチーム/個人アカウント名>.vercel.app 例: ブランチ claude/doc-review-n5v5eq → ...-git-claude-doc-review-n5v5eq-....vercel.app (正確な値はDeploymentsの詳細画面に表示されるものを使ってください)

admin.htmlは、そのプレビューURLに /admin.html?token=(ADMIN_TOKENの値) を付けてアクセスします (本番URLと同じ要領)。

プレビューデプロイでAPIが動かない場合、まず環境変数の適用範囲を疑ってください。 Vercelの 環境変数はProduction/Preview/Developmentを別々に有効・無効にできるため、下記4.の変数を 「Production」にしか適用していないと、作業ブランチのプレビューでは GEMINI_API_KEY 等が 読めずAPIが失敗します(admin.html自体は開けても、会話やログ取得のAPI呼び出しがすべて 失敗する、という形で症状が出ます)。各変数の追加時に、対象環境として Production・Preview の両方(できればDevelopmentも)にチェックを入れてください。

4. 環境変数を設定する

Vercelダッシュボード → Project → Settings → Environment Variables

名前	必須	内容
GEMINI_API_KEY	○	Google AI Studio で発行したキー(AIza...)
SUPABASE_URL	○	Supabaseダッシュボード → Project Settings → API に表示されるURL
SUPABASE_SERVICE_ROLE_KEY	○	同上。service_role の方(anon keyではない)
CRISIS_WEBHOOK_URL		Slack や Discord の Incoming Webhook
RATE_LIMIT_PER_HOUR		既定 60。超えた発言(と2000字を超えた発言)でも、本人のはっきりした危機のサインがあれば固定応答と通知を出す(CLAUDE.md 5.2)
ADMIN_TOKEN		管理画面(/admin.html)の合言葉。未設定だと管理画面は常に401になり閲覧できない。長く推測不能な値にすること(例: openssl rand -hex 16 等で生成)。"admin"のような推測されやすい値は、生徒の危機対応記録・相談内容が漏れる直接の原因になる
TEST_GEMINI_API_KEY		npm run test:crisis(docs/backlog.md 1-3)専用のGeminiキー。Vercelには設定しない (本番のGEMINI_API_KEYと分離するため。CLAUDE.md 5.10)

使用するGeminiモデルは環境変数ではなく、src/app/api/chat/route.ts の PRIMARY_MODELS/LITE_MODELS にコードで書かれています(下記参照)。

これらの値を絶対に NEXT_PUBLIC_ で始まる名前にしないでください。付けた瞬間ブラウザに埋め込まれ、 誰でも見られる状態になります(GEMINI_API_KEY と SUPABASE_SERVICE_ROLE_KEY は特に注意)。

生成モデルは2026年9月に Anthropic Claude から Google Gemini に切り替えました。プロンプトの内容や 出力JSONスキーマ、安全層(OUTPUT_NG/CRISIS_WORDS)は変更していませんが、モデルが変わると 応答の質やトーンが変わることがあります。切り替え後は必ず実際に会話して、同調していないか・ まどろっこしくないかなどを確認してください。

Geminiの無料枠のレート制限に注意

Google AI Studioで発行したキーをそのまま使う場合、無料枠は1分あたりの回数がとても少なく (2026年9月時点の gemini-2.5-flash で10 RPM = 1分に10回。モデルごとの値は AI Studio のレート制限画面で確認)、1ターンの会話で安全判定+本生成の最低2回はGemini APIを呼ぶため、実証実験で複数人が 同時に使うと簡単に上限に達し、「うまく応答できませんでした」が頻発します。

Google Cloud のプロジェクトに請求先アカウントを紐付けてください。 申請不要で自動的にTier 1 (2026年9月時点の gemini-2.5-flash では1,000 RPM)に上がります。実証実験を始める前に必ず設定してください。

レート制限による失敗と、Geminiの安全フィルタによる失敗は、messages.flags に 生成失敗→固定応答で継続(レート制限(429)) / (安全フィルタ等で応答が空) として区別して記録されるので、 発生時はそちらで原因を確認できます。「不明なエラー」の場合は下記の思考トークンの問題を疑ってください。

This is the beginning of the README. Read the rest at the original. Read the full README ↗