React SpectrumをAIに正しく使わせる：MCPサーバーとスキルの接続手順

2026年6月11日

前回の React Spectrum入門の続編。今回は実践編として、React Spectrum を ClaudeやCursorなどのAIに「正しく」使わせるための公式MCPサーバーとAgent Skillの接続手順をまとめます。

なぜ接続するのか

AIにUIコードを書かせると、古いAPIや存在しないプロパティを書いてしまうことがあります。React Spectrum 公式のMCPサーバーとAgent Skillをつなぐと、AIが最新かつ正確なコンポーネント情報を参照しながら実装でき、こうした取りこぼしを減らせます。「AIに任せて作る」前提を、公式が支える形です。

1. Agent Skill を入れる

まずスキルを追加します。これでAIコーディングツールが、必要なときにReact Spectrum用の指示・リソースを読み込めるようになります。

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

2. MCPサーバーをAIツールに接続

使っているツールに合わせて、次のいずれかでMCPサーバー（@react-spectrum/mcp）を追加します。

ツール	追加方法
Claude Code（CLI）	`claude mcp add react-spectrum-s2 npx @react-spectrum/mcp@latest`
Claude Desktop	コネクター直リンク：`claude://claude.ai/directory/connectors/ant.dir.gh.adobe.s2`
Cursor	設定に `"command": "npx", "args": ["@react-spectrum/mcp@latest"]`
VS Code	`code --add-mcp '{"name":"React Spectrum (S2)","command":"npx","args":["@react-spectrum/mcp@latest"]}'`
Gemini CLI	`gemini mcp add react-spectrum-s2 npx @react-spectrum/mcp@latest`

Codex を使う場合は ~/.codex/config.toml に次を追記します。

[mcp_servers.react-spectrum-s2]
command = "npx"
args = ["@react-spectrum/mcp@latest"]

3. ドキュメントをLLMに読ませる

MCPに加えて、ドキュメントを直接AIに渡す方法も用意されています。

任意のドキュメントURLの末尾に .md を付けると、Markdown形式で取得できる。
各ページの「Copy for LLM」ボタンで、その内容をMarkdownでコピーできる。
llms.txt に、取得できるMarkdownページの一覧がまとまっている。

使う流れ（例）

接続後は、いつものように自然言語で頼むだけです。例えば Claude Code で「React Spectrum（S2）で、検索フィールド付きのデータテーブルを作って」と依頼すると、AIがMCP経由で正しいコンポーネントとプロパティを確認しながらコードを書きます。生成後は必ず動作とアクセシビリティを確認しましょう。