【ITニュース解説】How We Gave Our AI Coding Agents the Context to Stop Hallucinating and Start Fixing Real Bugs

最近、AIがコードを書くのを手助けするツールが急速に普及している。例えば、新しいウェブサイトの部品を作成したり、基本的な機能を搭載した試作品を生成したりすることは、AIにとって得意な分野だ。しかし、既存のウェブサイトに発生した特定のバグ（不具合）を修正させたり、ユーザーインターフェース（UI）の小さな調整をAIに依頼すると、期待通りの結果が得られず、かえって問題が悪化することも少なくない。

例えば、「送信ボタンがデスクトップ版で少しずれている」とAIに指示すると、AIはフォーム全体のコードを不必要に変更し、新たなバグを生み出したり、ボタンの色を全く関係のない色に変えてしまったりすることがある。これは、AIが現状を正確に理解できていないために発生する典型的な問題である。

特に、システムの専門知識を持たない人がバグを報告する場合、この問題はさらに深刻になる。「ログインボタンが壊れている」といった漠然とした報告は、ウェブサイトの見た目や動作を直接把握できないAIにとっては、ほとんど役に立たない情報となる。このような曖昧な入力情報からは、AIも正確な解決策を導き出すことが難しいという「ゴミのような情報からはゴミのような結果しか得られない」という問題に直面する。

この根本的な課題を解決するために、Webvizioは、問題報告者とAIコーディングエージェントの間のギャップを埋め、AIに正確な「コンテキスト（文脈や状況情報）」を伝えるためのツールを開発した。

AIコーディングエージェントがバグを修正する際、人間開発者が当たり前のように持っている重要なコンテキストが欠けている。AIはウェブサイトの実際の見た目を直接認識しているわけではない。AIが特に欠いているコンテキストは以下の通りだ。

一つ目は「視覚的コンテキスト」だ。UIが実際にどのように表示されているか、問題の要素がページのどこに位置しているか、他の要素に隠れていないかといった情報である。AIはコードをテキストとしてしか認識せず、それが画面上でどのように描画されるかを直接把握できないため、この情報が非常に重要となる。

二つ目は「ランタイムコンテキスト」だ。これは、ウェブサイトが動作している最中に発生している事象を示す情報である。ブラウザのコンソールに表示されるエラーや警告、ネットワーク通信の状況、アプリケーションの内部状態など、実行時に動的に変化するデータが含まれる。これらの情報はバグの原因を特定する上で不可欠だ。

三つ目は「環境コンテキスト」だ。ユーザーがどのブラウザ、どのオペレーティングシステム、どの画面サイズでウェブサイトを利用しているかという情報である。これらの環境の違いによって、同じコードでも異なる振る舞いをする可能性があるため、バグの再現と修正のために必要な情報となる。

四つ目は「DOMコンテキスト」だ。DOM（Document Object Model）は、ウェブページを構成するHTML要素をプログラムが扱える形式で表現したものだ。問題として指摘された要素が具体的にどのDOM要素なのか、そのCSSプロパティはどうなっているか、その親要素や兄弟要素は何かといった詳細な情報が必要となる。「青いボタン」のような一般的な説明だけでは、AIは正確な対象を特定できない。

これらの情報が不足していると、AIは提供されたコードと曖昧な指示に基づいて推測するしかなく、多くの場合、その推測は間違った修正へとつながってしまう。

Webvizioが開発した解決策は、AIアシスタントの「目と耳」の役割を果たすツールである。このツールは、システムの専門知識を持たないチームメンバーでも簡単に問題を報告できるようにし、同時に開発者やAIが必要とするすべての技術的なデータを自動的に収集する仕組みを持っている。

具体的なワークフローは次のようになる。まず、非技術者のチームメンバーは、開発中のウェブページや公開中のウェブページをブラウザで閲覧する。問題を発見した場合、Webvizioが提供するブラウザ拡張機能を使って、不具合のある要素をマウスで指し、クリックするだけで報告ができる。その際、「このボタンをクリックしてもフォームが送信されない」といった簡単なコメントを添えることが可能だ。

報告が送信された瞬間、この拡張機能は自動的に豊富な技術的コンテキストを収集する。具体的には、以下の情報が収集される。

まず、「注釈付きスクリーンショット」だ。ユーザーが実際に見ていた画面の画像が取得され、彼らがクリックした要素が明確にハイライト表示される。これにより、視覚的な問題点がはっきりと伝わる。

次に、「コンソール出力」だ。報告が行われた瞬間にブラウザのコンソールに表示されていた全てのエラー、警告、ログが出力される。これにより、アプリケーション内部で何らかの問題が発生していないかを直接確認できる。

さらに、「ユーザーアクション」の履歴だ。報告に至るまでのユーザーの最近のクリックや入力操作が記録される。これにより、問題発生までの具体的な手順を追跡できる。

そして、「正確な要素セレクタ」だ。問題として指摘された要素だけでなく、その親要素も含め、HTML文書内でその要素を特定するためのユニークなCSSセレクタが取得される。これにより、AIはどの要素が問題の原因となっているかを厳密に特定できる。

最後に、「技術仕様」だ。ユーザーが使用しているブラウザのバージョン、オペレーティングシステム、画面の表示領域のサイズなど、環境に関する技術的な詳細情報が収集される。

収集されたこれらのデータは全て、Webvizioのシステム内で構造化されたタスクとして自動的に整理・保存される。これにより、曖昧なメールや漠然としたチケットではなく、全ての技術的データがきちんと分類され、ユーザーのコメントと連携された包括的なバグ報告が作成される。これは、その問題に関する唯一の信頼できる情報源となる。

次に、この豊富なコンテキストをAIコーディングエージェントに連携するための「MCPサーバー」という統合層が機能する。開発者がAIチャットを通じてバグ修正のタスクに取り組む際、手動で情報をコピー＆ペーストする必要はない。開発者がAIエージェントに利用可能なタスクを問い合わせると、AIはユーザーのコメント、スクリーンショット、コンソールログ、DOMセレクタ、ブラウザ情報など、必要なすべてのコンテキストを一つにまとまったAPIレスポンスとして受け取る。

この直接的で自動化された連携により、AIは問題の深い理解に必要なすべての情報を持つことになる。タスクを受け取ったAIは、ユーザーが具体的にどのボタンについて話しているのか、コンソールからどのような正確なエラーメッセージが発生しているのか、そしてバグがどのような正確な状況で発生したのかを正確に把握できるのだ。

その結果、AIが提案する解決策は、極めて的を射たものとなり、最初の試行で正しく修正される可能性が飛躍的に高まる。これはもはやAIが推測に頼るのではなく、豊富で包括的なデータセットに基づいた診断を実行していることに等しい。

このシステムのおかげで、「コンソール画面のスクリーンショットを送ってもらえますか？」といった、情報のやり取りにかかる無駄な時間がほとんどなくなった。フィードバックのサイクルはより短縮され、バグの修正は迅速になり、開発者は探偵のように問題を調査するのではなく、AIが提示した解決策を承認し、実装することに集中できるようになった。

このようなアプローチは、AIを単なるコード生成ツールとしてではなく、より高度な問題解決のためのパートナーへと進化させる上で非常に重要だ。特に、システムの専門知識を持たない人々からの情報と、技術的な解決策を結びつける橋渡し役として、このようなコンテキスト捕捉ツールは今後のソフトウェア開発において不可欠な存在となるだろう。