VS CodeでのCopilotセットアップ

設定を行う前に、ディストリビューションを選択してください（Docker または npm）と認証を設定する（APIキー または OAuth 2.0）を準備してください。その後、以下に一致する設定を追加してください。

設定はプロジェクトレベルまたはユーザー設定レベル（全プロジェクトにわたって）で使用可能です。プロジェクトレベルの設定の場合、ワークスペースに.vscode/mcp.jsonファイルを作成してください。ユーザー設定レベルの設定の場合、既存のユーザー設定ファイルにMCPサーバーを追加してください。詳細はVS Code MCPドキュメントを参照してください。

Docker

APIキー

{
  "inputs": [
    {
      "type": "promptString",
      "id": "axe-api-key",
      "description": "axe MCP Server API Key",
      "password": true
    }
  ],
  "servers": {
    "axe-mcp-server": {
      "command": "docker",
      "args": [
        "run",
        "--add-host=host.docker.internal:host-gateway",
        "-i",
        "--rm",
        "-e",
        "AXE_SERVER_URL",
        "-e",
        "AXE_API_KEY",
        "dequesystems/axe-mcp-server:latest"
      ],
      "env": {
        "AXE_API_KEY": "${input:axe-api-key}"
      }
    }
  }
}

設定は安全な入力処理のために"AXE_API_KEY": "${input:axe-api-key}"を使用します。これは、サーバーが初めて起動したときにAPIキーを求めるプロンプトを表示します。

"env": {
  "AXE_API_KEY": "${input:axe-api-key}",
  "AXE_SERVER_URL": "https://your-axe-instance.example.com"
}

OAuth 2.0

設定を行う前に、認証ガイドのステップ1：認証を完了してください。

サーバーを@deque/axe-auth runで起動します。これにより、セッションが続く限り動作中のサーバーのアクセストークンが更新されます。inputsブロックは必要ありません — 資格情報は自動的にシステムのキーチェーンから取得されます。

{
  "servers": {
    "axe-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@deque/axe-auth",
        "run",
        "--",
        "docker",
        "run",
        "--add-host=host.docker.internal:host-gateway",
        "-i",
        "--rm",
        "-p",
        "127.0.0.1:9223:9223",
        "-e",
        "AXE_ACCESS_TOKEN",
        "-e",
        "AXE_TOKEN_REFRESH_PORT",
        "-e",
        "AXE_TOKEN_REFRESH_SECRET",
        "-e",
        "AXE_TOKEN_REFRESH_HOST=0.0.0.0",
        "dequesystems/axe-mcp-server:latest"
      ],
      "env": {
        "AXE_TOKEN_REFRESH_PORT": "9223"
      }
    }
  }
}

npx -y @deque/axe-auth runはコンテナを起動し、セッションの間、コンテナを監視します。現在のものが期限切れになる前に、新しく生成されたアクセス・トークンを動作中のサーバーにプッシュします。リフレッシュ・トークンは決してあなたのマシンを出ることはなく、短命のアクセス・トークンだけがサーバーに到達します。-yフラグは、非対話型シェルでnpxが通常求める最初の実行時の「進行してよろしいですか？」というプロンプトをスキップします。

残りのフラグは、そのプッシュをコンテナ内で到達可能にするために存在します。

• -p 127.0.0.1:9223:9223はサーバーのリフレッシュ・リスナーをホストループバックのみに公開し、マシンの外部インターフェースからは外しています。
• -e AXE_ACCESS_TOKEN、-e AXE_TOKEN_REFRESH_PORT、および-e AXE_TOKEN_REFRESH_SECRETは、runが生成する値をコンテナに転送します。名前だけを渡し、=valueは付けないでください。runがそれらを提供します。
• -e AXE_TOKEN_REFRESH_HOST=0.0.0.0はリスナーをコンテナのネットワークインターフェースにバインドします。公開されたポートはそこで受け渡され、コンテナのループバックには至らないため、デフォルトのループバックバインドは到達不能になります。エンドポイントを守るのはコンテナの隔離ではなく、共有されたシークレットです。

9223は一例です — あなたのマシン上の任意の空いているポートが使用できますが、AXE_TOKEN_REFRESH_PORTと-pが同じ名前で公開する必要があります。完全なリファレンスについてはトークンリフレッシュ変数を参照してください。

"args": [
  "-y",
  "@deque/axe-auth",
  "run",
  "--",
  "docker",
  "run",
  "--add-host=host.docker.internal:host-gateway",
  "-i",
  "--rm",
  "-p",
  "127.0.0.1:9223:9223",
  "-e",
  "AXE_SERVER_URL",
  "-e",
  "AXE_ACCESS_TOKEN",
  "-e",
  "AXE_TOKEN_REFRESH_PORT",
  "-e",
  "AXE_TOKEN_REFRESH_SECRET",
  "-e",
  "AXE_TOKEN_REFRESH_HOST=0.0.0.0",
  "dequesystems/axe-mcp-server:latest"
],
"env": {
  "AXE_TOKEN_REFRESH_PORT": "9223",
  "AXE_SERVER_URL": "https://your-axe-instance.example.com"
}

npm

npmディストリビューションはNode.jsで動作します。アクティブなNode.js LTSリリースを使用してください — 古いリリースはサポートされていない可能性があります。

npmディストリビューションにはChromiumブラウザが必要です — Playwright経由でインストールするか、既存のバイナリを指定してください。詳細はディストリビューションの選択を参照してください。

APIキー

ワークスペース（プロジェクトレベル）に.vscode/mcp.jsonファイルを作成するか、サーバーをユーザー設定に追加してください:

{
  "servers": {
    "axe-mcp-server": {
      "command": "npx",
      "args": ["-y", "axe-mcp-server"],
      "env": {
        "AXE_API_KEY": "your-api-key-here"
      }
    }
  }
}

OAuth 2.0

npmディストリビューションでもOAuth 2.0がサポートされています。サーバーを上記とまったく同じように@deque/axe-auth runでラップします — ポートを公開するコンテナはないため、コマンドは短く済みます。

{
  "servers": {
    "axe-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@deque/axe-auth",
        "run",
        "--",
        "npx",
        "-y",
        "axe-mcp-server"
      ],
      "env": {
        "AXE_TOKEN_REFRESH_PORT": "9223"
      }
    }
  }
}

npx -y @deque/axe-auth runはサーバーを起動し、セッションの存続期間中にそれを監視し、現在のトークンが期限切れになる前に新しく生成したアクセス・トークンを実行中のプロセスにプッシュします。ここではポート公開は必要ありません。ラップされたプロセスはAXE_TOKEN_REFRESH_PORTを直接継承し、リスナーはループバック上で待機します。9223は一例です — あなたのマシン上の任意の空きポートが機能し、この変数はオプションです: 省略するとrunがセッションのために空きポートを選択します。

完全なフローについては認証を参照してください。

秘密を安全に扱う

envブロックに資格情報をインラインする場合、そのファイルは他のシークレットと同様に扱ってください:

• 絶対にソース管理にコミットしないでください。 .vscode/mcp.jsonのようなプロジェクトレベルのファイルはリポジトリ内に存在します — それらを.gitignoreに追加するか、代わりにユーザー設定に資格情報を保持してください。
• 可能であれば、OSのキーチェーンまたは秘密マネージャーを使用する でサポートされている場合。OAuthについては、@deque/axe-authがすでにシステムキーチェーンにトークンを保存しています — 詳細は認証を参照してください。
• ファイルのアクセス権を制限する し、あなたのユーザーのみがファイルを読み取れるようにしてください（例えば、macOSやLinuxの場合、chmod 600 .vscode/mcp.jsonとして）。

MCPサーバーを起動

1. 設定を行った状態でVS Codeを開きます
2. あなたのmcp.jsonファイル内の"axe-mcp-server"エントリを見つけてください
3. サーバー設定の上に表示される「開始」ボタンをクリックしてください
4. API キー認証を設定した場合、プロンプトが表示されたら API キーを入力してください。OAuth を設定した場合、サーバーはプロンプトを表示せずに起動し、システムキーチェーンからトークンを取得します。

Copilotにプロンプトを送信

axe MCPサーバーが稼働している場合、VS CodeのCopilotチャットインターフェイスを使用できます：

1. VS CodeでCopilotチャットを開く
2. ツールの使用を許可するため、エージェントモードになっていることを確認する
3. ウェブサイトを分析し、アクセシビリティの問題を修正するためのプロンプトを送信する

Copilotを分析から修正のワークフローに導くための推奨されるカスタム手順については、AIエージェントの設定を参照してください。