ローカルLLM対応AI Overview診断ツールDB保存機能(Supabase)ユーザー認証・SSRF対策版完成コード
完成コードと詳しい実装手順を公開
完成コードのリンク
完成コードはこちらです。
GitHub:
https://github.com/omo-y/AI-Overview/tree/distribution-v3
このリポジトリでは、WordPressの記事で解説したDB保存機能(Supabase)とユーザー認証(Supabase Auth)、SSRF対策を追加した「AI Overview診断ツール」を公開しています。こちらのWordPress記事も参考にしてください。
利用する場合は、上記リンク先のGitHubページを開き、緑色の Code ボタンをクリックしてください。
表示されたメニューから Download ZIP を選択すると、ファイル一式をPCにダウンロードできます。
ダウンロード後はZIPファイルを解凍し、展開したフォルダ内にある README.md の手順に沿ってセットアップを進めてください。
セットアップが完了すると、AI Overview診断ツールを使ってテストを試すことができます。
セットアップ手順の概要
AI Overview診断ツールを利用するための主なセットアップ手順は、以下の通りです。
まず、ローカルLLMを動かすために Ollama をインストールし、使用するモデルである qwen3:latest をロードします。
その後、Ollamaにモデルが正しくインストールされているかを確認し、Ollama APIが正常に応答するかをチェックします。
次に、Next.jsプロジェクトの開発環境を準備します。
必要なパッケージを npm install でインストールし、環境変数ファイルである .env.local を設定します。
さらに、診断履歴をDBに保存しユーザー認証を有効化するため、Supabaseの準備を行います。
最後に、npm run dev で開発サーバーを起動し、ブラウザで http://localhost:3000 にアクセスします。
画面が表示されれば、「AI Overview診断ツール」の動作確認を行うことができます。
補足事項
Supabaseアカウントの作成
Supabaseのアカウントがない場合は、Supabaseホームページからユーザー登録しておきます。
.env.localの設定
NEXT_PUBLIC_SUPABASE_URL=Project Overview画面のプロジェクト名の下に表示されているurlを設定します。
NEXT_PUBLIC_SUPABASE_ANON_KEY=API Keys画面のPublishable keyを設定します。
(NEXT_PUBLIC_SUPABASE_ANON_KEY はブラウザ側ログインで使う公開可能なキーです)SUPABASE_SERVICE_ROLE_KEY=API Keys画面のSecret keysを設定します。
(SUPABASE_SERVICE_ROLE_KEY はサーバー側だけで使う強い権限のキーです。公開しないでください。)
追加機能について
利便性の向上とセキュリティ対策のため以下の機能を追加しています。
管理者機能
診断履歴表示
利用回数制限
URL診断のSSRF対策
ナビゲーション機能
実測チェック
SerpAPIでアカウントを作成後に、APIキーを取得して、SERPAPI_API_KEY=に設定すると、AI Overviewの出現件数や診断対象URLの引用・参照された割合を確認できます。


