VS CodeでのCopilotセットアップ

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

設定を行う前に、ディストリビューションを選択してください（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キーを求めるプロンプトを表示します。

note

地域専用、プライベートクラウド、またはオンプレミスのaxeインスタンスを利用していますか？ あなたのインスタンスの基本URLとともにAXE_SERVER_URLをenvブロックに追加してください:

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

省略した場合、サーバーはデフォルトでhttps://axe.deque.com（Dequeの共有US SaaSインスタンス）を使用します。詳細は設定リファレンスを参照してください。

OAuth 2.0

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

これにより、サーバーが起動するたびに新しいアクセス トークンが@deque/axe-auth tokenで取得されます。inputsブロックは不要です — トークンは自動的にシステムキーチェーンから取得されます。

{
  "servers": {
    "axe-mcp-server": {
      "command": "sh",
      "args": [
        "-c",
        "docker run --add-host=host.docker.internal:host-gateway -i --rm -e \"AXE_ACCESS_TOKEN=$(npx -y @deque/axe-auth token)\" dequesystems/axe-mcp-server:latest"
      ]
    }
  }
}
note

地域別、プライベートクラウド、またはオンプレミスのAxeインスタンスを使用していますか？ Add AXE_SERVER_URL to the Docker command and an env block with your instance's base URL:

"args": [
  "-c",
  "docker run --add-host=host.docker.internal:host-gateway -i --rm -e AXE_SERVER_URL -e \"AXE_ACCESS_TOKEN=$(npx -y @deque/axe-auth token)\" dequesystems/axe-mcp-server:latest"
],
"env": {
  "AXE_SERVER_URL": "https://your-axe-instance.example.com"
}

省略した場合、サーバーはデフォルトでhttps://axe.deque.com（Dequeの共有US SaaSインスタンス）を使用します。詳細はConfiguration Referenceをご覧ください。

note

この構成ではsh -cを使用してシェルの置換を許可します。$(npx -y @deque/axe-auth token)はサーバーの起動時に実行され、有効なアクセストークンをDockerコンテナに注入します。-yフラグは、npxが対話型でないシェルで通常尋ねる「続行してもよろしいですか？」という初回実行時のプロンプトをスキップします。AXE_API_KEYをAXE_ACCESS_TOKENと一緒に設定しないでください。

caution

Windowsユーザーへ： この構成はPOSIXシェル（sh）とコマンド置換（$(...)）を使用しますが、これはcmd.exeやPowerShellではデフォルトで利用できません。Git BashやWSLシェルからエディターを実行して、shがPATHにあるようにしてください。

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"
      }
    }
  }
}
caution

設定にはenvブロックに資格情報が含まれています。.vscode/mcp.jsonのようなプロジェクトレベルのファイルはリポジトリ内に保存されます — それらを.gitignoreに追加するか、代わりにユーザー設定に資格情報を保存してください。以下の秘密を安全に扱うを参照してください。

OAuth 2.0

npmディストリビューションでもOAuth 2.0がサポートされています — AXE_API_KEYの代わりにAXE_ACCESS_TOKENを設定し、起動時に@deque/axe-auth tokenから新しいトークンを注入します。フルフローは認証を参照してください。

note

AXE_API_KEYかAXE_ACCESS_TOKENのどちらか一方を設定してください。両方の変数を設定すると、サーバーは起動時に失敗します。

秘密を安全に扱う

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エージェントの設定を参照してください。

Is this page helpful?

Help us improve this page

Still need help?