MCPを活用したNWモニタリング レポート生成の取り組み

Network Developer Night #2　神山発表資料

Transcript

1. MCPを活用したNWモニタリング レポート生成の取り組み 神山 卓哲
2. 自己紹介 • 名前：神山卓哲 • 経歴： ✓ 2012〜2020：Sony Network Communications ✓ 2021〜現在：KDDI ✓ 2023〜現在：Interop Tokyo ShowNet NOC team NWの企画/設計/構築/運用など • 好きなビール：COEDO毬花 今回の発表は上記組織とは関係のない個人的な意見です
3. アジェンダ • MCPを活用したNWモニタリングレポート生成の取り組み ✓ 動機・概要 ✓ テスト環境 ✓ テストシナリオ・結果 ✓ 取得情報の活用事例 ✓ まとめ • おまけ：分割キーボードのススメ
4. 動機 ネットワークやサーバを運用しているとよくある突発的な情報収集・可視化 • 昨晩の障害発生時、◯◯エリアのトラフィックどうなってた？ • 先週日曜日の◯◯時頃、サーバリソース消費状況ってどうだったっけ？ こういったアドホックな情報共有作業を、生成AIとMCPを活用することで 省力化できないか？ こん なの
5. MCPとは？ MCP(Model Context protcol)： ・Anthropic社が2024年11月に提唱 ・AIアプと外部データ・ツール間の通信や操作を標準化された手順で行うためのプロトコル JSON-RPC 2.0形式でやり取りを行う ・別々のAPIや認証の実装の必要がなくなることで開発工数の削減やスケールしやすさ等がメリット 出典：https://qiita.com/syukan3/items/f74b30240eaf31cb2686
6. 取り組み概要 ・想定ケース:突発的な分析需要に対する監視画面操作と情報取得 ・以下のタスクを生成AI+MCPでどの程度実行可能かをテストする ①ブラウザベースの監視画面を操作 ②求める情報を表示 ③スクリーンショット取得 ・出来るだけシンプルで抽象的な命令で実行可能かを重視 ➔プロンプトに細かい指示を書けば制度は上がるが、その間に自分でやった方が早くなってしまう MCP Server 生成AI アプリ オペレータ 監視画面 情報取得 命令 回答生成 情報取得 連携 操作/ 情報取得
7. ブラウザ操作に利用するMCP ①Playwright MCP(Microsoft) ➢ ブラウザを操作するE2Eテストツール”Playwright“を生成AIからMCP連携 ➢ Web構造を基に高度なスクレイピング・データ取得が可能 ➢ 複数のブラウザに対応(chrome, Firefox) ➢ 2025年3月リリース、無料で利用可能 ➢ 主なツール：  URLナビゲーション  要素のクリック  テキスト入力  ブラウザスナップショットの取得  スクリーンショットの取得 ②Chrome DevTools(Google) ➢ Chromeブラウザの自動操作を行うMCP ➢ 2025年9月にプレビュー版が公開。今回はPlaywrightの比較用に利用 複雑な構造になりがちな監視画面でも効果的に動くのか？
8. テスト環境 • 生成AIクライアント：Claude Desktop v0.13.91 • 生成AIモデル: ➢ Sonnet4.5：バランス型 ➢ Opus4.1 ：高度な推論型 ➢ Haiku3.5 ：高速特化型 • 操作対象アプリケーション: ➢ Zabbix v7.0.18 ➢ Grafana v12.1.1.1 ※複数の監視アプリに対応可能かテスト • ブラウザ:Google Chrome
9. テスト環境(つづき) • MCP： ➢ Playwright MCP ➢ Chrome-devtools 共に公式のパッケージをnpx(node package executer)で実行 • MCPサーバ設定: ・生成AIロール設定: ・役割 あなたはネットワーク・サーバモニタリングのプロフェッショナルです。 mcpを用いて様々な監視用webアプリケーションにアクセスして情報を 集めたりスクリーンショットを取得することができます。 ・監視用webサイトの情報 -zabbix(https://x.x.x.x/zabbix/index.php) ID:xx Pass:xx -grafana(https://x.x.x.x:3000/) ID:xx Pass:xx ・ルール -playwrightでスクリーンショットを取った場合は保存用ディレクトリ (/Users/xxx/screenshot/)配下にpng形式でコピーすること。
10. テストシナリオ① Zabbix • プロンプト: zabbixで2025/9/23 0:00〜1:00の間の以下の情報を表示し、それぞれスクショしてください -障害一覧 -zabbix-serverのcpu使用率の推移グラフ ・Zabbix補足情報： ➢ 監視ホストはzabbixサーバ自身のみ ※Linux Zabbix agent template ➢ 当該時刻に意図的にcpu利用率を 上昇させアラートを発生させてある
11. 結果(シナリオ①) Zabbix MCP llm model 処理時間 成功回数 (5回中) 備考 playwright Sonnet4.5 5-7min 5 安定して意図した情報取得できた Opus4.1 8-12min 3 スクショする画面を間違える場合あり Haiku3.5 1-2min 0 Snapshotから構造解釈できず Chrome devtools Sonnet4.5 9-11min 0 画面遷移が上手くいかずリトライ繰返す Opus4.1 8-10min 1 画面遷移が上手くいかずリトライ繰返す Haiku3.5 1-2min 0 Snapshotから構造解釈できず スクショ(障害一覧) スクショ(cpuグラフ)
12. 結果(シナリオ①) Zabbix スクショ(障害一覧) スクショ(cpuグラフ)
13. デモ(シナリオ①) Zabbix デモ動画
14. 失敗例(シナリオ① Opus4.1) 適切な箇所までスクロール したつもり スクロールできずにスクショ していることに気が付いていない
15. なぜ適切なブラウザ操作が出来る？ DOMツリー アクセシビリティツリー ブラウザ表示 • Playwright MCPではアクセシビリティツリーにメタ情報を付与したSnapshotで構造を解釈する • アクセシビリティツリーはDOM※ に基づいて作成され、UIの構造を表す(role,state,value, etc..) ※Document Object Model
16. テストシナリオ② Grafana • プロンプト: grafanaで10/1 0:00〜3:00の間のzabbix serverのインタフェースens3/ens4 のトラフィック推移グラフを表示し、それぞれスクショしてください。 ・Grafana補足情報： ➢ Zabbix取得アイテムを可視化している ➢ 主要な値をダッシュボードに設定 メモリ, cpu, IFカウンタ, disk, etc..
17. 結果(シナリオ②) Grafana MCP llm model 処理時間 成功回数 (5回中) 備考 playwright Sonnet4.5 5-6min 4 安定して意図した情報取得できた Opus4.1 8-10min 2 時刻フォームの設定誤りを頻発 Haiku3.5 1-2min 0 Snapshotから構造解釈できず Chrome devtools Sonnet4.5 10-12min 0 画面遷移が上手くいかずリトライ繰返す Opus4.1 10-12min 2 画面遷移が上手くいかずリトライ繰返す Haiku3.5 1-2min 0 Snapshotから構造解釈できず スクショ(ens3トラフィックグラフ) スクショ(ens4トラフィックグラフ)
18. 結果(シナリオ②) Grafana スクショ(ens3トラフィックグラフ) スクショ(ens4トラフィックグラフ)
19. 失敗例(シナリオ② Opus4.1) 意図していない時刻を設定。また グラフ上部が隠れている状態でスクショしている
20. 取得情報の活用例(資料生成) Claudeで生成したパワポスライド ・以下に準じてパワーポイントの資料を作成して -ネットワークやサーバの監視情報を完結にわかりやすく説明すること -必要に応じて取得したスクリーンショットを挿入する -なるべく少ない枚数のスライドにまとめる -シンプルでモダンなデザインを心がける Claude標準機能 プロンプト
21. 取得情報の活用例(チャット投稿) MCP連携によるSlackへの投稿 Zabbixで取得した情報のサマリをslackの◯◯チャンネルに投稿して Slack MCP連携 プロンプト
22. まとめ • Playwright MCPを用いて複雑な監視画面の自動情報取得が可能である 但しモデルにより安定性に差がある Sonnet4.5では詳細な操作指示をせずとも意図した画面にアクセス可能な傾向 • 障害時にレポート情報取得はAIに任せるといったユースケースで 割と実用的なレベルにあると感じた • Snapshotの読込みによるトークンの消費がかなり大きいため注意 参考：Zabbixダッシュボード読込みで約1.4万トークン • 処理の成否はWeb構造に依存する アクセシビリティツリーに含まれない情報は解釈出来ない 皆様も色々なwebアプリで試してみてはいかがでしょうか？
23. おまけ 分割キーボードのススメ
24. 私のキーボード遍歴 HHKB Lite HHKB Professional2 HHKB Professional hybrid type-s keyball39 NOW 2025 2020 2018 2015 最近分割キーボードに変えて肩こり・首こりが劇的に改善したので 紹介させてください 注）効果には個人差がありますｃ 分割キーボード
25. キーボードタイプ別の姿勢 狭い 広い 肩の開き 出典：https://salicylic-acid3.hatenablog.com/entry/key-layout 一体型 一体型(Alice配列) 分割型
26. テンティング 出典：https://www.styleb.co.jp/seminar/note/forearm- pronator-muscle/ｃ • 分割型ではキーボードに角度を付けることができ、テンティング呼ばれる • テンティングにより腕の回内が緩和され前腕〜手首の疲労軽減が期待できる 注）効果には個人差があります テンティング例 前腕の回内に作用する筋肉
27. (さらにおまけ)キー配列の話 出典：https://note.com/illlilllililill/n/nc099239c5565 • 最も有名なQWERTY配列は実はローマ字入力する上で効率が悪い、という説がある • 下図は青空文庫100万字を入力する際に打たれるキー頻度のヒートマップ • より効率的な入力を目的として様々なキー配列が設計されている ※下右図は英語入力に特化したDvorak配列。ローマ字入力にも優れる QWERTY配列 Dvorak配列
28. ルーターコマンド入力ではどうか？ QWERTY配列 Dvorak配列 • 下図はJuniperコマンド1.5万を入力する際に打たれるキー頻度のヒートマップ • JuniperコマンドについてもDvorak配列が効率的かも・・・？ ※Dvorak配列は英語入力に特化しているためある意味当然？
29. ご清聴ありがとうございました