完成コードはこちらです。

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の引用・参照された割合を確認できます。

完成コードはこちらです。

GitHub：
https://github.com/omo-y/AI-Overview/tree/distribution-v1

このリポジトリでは、WordPressの記事で解説したDB保存機能（SQLite + Prisma）を追加した「AI Overview診断ツール」のMVP版を公開しています。

利用する場合は、上記リンク先の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に保存するため、SQLite + Prismaの準備を行います。
Prisma関連パッケージのインストール、Prismaの初期化、マイグレーションの実行、Prisma Clientの生成を順番に行います。
必要に応じて、npx prisma studio を使い、Web画面からDBの内容を確認できます。

最後に、npm run dev で開発サーバーを起動し、ブラウザで http://localhost:3000 にアクセスします。
画面が表示されれば、「AI Overview診断ツール」の動作確認を行うことができます。

AI Overview診断ツール実行例