Claude Media
React Aria MCPをClaude Codeに登録しアクセシブルなUI部品を実装させる
Claude CodeMCPチュートリアル

React Aria MCPをClaude Codeに登録しアクセシブルなUI部品を実装させる

React Aria公式のMCPサーバーを1コマンドで登録し、Claude Codeに公式ドキュメントを引かせながらSelectやTableなどの部品を実装させる手順です。ツール3つの役割と権限設定も扱います。

読了目安 約13分

React AriaのMCPサーバーは、Claude Codeに「React Ariaの公式ドキュメントを読む手段」を渡すものです。部品のコードを生成するサーバーではありません。登録は1コマンドで済みます。そのうえで、SelectやTableの実装を頼むと、Claudeが記憶ではなく現行のドキュメントを引いてから書くようになります。

React Ariaは、Adobeが公開するアクセシビリティ重視のReact用UIライブラリです。キーボード操作やスクリーンリーダーへの対応を部品側が持つので、見た目の調整に集中できます。ここではreact-aria-componentsを使うプロジェクトを前提に、登録、権限、頼み方、つまずきの順で進めます。

前提環境

この手順を試すのに必要なものは次のとおりです。

  • Claude Code(CLI)が使える状態であること
  • Node.js 18以上。MCPサーバーをnpxで起動するため
  • 実装先のプロジェクトでreact-aria-componentsを使っている、または使う予定であること
npm install react-aria-components

既定のローカルスコープでは、登録したプロジェクトでしか有効にならないため、登録は実装するプロジェクトのディレクトリで実行します。

MCPサーバーが提供する3つのツール

@react-aria/mcpが公開するツールは3つで、どれも読み取り専用のドキュメント参照です。パッケージのREADMEにある表を、役割の順に並べ直します。

ツール入力役割
list_react_aria_pages入力includeDescription(任意)役割ドキュメントのページ一覧を返す
get_react_aria_page_info入力page_name役割ページの説明と節の見出し一覧を返す
get_react_aria_page入力page_name、section_name(任意)役割ページ全文、または指定した節だけをMarkdownで返す

コードを書いたりファイルを編集したりするツールはありません。実装するのはClaude Code本体で、MCPサーバーは仕様の取り寄せ口にあたります。

切り分け

Claudeがドキュメントを引く順番

  1. Qどのページを読むか決まっているか?
    答えがいいえ

    list_react_aria_pagesで一覧を取り、Selectなどページ名を絞り込みます。

    答えがはい
  2. Qページの中のどの節が必要か分かっているか?
    答えがいいえ

    get_react_aria_page_infoで節の見出しを見て、必要な節を選びます。

    答えがはい

節だけ読む

get_react_aria_pageにsection_nameを渡し、該当の節だけを取り込みます。

この順に引けるのは、ページ全文が長いからです。たとえばSelectのドキュメントはVanilla CSSの例、Tailwindの例、Content、Value、Forms、APIと節が分かれています。全文を毎回コンテキストに入れるより、節単位で取るほうが無駄が出ません。

MCPツールの出力には上限もあります。Claude Codeは、ツールの出力が10,000トークンを超えると警告を出し、既定では25,000トークンまでに切り詰めます。上限はMAX_MCP_OUTPUT_TOKENS環境変数で変えられますが、警告の閾値は固定です。長いページを丸ごと取る使い方は、この上限に当たりやすくなります。節単位で引けば、上限を上げる設定をしなくても収まりやすくなります。

Claude Codeに登録する

公式のAIページ(React Ariaのドキュメントにある「Working with AI」)には、Claude Code(CLI)向けに次のコマンドが載っています。

claude mcp add react-aria npx @react-aria/mcp@latest

実行にはNode.jsが必要です。パッケージのpackage.jsonではNode 18以上が指定されています。サーバーはnpxで起動するstdio型で、@latestを付けているので起動のたびに最新版が使われます。

このコマンドは、既定ではローカルスコープに登録します。登録したプロジェクトだけで有効で、自分専用の設定です。チームで同じ構成を共有したいなら、--scope projectを付けて.mcp.jsonに書き出し、リポジトリにコミットします。次は.mcp.jsonに書いた場合の一例です。

{
  "mcpServers": {
    "react-aria": {
      "command": "npx",
      "args": ["@react-aria/mcp@latest"]
    }
  }
}

JSONをそのまま登録したいときは、claude mcp add-jsonの手順が使えます。公式ページの「Claude Code (Desktop)」タブには、claude.ai/directory/connectorsのコネクタ一覧へ飛ぶリンクが置かれています。CLIで使うなら上のコマンドで足ります。

登録後は、Claude Codeの中で/mcpを実行して一覧にreact-ariaが出ているか見ます。シェルからならclaude mcp get react-ariaでも状態を確認できます。プロジェクトスコープで入れた場合は、初回にclaudeを対話モードで起動して承認する手順が挟まります。承認前はPending approvalと表示され、接続されません。

権限ルールで3ツールを許可する

初期設定のままだと、MCPツールの呼び出しごとに許可を求められます。3つとも読み取り専用なので、サーバー単位でまとめて許可しても影響は小さい構成です。.claude/settings.jsonには次のように書けます。

{
  "permissions": {
    "allow": ["mcp__react-aria__*"]
  }
}

ツールの名前はmcp__<サーバー名>__<ツール名>の形です。ここでのサーバー名は、claude mcp addで付けたreact-ariaです。別の名前で登録したなら、ルールもその名前に合わせます。許可ルールのワイルドカードは、mcp__react-aria__*のように、サーバー名まで書いたあとにだけ使えます。mcp__*のような広い書き方は許可としては効かず、警告つきで無視されます。

実装を任せるときの頼み方

MCPを登録しても、ドキュメントを引くかどうかはClaudeの判断に委ねられます。頼む文に「React Ariaのドキュメントを引いてから」と添えておけば、引く前提で動かせます。

前と後

依頼文の差

BEFORE

そのまま頼む

「ステータス選択のドロップダウンを作って」

AFTER

ドキュメントと検証を指定する

「React AriaのSelectを使って、ステータス選択を実装して。先にMCPでSelectページのContentとFormsの節を読み、その内容に沿って書くこと。終わったら型チェックを走らせて」

後者は、読む節と、実装後の検証を指定しています。ページは節ごとに分かれているので、節名を出すとClaudeが取りに行く範囲を絞れます。

節を読ませたあとに得られる実装の形

Selectページの冒頭にあるVanilla CSSの例は、次の形です。vanilla-starter/Selectはドキュメント側のスターターが提供する部品で、react-aria-componentsが直接出すものではありません。

import {Select, SelectItem} from 'vanilla-starter/Select';
 
<Select>
  <SelectItem>Aardvark</SelectItem>
  <SelectItem>Cat</SelectItem>
  <SelectItem>Dog</SelectItem>
  <SelectItem>Kangaroo</SelectItem>
  <SelectItem>Panda</SelectItem>
  <SelectItem>Snake</SelectItem>
</Select>

同じページには、このSelectを組み立てるSelect.tsxの実装も載っています。ラベルや説明文、エラーメッセージを受け取るlabel、description、errorMessageといったプロパティは、そこで定義されています。自分のプロジェクトにスターターが無い場合、Claudeは節を読んだうえで、プロジェクトの既存部品に合わせて同じ構成を組むことになります。この差を埋めるのが、次の規約の役目です。

CLAUDE.mdに書く規約

毎回の依頼文を短くしたいなら、CLAUDE.mdに規約を書いておきます。次は書き方の一例です。

## UI部品のルール
- インタラクティブなUI部品は react-aria-components を使う。自前でARIA属性を組まない。
- 実装前に react-aria MCP の get_react_aria_page で該当ページを読む。記憶で書かない。
- ラベルは必ず付ける。見える文字がない部品は aria-label を渡す。
- 実装後に型チェックとlintを実行し、結果を報告する。

最後の行が要点です。MCPが渡すのはドキュメントだけなので、書いたコードが型チェックやlintを通るかは別に確かめます。検証コマンドの実行を規約に入れておけば、その出力を読んで直す反復が自動で回ります。

スキルと組み合わせる

React Ariaの公式ページには、MCPとは別にAgent Skillも案内されています。インストールは次のコマンドです。

npx skills add https://react-aria.adobe.com

スキルは、関連する作業のときに読み込まれる指示とリソースのまとまりです。ページの内容を節単位で引く用途にはMCPが向き、使い方の指針をあらかじめ持たせる用途にはスキルが向きます。MCPとスキルは別の仕組みなので、両方を入れて使えます。

ほかの方法との使い分け

React Ariaのドキュメントは、各ページに.mdを付けるとMarkdownで取得できます。llms.txtには対象ページの一覧もあります。MCPを入れずに、Claudeへ「https://react-aria.adobe.com/Select.mdを読んで」と頼むやり方も成立します。

方法向く場面注意点
MCP向く場面複数の部品を続けて実装する。節単位で引きたい注意点登録と権限の設定が要る
.mdのURLを直接渡す向く場面1ページだけ読ませたい注意点ページ全文が毎回コンテキストに入る
スキル向く場面方針や手順を常に持たせたい注意点個別の仕様の取得には使わない

shadcn/uiのように部品そのものをプロジェクトへ追加するサーバーとは、役割が違います。そちらの手順はshadcn MCPを使ったUI部品の追加にあります。React Ariaのサーバーは仕様を読ませる側です。Angularのように、フレームワークの規約をMCPで渡す考え方はAngular CLIのMCPサーバーの記事と共通します。

動かないときの切り分け

切り分け

ツールが呼ばれないときの確認順

  1. Q/mcpの一覧にreact-ariaが出ているか?
    答えが出ていない

    登録のスコープとプロジェクトを見直します。ローカルスコープで入れたなら、登録したディレクトリでしか有効になりません。

    答えがはい
  2. Q状態がConnectedか?
    答えがPending approvalなど

    プロジェクトスコープなら、claudeを対話モードで起動して承認します。

    答えがはい
  3. QNode.jsが入っていて、npxが通るか?
    答えが通らない

    Node 18以上を入れます。公式ページもNode.jsの導入を前提条件に挙げています。

    答えがはい

呼ばれているのに結果が合わない

依頼文でページ名と節名を明示します。バージョンが古いと思うなら、@latestで起動しているか確かめます。

起動に時間がかかって接続が失敗するなら、MCP_TIMEOUTで起動待ちの上限を伸ばせます。ミリ秒指定で、MCP_TIMEOUT=10000 claudeは10秒です。

落とし穴

MCPを入れただけで部品が完成するわけではない

このサーバーはドキュメントを返すだけで、スタイルやプロジェクト固有のデザイントークンは知りません。見た目の調整や既存コンポーネントとの整合は、規約とレビューで担保します。

React Spectrum用のMCPサーバーとの違い

React Spectrum(S2)側にも、@react-spectrum/mcpというドキュメント用のMCPサーバーが別に存在します。React Ariaのreact-aria-componentsを使うなら、今回の@react-aria/mcpで足ります。どちらのドキュメントを読ませたいかで、サーバーを選びます。

README末尾には、ローカルで動くドキュメントサーバーを向けるDOCS_CDN_BASEという環境変数の説明もあります。通常の利用では設定しません。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →