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

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

これらのツールは JavaScript で作成され、ページが読み込まれるとエージェント向け Chrome DevTools によって自動的に検出されます。

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

コーディング エージェントのコンテキストでは、ツールはエージェントが特定のアクションを実行するための既製の関数です。特にエージェント向け 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 コード。

次の例は、1 つのツール定義でこれらの 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.

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

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

  • ロジックの分離: AI エージェントは「状態」を要求します。デベロッパーは、execute 関数でそのリクエストを実際のデータ構造にマッピングする方法を決定します。
  • ターゲット デバッグ: path パラメータを含めることで、エージェントは 状態ツリー全体(非常に大きくなる可能性があります)をプルすることを回避し、関連する部分のみに焦点を当てて、トークンを節約し、パフォーマンスを向上させることができます。
  • 標準化されたインターフェース: 状態管理ライブラリを切り替えても、 この 1 つの 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.

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

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

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