エージェントとアプリケーションの間の欠落したリンク

オープンソース

エージェントとアプリケーションの間の欠落したリンク

2026年6月10日

6

分

ブログに戻る

エージェントを作成

重要なポイント

ほとんどのエージェントツールはバックエンドしか見ていません。ブラウザ、アプリ、デバイスには、従来のサーバーサイドツールが直接アクセスできない貴重な状態と機能が含まれています。

ヘッドレスツールは、クライアントサイドの機能をエージェントループに取り込みます。エージェントは、構造化された入力と出力を維持しながら、ブラウザAPI、ローカルメモリ、アプリケーション固有のアクションを第一級ツールとして呼び出すことができます。

クライアントでの実行はユーザー体験とプライバシーの両方を向上させます。エージェントはユーザーの環境と直接やり取りできるため、ラウンドトリップが減り、機密データはデフォルトでローカルに留まります。

‌

TL;DR：ほとんどのエージェントツールはサーバー上で実行されるため、エージェントはAPIを呼び出せますが、ユーザーが実際に作業するブラウザ、アプリの状態、デバイス機能と対話できません。LangChainのヘッドレスツールを使用すると、地理位置情報、クリップボードアクセス、ローカルメモリ、アプリ内アクションなどのクライアントサイド機能を第一級ツールとしてエージェントが呼び出せるようにすることで、このギャップを埋めます。これにより、エージェントはより便利でプライベートになり、実際のアプリケーション動作に適合します。

今日のエージェントはますます高性能になっていますが、ユーザーが気にする機能の多くはサーバーではなくクライアントランタイムに存在します。ブラウザとアプリケーションは、ローカル状態、ユーザー選択、デバイスAPI、アプリケーション固有のアクションなどを所有しており、これらはバックエンドシステムでは利用できないことがよくあります。その結果、エージェントは次に何が起こるべきかを推論できますが、ユーザーが実際に作業している環境で行動するのに苦労します。

このギャップの理由の1つは、ほとんどのエージェントツールがサーバー上で実行されることです。モデルがツールの使用を決定すると、エージェントはそれをインプロセスで実行するか、外部サービス（MCPサーバーなど）に委任してから、結果を推論ループにフィードバックします。これはAPI、データベース、バックエンドシステムにはうまく機能しますが、明確な制限があります：

ブラウザ専用またはデバイス専用のAPIに直接アクセスできません。

サーバーに同期されたことのないフロントエンド状態に作用できません。

プライバシーに敏感なデータをデバイスから送信せざるを得ないことがよくあります。

本質的にローカルな操作に不要なラウンドトリップを導入します。

ブラウザは、多くの高価値エージェントアクションが実際に行われる場所です：ローカルアプリケーション状態の読み取り、現在のUIへの作用、データをバックエンドに送信せずにデバイス機能を使用すること。デスクトップアプリは、ローカルファイル、ネイティブ統合、セッション固有の状態を通じて同じパターンを公開します。エージェントがそのランタイムに到達できない場合、バックエンドワークフローでは優れていますが、ユーザーが実際に体験するインタラクションでは弱いままです。

Figma、Google Slides、またはリッチテキストエディター用のサイドカーエージェントを構築していると想像してください。エージェントはサーバー上でユーザーのリクエストを推論できますが、ドキュメントモデル、選択状態、編集コマンドはすべてクライアントにあります。サーバーサイドのツールでは、カーソルにテキストを挿入したり、選択したオブジェクトを再フォーマットしたり、アクティブなスライドにジャンプしたりできません。これらのアクションはアプリケーションランタイムに属し、バックエンドAPIには属していないからです。現在、チームは通常、アドホックなUIブリッジでこれを橋渡ししています：一部のクライアント状態をサーバーにシリアライズし、応答を取得し、命令的にクライアントにパッチを当てます。これは機能しますが、脆弱で、構成が難しく、モデルの推論ループから見えません。

エージェントがユーザーのブラウザから直接メモリや地理位置情報APIにアクセスできるようにします。

‌

これがLangChainのヘッドレスツールが解決する問題です。

ヘッドレスツールが変えるもの

ヘッドレスツールは、モデルにとって他のツールと同じように見えます：名前、説明、一連の期待される入力があります。モデルは他のツールと同様に、いつ呼び出すかを決定します。違いは次に何が起こるかです。

サーバーがツールを実行する代わりに、ツール呼び出しをクライアント（ユーザーのブラウザ、デスクトップアプリ、または実際にその機能を持つ環境）に送信します。クライアントはローカルでツールを実行し、結果を送り返し、エージェントは中断したところから再開します。

これは最初は小さな実装の詳細に聞こえますが、実際にはエージェントが確実に制御できるシステムの種類を変えます。

モデルはツールがどこで実行されるかを知る必要はありません。ツールを見て、それを使用することを決定し、結果を取得します。しかし、舞台裏ではサーバーとクライアントが調整しています：サーバーはエージェントが何をしたいかを知り、クライアントはその方法を知っています。この分離が中心的なアイデアです。

手動で配線することもできます。Reactアプリからnavigator.geolocation.getCurrentPosition()を呼び出し、結果をエージェントに送信します。しかし、その場合、モデルはその機能を発見したり、いつ呼び出すかを決定したりする方法がありません。それはアドホックなサイドチャネルとして推論ループの外側に存在します。ヘッドレスツールは、クライアントサイドのアクションを推論ループの外側ではなく内側に配置します。

これが重要な理由

利点は「ブラウザアクセス」だけではありません。スライドデッキの作成を支援するエージェントを想像してください：アクティブなスライドにジャンプし、ローカルコンテキストを読み取り、セッション全体をバックエンドに送信せずにプレゼンテーションをその場で更新できるべきです。ヘッドレスツールは、クライアントサイドの機能をエージェントループ内の実際のツールとして公開することで、そのようなインタラクションを可能にします。

一部の操作はバックエンドで正しくエミュレートできません。地理位置情報は明らかな例です—ブラウザは許可プロンプトとデバイス信号を所有しています。クリップボードアクセス、キャンバスレンダリング、ファイルピッカー、ライブUIナビゲーションはすべて、アクティブなクライアント環境に依存します。標準ツールはバックエンドサービスを介してこれらを近似できます。ヘッドレスツールは実際のものを呼び出すことができます。

しかし、ヘッドレスツールはブラウザAPIのためだけではありません。エージェントにアプリケーション固有のアクションへの安全なアクセスを提供する一般的なメカニズムです。たとえば、slidev-agent（人気のSlidevプレゼンテーションフレームワークのプラグイン）は、ヘッドレスツールを使用してユーザーのアクティブなプレゼンテーション内の特定のスライドに移動します。これはデータ検索の問題でもサーバー自動化の問題でもありません。

このパターンはプライバシーのトレードオフも変えます。エージェントメモリは常に集中型バックエンドに属する必要はありません。IndexedDBなどのブラウザストレージに支えられたヘッドレスツールを使用すると、メモリはデフォルトでローカルに留まることができます—永続的で、低レイテンシで、そのユーザーとブラウザに自然にスコープされ、リコールをサーバーサイドのデータ管理問題に変えることはありません。

コードでの仕組み

TypeScriptでは、定義と実装の分離が特に明確です。ツールを一度定義し、.implement(...)で実装を添付し、実装をフロントエンドのストリーミングフックに渡します。サーバーとクライアントは同じスキーマを共有しますが、ブラウザ固有の実行ロジックをロードするのはクライアントだけです。

// tools.ts import { tool } from "langchain";

export const geolocationGet = tool({ name: "geolocation_get", description: "ブラウザからユーザーの現在位置を取得します。", schema: z.object({}), }); // App.tsx import { useStream } from '@langchain/react';

// 共有ツール定義 import { geolocationGet as geolocationGetDefinition } from './tools';

export function App() { const stream = useStream({ // ... tools: [ // クライアント側の実際のツール実装 geolocationGetDefinition.implement(async () => { const position = await new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject), );

return { latitude: position.coords.latitude, longitude: position.coords.longitude, accuracy: position.coords.accuracy, }; }), ], });

return

...

; }

ブラウザローカルメモリ、地理位置情報、オプションの人間による承認を組み合わせたライブデモは、LangChainドキュメントでご覧いただけます。

まとめ

標準ツールはエージェントにバックエンドシステムへのアクセスを提供しました。ヘッドレスツールは、ユーザーが実際に作業する場所へのアクセスを提供します。

ユーザーはバックエンドに住んでいるわけではありません。彼らはブラウザ、アプリ、デバイスに住んでおり、そこでは最も価値のあるエージェントインタラクションの多くが発生します。ヘッドレスツールは、型付きスキーマ、明示的な機能、構造化された出力、レビュー可能性を維持しながら、それらのインタラクションを利用可能にし、エージェントがサーバーにとって便利なだけでなく、ユーザーにとってネイティブなツールを使用できるようにします。

LangChain Python または LangChain JS でヘッドレスツールを始めましょう。

@huntlovell、@colifran_、@sydneyrunkle の thoughtful なレビューとフィードバックに感謝します。

エージェントが実際に何をしているかを確認する

エージェントエンジニアリングプラットフォームであるLangSmithは、開発者がすべてのエージェントの決定をデバッグし、変更を評価し、ワンクリックでデプロイするのに役立ちます。

LangSmithを試す

デモを取得する