React Spectrum MCP Server

React Spectrum MCP Server is an official Adobe package (@react-spectrum/mcp) that exposes the React Spectrum (S2) and React Aria documentation to AI coding tools through the Model Context Protocol. It lets agents like Claude Code, Cursor, VS Code, Codex, Gemini CLI, and Windsurf look up component docs, search workflow icons and illustrations, and discover valid style macro property values while generating code that uses Adobe's design system.

The server ships nine tools covering two libraries. For React Spectrum (S2) it exposes list_s2_pages, get_s2_page_info, get_s2_page, search_s2_icons, search_s2_illustrations, and get_style_macro_property_values. For React Aria it exposes list_react_aria_pages, get_react_aria_page_info, and get_react_aria_page. Documentation is fetched from Adobe's docs CDN, with a DOCS_CDN_BASE environment variable available for pointing at a local docs build during development.

Because it is maintained by Adobe inside the official adobe/react-spectrum monorepo and distributed on npm, it is the canonical way to give an AI agent reliable, up to date context for building accessible React UIs with Spectrum 2 components. Adobe also publishes a companion @react-aria/mcp package and an Agent Skill installable via npx skills add https://react-spectrum.adobe.com.

Tools

Prerequisites

• Node.js installed on your system
• An MCP-compatible client (Claude Code, Cursor, VS Code, Codex, Gemini CLI, Windsurf)

Quick start

Run the server directly with npx:

npx @react-spectrum/mcp@latest

Claude Desktop / generic MCP client

Add this to your MCP client config:

{
  "mcpServers": {
    "React Spectrum (S2)": {
      "command": "npx",
      "args": ["@react-spectrum/mcp@latest"]
    }
  }
}

Claude Code

claude mcp add react-spectrum-s2 npx @react-spectrum/mcp@latest

VS Code

code --add-mcp '{"name":"React Spectrum (S2)","command":"npx","args":["@react-spectrum/mcp@latest"]}'

Codex

Add to ~/.codex/config.toml:

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

Local development

To point the server at a local docs build, set DOCS_CDN_BASE:

{
  "mcpServers": {
    "React Spectrum (S2)": {
      "command": "node",
      "args": ["{your path here}/react-spectrum/packages/dev/mcp/s2/dist/s2/src/index.js"],
      "env": {
        "DOCS_CDN_BASE": "http://localhost:1234"
      }
    }
  }
}

React Aria only

If you only need React Aria docs, use the companion package:

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

• Generate Spectrum 2 component code (Button, Dialog, TableView, etc.) with the agent looking up the exact prop API from get_s2_page before writing JSX.
• Find the right workflow icon or illustration to drop into a UI by name without leaving the editor, using search_s2_icons and search_s2_illustrations.
• Build layouts with the S2 style macro and have the agent validate property values via get_style_macro_property_values instead of guessing.
• Author accessible custom components on top of React Aria primitives, with the agent pulling hook docs through get_react_aria_page.
• Migrate an app from React Spectrum v3 to S2 with the agent cross referencing both libraries' docs in one session.

• "Build a Spectrum 2 settings form with a TextField, a Picker, and a Switch, and use get_s2_page to confirm the current prop names."
• "Find a Spectrum workflow icon related to 'export' and add it to the toolbar button."
• "What style macro values are valid for padding and backgroundColor? Generate a Card layout using them."
• "Show me how to build a custom accessible combobox using React Aria's useComboBox hook."
• "List all React Spectrum S2 pages so I can decide which components to use for a data table view."

• Officially maintained by Adobe inside the adobe/react-spectrum monorepo, so docs stay in sync with releases.
• Covers both React Spectrum (S2) and React Aria, including icon and illustration search plus style macro values.
• Zero auth and zero config: a single npx command is enough, no API keys required.
• Supports a local docs build via DOCS_CDN_BASE for contributors working on the library itself.

• Read only: the server exposes documentation lookup tools, it cannot scaffold components or modify your project.
• Focused on Spectrum 2 (S2); coverage of the older React Spectrum v3 components is more limited.
• Requires Node.js and npx access in the environment where the MCP client runs.

• @react-aria/mcp: Adobe's standalone MCP server for just the React Aria documentation.
• pkoch73/spectrum-mcp: community Spectrum 2 MCP server with all components bundled as static data and deployed on Cloudflare Workers.
• facebook/react react-mcp-server: React Compiler team's MCP server, useful alongside Spectrum for general React work.