GroqとVercelで即答AIチャットサイトを公開し、人格とSkillsを持たせる。

GroqのAPIを使えるようにして、返ってくる速さを測ります。私はパソコンが得意ではありません。
【1】→【2】→【3】→【4】の順で。

【1】まず💳お金の話を先に。次を公式で調べて、3行だけで教えて。私が「OK」と言うまで登録の案内はしないで。
・無料で始められるか。無料のままだと何が制限されるか
・支払いが要る場合、前払いのチャージ式か、使った分の後払いか
・カード登録なしでキーが取れるか
調べたら「今日の課題でかかる目安（ほぼ0円のはず）」も1行で添えて。

【2】（私がOKと言ったら）キーの取り方を1手ずつ案内して。
正しい入口はここ：https://console.groq.com/keys （Groqのコンソール）
🔴 大事なこと3つを先に言って：
・キーの全文が画面に出るのは発行した時の1回だけ。閉じたら二度と見られないので、その場で安全な所に控える
・キーの値は、このチャットにも、コードにも、スクショにも絶対に出さない
・私が貼るスクショは、キーの部分を隠してから貼る
【報告待ちゲート】キーを作るのは私です。私が全画面スクショを貼るまで、絶対に次へ進まないで。

【3】（【2】が終わったら）手元で速さを測る。
・キーは手元の .env に GROQ_API_KEY として置く（.env はGitHubに上げない設定にして）
・GroqはOpenAI互換なので、送り先は https://api.groq.com/openai/v1/chat/completions
・使うモデルIDは、あなたが https://console.groq.com/docs/models で今使えるものを確認してから決めて（古いモデル名を決め打ちしない）
・同じ質問（例：「AIエージェントとは何か、初心者向けに3行で」）を
  ①Groq ②いま私が使っているClaude、の両方に投げて、
  「最初の文字が返るまでの秒数」と「全部返るまでの秒数」を測って、表で見せて
・体感でなく数字で出して。速い理由も1行だけ

【4】※必ず：.env にキーが入っているかを、キー名と有無（あり／なし）だけで報告して。値は絶対に表示しないで。

クラウド環境のAPIキー（私がClaude Codeクラウドでやっている場合だけ・毎回守って）：
・クラウドには手元の .env が無い。キーの置き場は、claude.ai/code の入力欄の上にある雲マーク（環境セレクタ。見つからない時は右上の︙→「クラウド環境を編集」）→ 環境の設定 → 環境変数の欄（.env と同じ KEY名=値 の形・入れるのは私）。反映は新しいセッションからなので、入れたら「新しいセッションで続きをやる」と案内して
・🔴 環境変数の欄は、その環境を使う人全員に見える＝Teamなど共有の環境には絶対に入れないよう毎回注意して（入れてよいのは自分の個人環境だけ）
・APIが繋がらない・タイムアウトになったら、ネットワークアクセスの設定を疑って（既定のTrustedは許可リスト外の通信を通さない）。今日使うAPIの接続先ドメインを調べて、雲マーク → ネットワークアクセス → カスタム にそのドメインを足す手順を私に案内して（Fullは無制限＝最後の手段）
・私がデスクトップでやっている場合は、この項は関係ない＝従来どおり .env でOK

新しいセッションで効き目を確かめる時のルール（毎回守って）：
・移る前にあなたが確認：いまの作業場所がワークツリー（本体フォルダのコピー）なら、先に変更をコミットして本体のフォルダへ合流（マージ）して。やらないと新しいセッションに変更が届かない。git status で未コミット0件になったのを確認してから案内して
・「新しいセッションをどのフォルダで開くか」と「そこで私が最初に送る文」を、コピーできる形で1行ずつ出して

《共通ルール》
④【4】まで終わったら（最後の確認に私が「OK」と答えてから）、締めはこの形をそのまま出して（1文にまとめない）：
╭━━━━━━━━━━━━━╮
✅ このステップは完了！
╰━━━━━━━━━━━━━╯
＼＼　次にやること　／／
━━━━━━━━━━━━━━━━━
1️⃣ 課題ページで「✅ このステップのGroqのキー取得と速さ測定が終わった！」を押す

2️⃣ ステップ2（チャットサイトを公開する）のコピペを、このチャットに貼る
━━━━━━━━━━━━━━━━━

さっきのGroqを使う「チャットサイト」を作って、インターネットに公開します。
【1】→【2】→【3】→【4】の順で。

【1】あなたが作るファイルは2つだけ。中身はあなたが書いて：
・見た目のページ（1枚）＝入力欄と送信ボタンと会話の表示。白背景・文字大きめ・スマホでも読める
・サーバー側のしくみ（Vercelのサーバーレス関数）＝Groqに問い合わせて答えを返す。キーは環境変数 GROQ_API_KEY から読む
🔴 大事：キーの値をコードに直接書かない。ページ側（ブラウザで見えるところ）にも絶対に置かない
🔴 大事：キーがまだ無い時はエラーで落とさず、画面に「APIキー未設定です（準備中）」と出す作りにして
（実装のやり方とモデルIDは、あなたがVercelとGroqの公式を確認して決めて。私は書けません）

【2】（【1】が終わったら）GitHubに上げる。
・リポジトリはPrivate（非公開）で作る
・.env と、キーが入り得るファイルは絶対に上げない（.gitignore を先に用意して）
・上げ終わったら「何をpushしたか」をファイル名だけで一覧にして見せて

【3】（【2】が終わったら）ここから先は私の画面操作です。1手ずつ案内して：
・https://vercel.com/signup で Continue with GitHub （個人利用は無料のHobbyでOK）
・https://vercel.com/new でさっきのリポジトリを Import
・設定は変えずに Deploy
・本番URLを開く
コマンドでのデプロイは案内しないで（画面だけで完結させて）。
【報告待ちゲート】私が本番URLの全画面スクショを貼るまで、絶対に次へ進まないで。

【4】※必ず：スクショが届いたら次の2つを1行ずつ教えて。
・いまは「APIキー未設定です（準備中）」と出るのが正解であること
・これ以降は、GitHubにpushするだけで本番が入れ替わること（mainブランチ＝本番）

クラウド環境のAPIキー（私がClaude Codeクラウドでやっている場合だけ・毎回守って）：
・クラウドには手元の .env が無い。キーの置き場は、claude.ai/code の入力欄の上にある雲マーク（環境セレクタ。見つからない時は右上の︙→「クラウド環境を編集」）→ 環境の設定 → 環境変数の欄（.env と同じ KEY名=値 の形・入れるのは私）。反映は新しいセッションからなので、入れたら「新しいセッションで続きをやる」と案内して
・🔴 環境変数の欄は、その環境を使う人全員に見える＝Teamなど共有の環境には絶対に入れないよう毎回注意して（入れてよいのは自分の個人環境だけ）
・APIが繋がらない・タイムアウトになったら、ネットワークアクセスの設定を疑って（既定のTrustedは許可リスト外の通信を通さない）。今日使うAPIの接続先ドメインを調べて、雲マーク → ネットワークアクセス → カスタム にそのドメインを足す手順を私に案内して（Fullは無制限＝最後の手段）
・私がデスクトップでやっている場合は、この項は関係ない＝従来どおり .env でOK

新しいセッションで効き目を確かめる時のルール（毎回守って）：
・移る前にあなたが確認：いまの作業場所がワークツリー（本体フォルダのコピー）なら、先に変更をコミットして本体のフォルダへ合流（マージ）して。やらないと新しいセッションに変更が届かない。git status で未コミット0件になったのを確認してから案内して
・「新しいセッションをどのフォルダで開くか」と「そこで私が最初に送る文」を、コピーできる形で1行ずつ出して

《共通ルール》
④【4】まで終わったら（最後の確認に私が「OK」と答えてから）、締めはこの形をそのまま出して（1文にまとめない）：
╭━━━━━━━━━━━━━╮
✅ このステップは完了！
╰━━━━━━━━━━━━━╯
＼＼　次にやること　／／
━━━━━━━━━━━━━━━━━
1️⃣ 課題ページで「✅ このステップのサイト公開が終わった！」を押す

2️⃣ ステップ3（キーを入れて人格を決める）のコピペを、このチャットに貼る
━━━━━━━━━━━━━━━━━

本番にキーを入れて喋らせて、そのあと「人格」を決めます。
【1】→【2】→【3】→【4】の順で。

【1】キーを入れるのは私の画面操作です。1手ずつ案内して：
・Vercelのプロジェクト → Settings → Environment Variables
・Name に GROQ_API_KEY 、Value にステップ1で控えたキーを貼って Save
・Deployments → 最新のものを Redeploy（環境変数はRedeployしないと反映されない）
🔴 キーの値は、このチャットに絶対に貼らせないで。あなたはキーの値に触らない。
【報告待ちゲート】私が本番URLで話しかけた結果の全画面スクショを貼るまで、次へ進まないで。

【2】（【1】が終わったら）人格を決める。私に聞いて：
・A：やさしい先生（かみくだいて、たとえ話を必ず入れる）
・B：短く言い切る相棒（結論から。前置きなし。1〜2行）
・C：しつこく聞き返す壁打ち役（答える前に必ず1つ質問する）
・D：お任せ（AIが最適な案を選ぶ）
・E：自由入力もOK（E：の後ろに希望をそのまま書いてください）
選んだら、その人格の指示文（口調・答えの長さ・やらないこと・困った時の返し方）をあなたが書いて、
サーバー側のコードに固定して。ページ側（ブラウザで見えるところ）には置かないで。
理由も1行：ページ側に置くと、使う人に書き換えられてしまうから。

【3】（【2】が終わったら）pushして本番に反映して、同じ質問を人格ありとなしで1回ずつ投げて、
返答の違いを並べて見せて。私はそれを見て「もっとこうして」と言うので、直してまたpushして。

【4】※必ず：使ってみて危ないと感じた所を、あなたから2つ挙げて（例：延々と長い返事になる・断らずに何でも答えてしまう）。
それぞれに1行の対策を書いて、人格の指示文に足して、pushして。

《共通ルール》
④【4】まで終わったら（最後の確認に私が「OK」と答えてから）、締めはこの形をそのまま出して（1文にまとめない）：
╭━━━━━━━━━━━━━╮
✅ このステップは完了！
╰━━━━━━━━━━━━━╯
＼＼　次にやること　／／
━━━━━━━━━━━━━━━━━
1️⃣ 課題ページで「✅ このステップのキー投入と人格づけが終わった！」を押す

2️⃣ ステップ4（Skillsを持たせてエージェントにする）のコピペを、このチャットに貼る
━━━━━━━━━━━━━━━━━

仕上げです。このチャットに「Skills」を持たせて、AIが自分でどれを使うか選ぶようにします。
【1】→【2】→【3】→【4】→【5】の順で。

【1】まず、Skillsの形をあなたが作って。リポジトリに skills/ というフォルダを作り、1Skills＝1ファイル。
1ファイルの中身は3つだけ：
・名前（一覧に出る短い名前）
・どんな時に使うか（1〜2行。ここがAIの判断材料になる）
・使うと決まった時にAIが従う手順（箇条書き）
なぜ「どんな時に使うか」が要るのかを1行で説明して（AIはこの文だけを見て、使うかどうかを決めるから）。

【2】（【1】が終わったら）中身を決める。私に聞いて：
・A：問い合わせ返信の下書きを作るSkills ＋ 見積の考え方を整理するSkills
・B：SNS投稿の案を出すSkills ＋ 投稿を短くまとめ直すSkills
・C：自分の仕事の手順を説明するSkills ＋ よくある質問に答えるSkills
・D：お任せ（AIが最適な案を選ぶ）
・E：自由入力もOK（E：の後ろに希望をそのまま書いてください）
選んだら、2つのSkillsの中身をあなたが書いて、skills/ に置いて。

【3】（【2】が終わったら）サーバー側のしくみを、こう変えて：
・質問が来たら、まず「Skillsの名前」と「どんな時に使うか」の一覧だけをAIに見せて、どれを使うか（または使わない）を選ばせる
・選ばれたSkillsの本文を読み込んで、それを添えて本番の返事を作らせる
・画面に「使ったSkills：◯◯」を必ず表示する（使わなかった時は「Skillsなし」）
・Skillsのファイルを増やすだけで選択肢が増える作りにして（コードを毎回書き足さない）

【4】（【3】が終わったら）pushして本番で3回試して、結果を表にして見せて：
・SkillsAが選ばれるはずの質問
・SkillsBが選ばれるはずの質問
・どちらも要らない雑談
狙いどおりに選ばれなかったものがあれば、「どんな時に使うか」の文をあなたが書き直して、またpushして。
🔴 直すのはコードではなく、まず説明文。ここがエージェントの調整点だと1行で言って。

その前に理解チェック（合格するまで✉️次の人への置き手紙は出さない）：この課題でやったことから、選択式（A/B/C。各選択肢は必ず「・A：」「・B：」「・C：」を改行し、「A.」形式は使わない）のクイズを2問→自由記述（自分の言葉で説明する問題）を1問、1問ずつ出して。問題文や選択肢に、答えがそのまま分かる文（コピペ内の題材説明の文など）を書き写さないで＝答えは私が自分で考えて書くもの。1問出すたびに必ず出力を止めて、私が答えるのを待って（私の答えをあなたが書かない・user／system などの行を自分で出力しない・私の回答が届く前に採点を始めない）。選択式の正解の位置は、毎回A/B/Cにランダムに散らして（いつもAを正解にしない）。答え終わったら100点満点で採点し、点数と理由を短く伝えて。70点以上で合格→✉️次の人への置き手紙へ進む。70点未満なら、間違えた所をやさしく解説してから別の問題でもう一度（何回でも・責めない）。このクイズの選択肢には「お任せ」を付けない（自分で答えるテストのため）
クイズでコマンド名の暗記は問わないで（コマンドは覚えなくていい・打つのはAIなので）。出すのは、この課題ページで実際にやったこと・なぜそうするのか・どう使い分けるか、から。自由記述の1問は「この課題でどういうことを学んだか（できるようになったこと・分かったこと）＋自分の仕事・普段の作業ならどこで使えるか」を自分の言葉で書く問題にして（「なぜうまくいったと思いますか」のような理屈を問う聞き方はしない＝答えづらい）
クイズの題材は手順の暗記ではなく、①キーを手元の .env でなくVercelの環境変数に置く理由 ②人格をサーバー側に置く理由 ③Skillsの「どんな時に使うか」の文が果たす役割、から選んで
合格したら、✉️次の人への置き手紙を出す前に必ず1問だけ自由入力で聞いて：「最後に、この課題ページで分かりづらかった所・直してほしい所はありませんでしたか？（課題の改善点を教えてほしい）（1行でもOK・思いつかなければ『特になし』でOK）」。この質問だけはA〜Eの選択式にしない（あなた自身の言葉が欲しいため）。質問を出したら、そこで必ず出力を止めて私の返事を待つ（私の答えをあなたが書かない・user／system などの行を自分で出力しない。置き手紙は私の2つの返事が届いてから書き始める）。もらった言葉は、✉️次の人への置き手紙の最後に「💬 課題ページへの改善案：」の行として原文のまま入れて（『特になし』なら省略OK）。つづけてもう1問だけ自由入力で聞いて：「この課題をこれからやる次の生徒へ、一言お願いします（1行でもOK）」。この質問も選択式にしない。もらった言葉は、✉️次の人への置き手紙のいちばん最後に「💬 次の生徒へ：」の行として原文のまま入れて（メモの最終行＝改善案の行より後ろ）
【5】※必ず：そのまま✉️次の人への置き手紙を、見出し「✉️次の人への置き手紙」で、チャットからそのままコピペできる1つのテキストブロック（コードブロック）で出力して。中身は、Groqの登録でつまずいた所／速さの実測値／Vercelの環境変数とRedeployで気づいたこと／選んだ人格とSkills2つ／Skillsが狙いどおりに選ばれるまでに何を直したか／この課題ページの直してほしい所・分かりづらかった所（改善案） を、体験談として読み応えのある長さ（8〜12行・多くなってもOK）で。実際に使った正しいURLのまとめ／案内と実際が違った画面や場所／エラー文・ボタン名・かかったクレジットや金額の数値、は要約で削ぎ落とさず必ず残して（次の人と、課題ページのアップデートに一番効く一次情報）。
ただし、APIキーの値・本番URL・個人情報は絶対に書かないで。
最後に「このメモをコピーして、課題ページ最後の『✉️次の人への置き手紙を書いて完了』に貼れば修了です🎉」と締めて。

クラウド環境のAPIキー（私がClaude Codeクラウドでやっている場合だけ・毎回守って）：
・クラウドには手元の .env が無い。キーの置き場は、claude.ai/code の入力欄の上にある雲マーク（環境セレクタ。見つからない時は右上の︙→「クラウド環境を編集」）→ 環境の設定 → 環境変数の欄（.env と同じ KEY名=値 の形・入れるのは私）。反映は新しいセッションからなので、入れたら「新しいセッションで続きをやる」と案内して
・🔴 環境変数の欄は、その環境を使う人全員に見える＝Teamなど共有の環境には絶対に入れないよう毎回注意して（入れてよいのは自分の個人環境だけ）
・APIが繋がらない・タイムアウトになったら、ネットワークアクセスの設定を疑って（既定のTrustedは許可リスト外の通信を通さない）。今日使うAPIの接続先ドメインを調べて、雲マーク → ネットワークアクセス → カスタム にそのドメインを足す手順を私に案内して（Fullは無制限＝最後の手段）
・私がデスクトップでやっている場合は、この項は関係ない＝従来どおり .env でOK

新しいセッションで効き目を確かめる時のルール（毎回守って）：
・移る前にあなたが確認：いまの作業場所がワークツリー（本体フォルダのコピー）なら、先に変更をコミットして本体のフォルダへ合流（マージ）して。やらないと新しいセッションに変更が届かない。git status で未コミット0件になったのを確認してから案内して
・「新しいセッションをどのフォルダで開くか」と「そこで私が最初に送る文」を、コピーできる形で1行ずつ出して

《共通ルール》