クイックスタート:劇作家のワークスペースのリモートMCPサーバーでブラウザのタスクを自動化

Important

劇作家のワークスペースのリモートモデルコンテキストプロトコル(MCP)サーバーはプレビュー段階です。 プレビュー機能はサービスレベル契約がなく、本番ワークロードには推奨されていません。 機能、制限、入手可能性は変わることがあります。

このクイックスタートでは、AIエージェントを劇作家のワークスペースのリモートMCPサーバーに接続します。 エージェントは管理型クラウドブラウザを使ってウェブページを開き、アクセシビリティスナップショットを検査し、ページの内容を報告し、ブラウザセッションを閉じます。

リモートMCPサーバーは、ストリーミング可能なHTTP上でブラウザ自動化ツールを提供します。 エージェント環境でPlaywrightやブラウザバイナリ、ローカルMCPサーバーをインストールする必要はありません。

このクイックスタートを完了すると、MCPクライアントがPlaywrightワークスペースに接続され、GitHub Copilot CLIやMicrosoft Foundryからエージェント駆動のブラウザタスクを実行できるようになります。

Prerequisites

  • アクティブなサブスクリプションを持つ Azure アカウント。 Azure サブスクリプションをお持ちでない場合は、開始する前に 無料アカウント を作成してください。
  • リモートMCPプレビューが有効化された Playwrightワークスペース 。
  • ワークスペーススコープの貢献者または所有者のAzure役割。 この役割はワークスペースアクセストークンを作成するために必要です。 詳細については 、「Playwrightワークスペースへのアクセス管理」をご覧ください。
  • 以下のMCPクライアントの一つ:
    • GitHub Copilot CLIでMCP対応。
    • プロジェクト接続の作成やエージェントの設定権限を持つMicrosoft Foundryプロジェクトです。

認証方法の選択

MCPクライアントがOAuthやマネージドIDをサポートしている場合、Microsoft Entra IDを使用してください。 リモートMCPサーバーはこのリソース識別子と委任されたスコープを使用します:

Resource: https://mcp.playwright.microsoft.com
Scope: https://mcp.playwright.microsoft.com/Playwright.Mcp.Tools

サーバーはOAuth保護リソースメタデータを公開します。 Visual Studio Codeを含むOAuthディスカバリーをサポートするクライアントは、ワークスペーススコープのMCPエンドポイントから認証サーバーと必要なスコープを発見できます。 サインインしたアイデンティティは、Azureロールベースアクセス制御(RBAC)を通じてPlaywrightワークスペースへのアクセス権を持つ必要があります。

MCPクライアントがMicrosoft Entra IDで認証できない場合のみワークスペースアクセストークンを使用してください。 アクセストークンは安全性が低く、デフォルトで無効化されています。

互換性のためにワークスペースアクセストークンを作成しましょう

Microsoft Entra IDを使う場合はこのセクションを飛ばしてください。 もしワークスペースでまだアクセストークン認証が有効になっていなければ:

ワークスペースアクセストークンの作成

このクイックスタートは鍵ベースの認証を使用しています。 MCPクライアントは x-api-key リクエストヘッダーにワークスペースアクセストークンを送信します。

Caution

Microsoft Entra IDは劇作家のワークスペースの推奨認証方法です。 アクセストークンは安全性が低く、デフォルトで無効化されています。 アクセストークンはパスワードのように扱いましょう。 ソース管理にコミットしたり、エージェントの命令、プロンプト、ログに含めたりしないでください。

  1. Azure portal にサインインする
  2. Playwrightの作業スペースを開いてください。
  3. 設定の中からアクセス管理を選択します。
  4. まだ選択されていない 場合は、Playwright Service Access Token のチェックボックスを選択してください。
  5. [Generate token](トークンの生成) を選択します。
  6. 名前と有効期限を入力し、トークンを生成します。
  7. トークンをすぐにコピーします。 後で価値を取り戻すことはできません。

トークンは作成したユーザーに関連付けられています。 サービスはトークン使用時にそのユーザーの現在のAzureロールベースアクセス制御(RBAC)権限を評価します。 このクイックスタートには短い有効期限を設けてください。

詳細については 、「ワークスペースアクセストークンの管理」をご覧ください。

リモートMCPエンドポイントを構築する

AzureポータルでPlaywrightワークスペースの概要ページを開きます。 ワークスペース領域とワークスペースIDを使ってリモートMCPエンドポイントを構築します。

Playwrightのワークスペース概要ページのスクリーンショットで、ワークスペースの場所とAPIベースのエンドポイントを示しています。

エンドポイントは以下の形式を使用します:

https://<region>.mcp.playwright.microsoft.com/playwrightworkspaces/<workspace-id>/mcp

例えば次が挙げられます。

https://eastus.mcp.playwright.microsoft.com/playwrightworkspaces/00000000-0000-0000-0000-000000000000/mcp

ワークスペースが展開されている地域のエンドポイントを使いましょう。

MCPクライアントを接続します

使いたいMCPクライアントを選びましょう。

GitHub Copilot CLI（コマンドラインインターフェース）

劇作家のワークスペースのリモートMCPサーバーをGitHub Copilot CLIに追加するには:

  1. GitHub Copilot CLI を開きます。
  2. 「/mcp add」と入力します。
  3. playwrightWorkspaceのようなユニークなサーバー名を入力してください。
  4. サーバータイプとして HTTP を選択してください。
  5. ここでリモートMCPエンドポイントが登場します。
  6. x-api-keyというHTTPヘッダーを追加し、ワークスペースのアクセストークンをその価値として使います。
  7. 先延べ工具は 自動 を選択します。
  8. Escキーを押してサーバーの追加を完了します。

GitHub CopilotのCLIプロンプトのスクリーンショットで、HTTPリモートMCPサーバーを追加するためのもの。

Microsoft Foundry

リモートサーバーをカスタムMCPツールとして接続します。 Foundryはワークスペースアクセストークンをプロジェクト接続に保存します。

Note

Foundryプロジェクト接続に保存されている鍵は共有プロジェクトシークレットです。 接続を利用するProjectメンバーは、トークンに関連付けられたIDと権限を使用します。 専用の最小権限トークンを使い、プロジェクトへのアクセスを制限してください。

リモートMCPサーバーに接続するには:

  1. Microsoft Foundryポータルでプロジェクトを開いてください。
  2. Build>Toolsを選択し、次にAdd tool>Custom>Model Context Protocolを選択します。
  3. playwrightWorkspace を一意の名前として入力してください。
  4. ここでリモートMCPサーバーエンドポイントが登場します。
  5. 鍵ベースの認証を選択してください。
  6. 認証情報名として x-api-key 、認証情報の価値としてワークスペースアクセストークンを入力してください。
  7. 接続を選択します。 Foundryはプロジェクトのつながりを作成します。

鍵ベースの認証を備えたリモートモデルコンテキストプロトコルツールを追加するためのMicrosoft Foundry設定のスクリーンショット。

エージェントを作成または開き、リモートMCPツールを追加し、プロジェクト接続を選択します。 統合を評価する間は、すべてのツールコールの承認を求めましょう。 承認を求めることで、各ブラウザ操作前にツール名と引数を確認できます。

現在の接続フィールドや承認動作については、「Microsoft FoundryエージェントをMCPサーバーエンドポイントに接続する」をご覧ください。

最初のブラウザタスクを実行してください

以下のプロンプトをエージェントに提出してください:

Use the Playwright workspace tools to create a browser session, open
https://example.com, inspect the page snapshot, and report the main heading
and page URL. Close the browser session when the task finishes. Always close
the session if a browser step fails.

エージェントが次の順序に従っていることを確認します。

  1. create_browser_session を呼び出し、返された browserSessionId を保持します。
  2. セッション ID と https://example.com を指定して browser_navigate を呼び出します。
  3. 同じセッション ID で browser_snapshot または browser_find を呼び出します。
  4. 例ドメイン見出しとページURLを報告します。
  5. セッションIDを使用してclose_browser_sessionを呼び出します。

成功した結果は以下の通りです:

Heading: Example Domain
URL: https://example.com/
Browser session closed.

正確な反応はエージェントやモデルによって異なります。 セッション作成結果にはライブビューURLが含まれていることもあります。 最終的な回答だけでは清掃が確定しません。 ツール呼び出し履歴を確認し、close_browser_session が成功したことを確認してください。

Caution

リモートブラウザセッションはワークスペースの容量を消費し、料金が発生する可能性があります。 作業が終わったらすぐに各セッションを終了しましょう。

リソースをクリーンアップする

クイックスタートを終えたら:

  1. エージェントが close_browser_sessionに電話したか確認してください。
  2. もしこのクイックスタート専用のPlaywrightワークスペースを作成していたら、そのリソースグループを削除してください。 保持したいリソースを含むリソースグループを削除しないでください。

次のステップ

劇作家のワークスペースのリモートMCPサーバーでブラウザを自動化

  • 最終更新: