MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法

2025/8/27 https://findy.connpass.com/event/365880/ にて発表予定の資料です #Nextjs_findy
---
現在のAIコーディングツールは、コードベースの情報しかアクセスできないため、実際のデバッグには限界があります。本発表では、MCP（Model Context Protocol）を活用し、AIエージェントがログ取得、GitHub Issue検索、最新ドキュメント参照、ブラウザ操作まで自律的に実行できる手法を紹介します。さらに、エラーナレッジベースによって解決策を蓄積することで、AIの精度向上と人間の学習を両立させる、持続可能な開発プロセスを実現します。Next.js v15の具体例を交えて解説します。

Transcript

1. Takumi Nakamura (@nyatinte) 2025/8/27 #Nextjs_findy MCPで実現する AIエージェント駆動の Next.jsアプリデバッグ手法
2. About Me GitHub: nyatinte X: nyatinte にゃちんてと読みます Takumi Nakamura (@nyatinte にゃちんて) 新卒フロントエンドエンジニア Next.js, TypeScript, AIが好き 気になっているNext.jsの機能はDynamic IO OSS ccexp (claude-code-explorer) ccusage Raycast Extension
3. Next.js 難しい 仕様そのものの難しさ バージョン間差異の多さ アップデート頻度 3
4. AIエージェントに デバッグさせましょう！ 4
5. "実際に試すことができないので" "v14の情報から推測すると..." "申し訳ございません..." AIにNext.js v15のエラー解決をさせてみる 例: Next.js v15のparamsのPromise化 5 課題解決の精度が悪い ･ 本質的解決ではないケースも ログ見れない ドキュメント見れない GitHub見れない ブラウザ操作できない
6. MCPを活用して AIエージェントが自律的に デバッグできないか？ 6
7. エラー ナレッジベース 1. エラーを探索・検出してログ収集 Background dev server Playwright MCP 4. 問題の解決 3. 修正→再実行してログ収集 AIによるコード編集 Playwright MCP 2. エラー解決法を調査 Context7 MCP Deepwiki MCP GitHub MCP エラーナレッジ AIエージェント駆動デバッグの流れ AIが学び続け、 “人間も成長できる” 7
8. Claude CodeではBackgroundで開発サーバーを起動(npm run dev)しておい て、出力されたログを見ることができる browserDebugIntoInTerminal でブラウザのログをターミナルに出力 tmuxの活用やログファイルの出力で他AIエージェントもできる これを利用して、Playwright MCPやBrowser use MCPなどを使い、自動テス ト実行 → エラーを発見・再現 開発サーバーからデバッグ情報が取得でき、AIエージェントに対するフィード バックを与えることができる 1. エラーを探索・検出してログ収集 8
9. 人間のエラー解決プロセスをそのまま模倣させる Next.jsのIssueを調査する → GitHub MCP Next.jsの最新ドキュメントを見に行く → Context7 MCP, Deepwiki MCP コミュニティブログを参考にする → WebSearch系 MCP Next.js MCP開発の動きもある https://github.com/vercel/next.js/pull/81770 Next.jsコミュニティの情報量の多さが強みになる 2. エラー解決法を調査 9
10. MCPを活用した調査で、エラーの原因と解決策が明らかになる AIエージェントが自律的に修正できるように 3. 修正→再実行してログ収集 10
11. MCPを活用した調査で、エラーの原因と解決策が明らかになる AIエージェントが自律的に修正できるように もし解決したら、｢エラーナレッジベース｣ に追加する → AIコーディングで不足する “人間の学び” を増やしつつ、 AI自身も強化する 11 3. 修正→再実行してログ収集
12. エラーの原因・解決策・関連情報を体系的にまとめたドキュメント メリット プロジェクト全体として解決策を統一できる チーム全体に共有することができる 人間が学習できる！！！ AIエージェントがエラー発生時に必ず参照するようにプロンプトしておくと 👍 4. エラーナレッジベースの活用 12
13. エラーナレッジベースの例 例: Next.js v15のparamsのPromise化 13
14. Example 14
15. エラー ナレッジベース 1. エラーを探索・検出してログ収集 Background dev server Playwright MCP 4. 問題の解決 3. 修正→再実行してログ収集 AIによるコード編集 Playwright MCP 2. エラー解決法を調査 Context7 MCP Deepwiki MCP GitHub MCP エラーナレッジ Thank you for listening! AIが学び続け、 “人間も成長できる” 15