サードパーティ製ツールを使用してカスタム アプリケーションの状態を AI エージェントに公開する

サードパーティのデベロッパー ツールを使用すると、コーディング エージェントは DOM、ネットワーク リクエスト、コンソールログの範囲を超えて確認できます。ウェブサイトやフレームワークからカスタムツールを直接公開することで、エージェントは通常アクセスできないアプリケーションの状態やデータとやり取りできるようになります。

これらのツールは JavaScript を介して作成され、ページが読み込まれると、Chrome DevTools for Agents によって自動的に検出されます。

サードパーティ デベロッパー ツールについて

コーディング エージェントのコンテキストでは、ツールはエージェントが特定のアクションを実行するための既製の関数です。エージェント用の DevTools の場合、このようなツールは内部ランタイム状態をコーディング エージェントに直接公開し、レンダリングされた出力と内部ロジックのギャップを埋めることができます。

サードパーティ ツールを使用する場合は、次の点に注意してください。

  • ランタイム検出。ツールは、アプリケーションがグローバル window オブジェクトのエージェントに対して Chrome DevTools が発行した devtoolstooldiscovery イベントに応答すると、自動的に検出されます。
  • コンテキスト スコープ。ツールは、ツールを定義するページのコンテキスト内でのみ実行されます。オリジンやページの再読み込みをまたいで保持されることはありません。
  • ツールの特異性。ツールは、エージェントがタスクを実行するための追加の方法にすぎません。プロンプトを満たすために、組み込みツールまたはベアモデルの機能が優先される場合があります。そのため、ツール名と説明はできるだけわかりやすくしてください。

前提条件

サードパーティ製ツールを実装する前に、次の要件を満たしていることを確認してください。

  • エージェント向けの Chrome DevTools。バージョン 0.25.0 以降を使用します。
  • JavaScript が有効になっている。JavaScript が有効になっていて、実行されている。

ツールを実装する

ツールを実装するには、特定の検出イベントをリッスンし、ツールの定義で応答します。次のコードは、ツール定義を含むレスポンスを表しています。

window.addEventListener(
  'devtoolstooldiscovery',
  (event: DevtoolsToolDiscoveryEvent) => {
    event.respondWith({
      name: 'Page-specific DevTools',
      description: 'Provide runtime info directly from the JavaScript in the page.',
      tools: [
        {
          name: 'add',
          description: 'Calculates the sum of two numbers.',
          inputSchema: {
            type: 'object',
            properties: {
              a: {type: 'number'},
              b: {type: 'number'},
            },
            required: ['a', 'b'],
          },
          execute: async (input: {a: number; b: number}) => {
            return input.a + input.b;
          },
        },
      ],
    });
  },
);

アプリケーションでツールを登録するには:

  1. ツールグループを定義します。名前、説明、個々のツール定義の配列を含む ToolGroup を作成します。

    export interface ToolDefinition {
      name: string;
      description: string;
      inputSchema: JSONSchema7;
      execute: (args: Record<string, unknown>) => unknown;
    }
    export interface ToolGroup {
      name: string;
      description: string;
      tools: ToolDefinition[];
    }
    
  2. 検出イベントをリッスンします。エージェント用の Chrome DevTools は、ナビゲーションのたびと、利用可能なツールの更新されたリストが必要になるたびに、グローバル window オブジェクトでカスタム devtoolstooldiscovery イベントをディスパッチします。

  3. ツールを登録します。イベントの respondWith() メソッドを呼び出して、ツールグループをエージェントに提供します。

個々のツールに不可欠なコンポーネント

実装するすべてのツール定義には、次の 3 つの部分を含める必要があります。

  • 名前と説明。これらは、エージェントがツールをいつ、どのように呼び出すかを判断するために使用する手順を提供します。
  • 入力スキーマ。ツールが想定する引数の構造と型を定義する JSON スキーマ。
  • 実行関数。エージェントがツールを呼び出したときにページで実行される実際の JavaScript コード。

次の例は、単一のツール定義でこれらの 3 つのコンポーネントを示しています。

{
  name: 'add',
  description: 'Calculates the sum of two numbers.',
  inputSchema: {
    type: 'object',
    properties: {
      a: {type: 'number'},
      b: {type: 'number'},
    },
    required: ['a', 'b'],
  },
  execute: async (input) => {
    return input.a + input.b;
  },
}

サードパーティ デベロッパー ツールのユースケース

エージェントに、表面的な UI 要素だけでなく、アプリケーションの深いロジックを検査するよう指示します。これらのカスタムツールを使用して、ステートフル アプリケーションやフレームワークを多用するアプリケーションのデバッグを効率化します。

ツールを見つけるためのヒント

ツールの名前と説明をわかりやすいものにする。エージェントは、どのツールを使用するかを判断するコンテキストとしてこれらの説明を使用します。明確な言語を使用することで、エージェントはタスクに適切なツールを自律的に判断できます。

アプリケーション固有のランタイム指標をデバッグする

サイレント キャッシュミスや冗長な API 呼び出しなどの問題は、標準の検査では検出されないことがよくあります。内部統計情報を公開することで、エージェントは特定の動作が発生した理由を説明できます。

内部統計情報を公開する関数があるとします。まず、次のようなツールを作成する必要があります。

window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: 'My app',
    description: 'Tools to debug my app',
    tools: [
      {
        name: 'getCacheStatistics',
        description: 'Exposes runtime cache hits and misses for the frontend API service.',
        inputSchema: {},
        execute: async () => {
          // Assuming window.__apiCacheService exists in your app
          return window.__apiCacheService.getStats();
        }
      }
    ]
  });
});

ツールの説明が明確であれば、エージェントは必要に応じてツールを自律的に使用する可能性があります。次のようにツールを使用して、エージェントにタスクの実行を促すことができます。

When I reassign a lead to a new sales rep, the dashboard takes a second to
update. Please verify if the frontend is correctly updating the local cache,
or if it is doing a full cache miss and refetching the entire pipeline from the
database.

エージェント実行の例: エージェントは、アプリケーションによって公開された getCacheStatistics ツールを検出します。ツールを呼び出し、返されたヒット / ミス比率を分析し、フロントエンドがローカル キャッシュを更新する代わりにパイプライン全体を不必要に再取得していることを特定します。

フィーチャー トグルの確認

カスタム データポイントを定義して、特定のユーザー セッションでアクティブな現在の環境変数または機能フラグを公開します。これにより、特定のユーザーに特定の機能が表示される理由と表示されない理由をデバッグできます。お客様からバグが報告された場合、エージェントは、お客様が問題の原因となっている可能性のあるテストグループに属しているかどうかを確認できます。

たとえば、次のようなツールを作成して、内部のフィーチャー トグルの状態を返します。

// Implementation for a website creator to expose feature flags
window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: 'Application Configuration Tools',
    description: 'Tools for inspecting runtime environment and feature toggles',
    tools: [
      {
        name: 'getFeatureFlags',
        description: 'Returns a list of all active feature flags and their current values for the session.',
        inputSchema: {
          type: 'object',
          properties: {} // No input parameters required for this tool
        },
        execute: async () => {
          // This should return your internal feature flag state
          // Example: return window.AppConfig.getFlags();
          return {
            "new-ui-enabled": true,
            "beta-search-v2": false,
            "experiment-group": 'control',
            "log-level": 'debug'
          };
        }
      }
    ]
  });
});

ツールの説明が明確であれば、エージェントは必要に応じてツールを自律的に使用する可能性があります。次のようにツールを使用して、エージェントにタスクの実行を促すことができます。

Check the active feature flags and tell me if the new-ui-enabled flag is set to
true for this session.

エージェント実行の例: エージェントが getFeatureFlags ツールを呼び出し、new-ui-enabled フラグが有効であることを確認して、新しいインターフェースに関連付けられたコンポーネントのデバッグに進みます。

グローバル アプリケーションの状態を検査する

アプリのランタイム状態ツリーを公開して、エージェントが DOM 全体を取得しなくても内部ロジックを理解できるようにします。

次のように、状態ツリー内の特定のパスをクエリするツールを作成できます。

// Library-agnostic implementation for inspecting global application state
window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: "Global State Inspector",
    description: 'Tools to inspect the runtime state tree of the application',
    tools: [
      {
        name: 'getGlobalState',
        description: "Returns the current application state. Use the 'path' parameter to drill down into specific sections (for example, 'auth.user' or 'cart.items'). ",
        inputSchema: {
          type: 'object',
          properties: {
            path: {
              type: 'string',
              description: 'Optional dot-notation path to a specific property in the state tree.'
            }
          }
        },
        execute: async (input) => {
          // Library-agnostic access:
          // Website creators can point this to whatever global store they use.
          const state = window.__APP_STATE__ ||
                        (window.store && typeof window.store.getState === 'function' ? window.store.getState() : null);

          if (!state) {
            return { error: 'Application state is not accessible via window.__APP_STATE__ or window.store.' };
          }

          if (!input.path) {
            return state;
          }

          // Helper to resolve a dot-notated path against the state object
          return input.path.split('.').reduce((acc, part) => {
            return acc && acc[part] !== undefined ? acc[part] : undefined;
          }, state);
        }
      }
    ]
  });
});

ツールの説明が明確であれば、エージェントは必要に応じてツールを自律的に使用する可能性があります。次のようにツールを使用して、エージェントにタスクの実行を促すことができます。

The number of items in my cart is not updating. Inspect the global state at the
path cart.items and list the current items and their quantities, see if they are
the same.

エージェント実行の例: エージェントが path パラメータを使用して getGlobalState を呼び出します。カートからアイテムのリストを取得し、内部状態とページにレンダリングされたアイテムの不一致を特定します。

このツール例に関する重要な注意事項は次のとおりです。

  • 分離されたロジック: AI エージェントが「状態」を要求します。デベロッパーは、execute 関数でリクエストを実際のデータ構造にマッピングする方法を決定します。
  • ターゲット デバッグ: path パラメータを含めることで、エージェントは状態ツリー全体(巨大な場合がある)の取得を回避し、関連する部分のみに焦点を当てて、トークンを節約し、パフォーマンスを向上させることができます。
  • 標準化されたインターフェース: 状態管理ライブラリを切り替えても、この execute 関数を更新する限り、AI デバッグ エージェントに新しい手順やツールは必要ありません。

データベースの内容を検査する

読み取り専用のデバッグ エンドポイントを介してデータベース レコードを直接クエリし、バックエンド データが UI の状態と一致していることを確認します。

安全なデバッグ エンドポイントを公開し、次のようなツールを作成してバックエンド レコードを検証します。

// Framework-agnostic implementation for inspecting database content
window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: 'Database Inspection Tools',
    description: 'Tools to query backend database records using existing browser session',
    tools: [
      {
        name: 'queryDatabaseTable',
        description: 'Retrieves a limited set of records from a specific table. Useful for verifying that backend data matches the UI state.',
        inputSchema: {
          type: 'object',
          properties: {
            tableName: {
              type: 'string',
              description: 'The name of the database table to inspect.'
            },
            limit: {
              type: 'number',
              default: 5,
              description: 'Maximum number of rows to return.'
            }
          },
          required: ['tableName']
        },
        execute: async (input) => {
          // This calls a generic debug endpoint you've set up on your server.
          // It's framework-agnostic because it just expects a JSON response.
          try {
            const response = await fetch(`/api/debug/db-inspect?table=${input.tableName}&limit=${input.limit}`);
            if (!response.ok) {
              return { error: `Backend returned ${response.status}: ${response.statusText}` };
            }
            return await response.json();
          } catch (error) {
            return { error: `Failed to connect to debug endpoint: ${error.message}` };
          }
        }
      }
    ]
  });
});

ツールの説明が明確であれば、エージェントは必要に応じてツールを自律的に使用する可能性があります。次のようにツールを使用して、エージェントにタスクの実行を促すことができます。

The total price on the checkout page seems wrong. Query the orders table for my
last order to verify the subtotal and tax values and see what may be causing the
problem, if any.

エージェント実行の例: エージェントが orders テーブルに対して queryDatabaseTable を呼び出します。JSON レコードを取得し、バックエンドの税額計算のエラーを特定して、サーバーロジックの修正を提案します。

このツール例に関する重要な注意事項は次のとおりです。

  • セキュリティと認証: データベース認証情報を AI エージェントに渡す必要はありません。fetch 呼び出しは、ブラウザの現在のログイン セッションを使用して、バックエンドでリクエストを承認します。
  • 実用的なデバッグ: AI エージェントが UI バグを特定した場合、queryDatabaseTable をすぐに呼び出して、エラーがソースデータまたはフロントエンドの計算に存在するかどうかを確認できます。
  • 最小限の設定: サーバーで、テーブル名を受け取って JSON を返す「安全な」(読み取り専用)デバッグ エンドポイントを 1 つだけ公開する必要があります。そのエンドポイントの構築に使用するフレームワークは関係ありません。