Gemini BYOK SPA

1) API Key（このページ内でのみ使用）

この方式は BYOK（Bring Your Own Key）：あなたの鍵であなたが呼び出します。
※鍵はサーバーには送られませんが、このページ上では扱います（XSS等に注意）。

2) モデルと送信
Response 

      

    


    
    
      

        

          
Gemini API Key 取得と安全設定（BYOKデモ向け）

          

            “あなたの鍵はあなたの金庫に”を守りつつ、被害範囲を小さくする設定
          

        


        

          
        

      


      

        

          このデモで目指す安全ライン
          
    
            
  • 鍵をあなた（サイト作者）のサーバーに送らない（ブラウザ直呼び）
    • 
            
  • 盗まれても使える場所を縛る（HTTPリファラ制限）
    • 
            
  • Gemini以外に転用されないように縛る（API制限）
    • 
          

        


        

          Step A: Google AI Studio で API Key を作る
          
    
            
  1. 
              Google AI Studio を開く:
              aistudio.google.com
            
    2. 
            
  2. 
              左側のメニュー（Dashboard）から API Keys を開き、Create API key。
              
    
                AI Studio では API Keys ページでキーを作成/管理できます。
                既存のCloudプロジェクトを使う場合は Projects から Import projects する導線もあります。
              
    
            
    3. 
            
  3. 
              表示されたキーをコピー（この画面を閉じる前に控える）。
            
    4. 
          


          


          

            （補足）プロジェクトが見えないとき: Import projects
            
    
              
  1. AI Studio → Dashboard → Projects
    2. 
              
  2. Import projects を押して、プロジェクト名/IDで検索 → Import
    3. 
              
  3. その後 Dashboard → API Keys で、インポートしたプロジェクトを選んでキー作成
    4. 
            

          

        


        

          Step B: Google Cloud Console で “安全な制限” を付ける
          

            推奨は アプリケーション制限（HTTP リファラ）と API 制限（Generative Language API）の両方。
          


          
    
            
  1. 
              Cloud Console の Credentials（認証情報）を開く:
              APIs & Services → Credentials
            
    2. 
            
  2. 対象の API Key 名をクリックして編集画面へ
    3. 
            
  3. 
              Application restrictions → Websites (HTTP referrers) を選択
              
    
                HTTP リファラ制限には * ワイルドカードが使え、ポート番号も含められます。
              
    
            
    4. 
            
  4. 
              Website restrictions に許可する参照元を追加
              
    
                このページ用のおすすめ入力例
                
    いま開いているページのホスト:
    
                (loading...)

                
    
                  “単一ホストを許可”の例（2つ入れるのが定番）:
                
    
                
      

                
      
                  ※ pages.dev のような共有ドメインで *.pages.dev/* を入れると範囲が広すぎます。
                  “自分のサブドメインだけ”を許可してください。
                
      
              
      
            
      • 
            
    • 
              API restrictions → Restrict key を選び、
              Generative Language API（Gemini API）だけに制限
              
      
                AI Studio では「制限なし」または「Generative Language API に制限されたキー」だけが表示対象になる旨の記載があります。
              
      
            
      • 
            
    • Save で保存
      • 
          
    

          
    
            よくある詰まりポイント（失敗しがちな所）
            
      
              
    • 
                ローカル開発が弾かれる → localhost:5173（または実際のポート）を許可リストに入れる
              
      • 
              
    • 
                “ページ単位”で細かく制限すると動かない場合 → 一部ブラウザはクロスオリジンで “originだけ” しか送らない実装があり、
                パス指定の制限だと一致しないことがあります。まずはドメイン/ホスト単位で。 
              
      • 
              
    • 
                キーがAI Studioに見えない → API 制限が Generative Language API 以外になっている可能性
              
      • 
            
    
          
    
        
    

        
    
          Step C: このページでテストする
          
      
            
    1. このページの API Key 欄に貼り付け
      2. 
            
    2. Message に文章を入れて Send
      3. 
            
    3. うまくいかない場合は Step B の制限を再確認
      4. 
          
    

          
    

          
    
            事故ったら：キーを無効化/削除して新しいキーに差し替え（“鍵のローテ”が最強の消火器）