Claude Codeでのセットアップ

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
tip

ワンコマンドでセットアップしたいですか? このaxe アクセシビリティプラグインはサーバーを登録し、分析 → 修正 → 検証のワークフローを推進するスキルとスラッシュコマンドを追加します。このページでは、サーバーを手動で設定する方法について説明します。

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

Axe MCP サーバーは、プロジェクトレベルまたはユーザーレベルで追加できます:

  • プロジェクトレベル: プロジェクトのルートディレクトリに.mcp.jsonファイルを作成します(チームと設定を共有するのに最適)
  • ユーザーレベル: ホームディレクトリ内の~/.claude.jsonにあるmcpServersオブジェクトにサーバーを追加します(全てのプロジェクトで適用されます)。ユーザーレベルのサーバーはclaude mcp add --scope userコマンドで管理することもできます。詳細はClaude Code MCPドキュメンテーションをご覧ください。
info

既に他のサーバーが定義されている場合は、既存のmcpServersオブジェクト内にaxe-mcp-serverブロックを追加してください。

Docker

API キー

{
  "mcpServers": {
    "axe-mcp-server": {
      "type": "stdio",
      "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_SERVER_URL": "https://axe.deque.com",
        "AXE_API_KEY": "${AXE_API_KEY}"
      }
    }
  }
}

この設定は、"AXE_API_KEY": "${AXE_API_KEY}"を使用して安全な入力処理を行います。${AXE_API_KEY}構文で、Claude Codeにシェル環境から値を取得するよう指示します。詳細はClaude Code MCPドキュメンテーションをご参照ください。

シェルの環境変数としてAPIキーを設定します:

export AXE_API_KEY="your-api-key-here"

恒久的な設定を行うには、シェルプロファイル(~/.bashrc~/.zshrcなど)にこの行を追加します。

note

地域、プライベートクラウド、またはオンプレミスのaxeインスタンスを使用していますか? インスタンスの基本URLでenvブロック内のAXE_SERVER_URL値を更新します。

"env": {
  "AXE_API_KEY": "${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 runを使用してサーバーを起動します。

{
  "mcpServers": {
    "axe-mcp-server": {
      "type": "stdio",
      "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"
      }
    }
  }
}
note

トークン更新はv1.5.0でaxe MCPサーバーに到達しました。npx -y @deque/axe-authは常に最新のCLIを取得しますが、そのリリース前にプルされたDockerイメージは、runにプッシュするための更新リスナーがありません — docker pull dequesystems/axe-mcp-server:latestで再プルしてください。

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が同じ名前で公開する必要があります。完全なリファレンスについてはトークンリフレッシュ変数を参照してください。

note

地域別、プライベートクラウド、またはオンプレミスのAxeインスタンスを使用していますか? Add AXE_SERVER_URL to the Docker command and to the env block, alongside the refresh port:

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

ログイン時に--serverに渡したのと同じURLを使用して、axe-authが発行するトークンがサーバーが呼び出すインスタンスから来るようにします。省略された場合、サーバーはデフォルトでhttps://axe.deque.com(Dequeの共有US SaaSインスタンス)を使用します。詳細はConfiguration Referenceを参照してください。

npm

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

npm配布版にはChromiumブラウザが必要です — Playwrightを使用してインストールするか、既存のバイナリを指す設定にします。詳細はディストリビューションの選択をご覧ください。

API キー

{
  "mcpServers": {
    "axe-mcp-server": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "axe-mcp-server"],
      "env": {
        "AXE_API_KEY": "${AXE_API_KEY}"
      }
    }
  }
}

Claude Codeが環境から取得できるように、AXE_API_KEYをシェルに、上記のように設定してください。

OAuth 2.0

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

{
  "mcpServers": {
    "axe-mcp-server": {
      "type": "stdio",
      "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がセッションのために空きポートを選択します。

caution

コンテナとは異なり、npmディストリビューションはシェル環境全体を継承します。そこでAXE_API_KEYがエクスポートされている場合、それはOAuthトークンと共にサーバーに到達し、サーバーは起動を拒否します。エディタを起動するシェルでそれを解除するか、上記のDocker構成を使用してください。これにより、明示的な-eフラグで渡された変数のみを受け取ります。

完全なフローについては認証をご覧ください。

note

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

使用と検証

設定後、Claude Codeを再起動してMCPサーバーをロードします。

  1. ターミナルからClaude Codeを起動します: claude
  2. MCP サーバー接続を管理するには/mcpを入力します
  3. axe-mcp-serverが、analyzeremediateigtツールと一緒に表示されるはずです

Claude Codeの設定(推奨)

Claude Codeがaxe MCPサーバーツールを正しく使用するために、推奨される「分析→修正」ワークフローの指示を、プロジェクトのルートにあるCLAUDE.mdファイルに追加します。完全なテンプレートはAIエージェントの設定をご覧ください。