@react-spectrum/mcp

The @react-spectrum/mcp package provides a Model Context Protocol (MCP) server for React Spectrum (S2) documentation. It exposes a set of tools that MCP clients can discover and call to browse the docs, search for icons and illustrations, and more. It also bundles the React Aria docs tools, so you can browse React Aria documentation from the same server.

Installation

Quick Start

Simply run the server using npx:

npx @react-spectrum/mcp@latest

Using with an MCP client

Add the server to your MCP client configuration (the exact file and schema may depend on your client).

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

Click the button to install:

Or follow the MCP install guide and use the standard config above.

Click the button to install:

Or install manually:

Follow the MCP install guide and use the standard config above. You can also add the server using the VS Code CLI:

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

Use the Claude Code CLI to add the server:

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

For more information, see the Claude Code MCP documentation.

Create or edit the configuration file ~/.codex/config.toml and add:

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

For more information, see the Codex MCP documentation.

Use the Gemini CLI to add the server:

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

For more information, see the Gemini CLI MCP documentation.

Follow Windsurf MCP documentation and use the standard config above.

Tools

| Tool | Input | Description | | --- | --- | --- | | list_s2_pages | { includeDescription?: boolean } | List available pages in the S2 docs. | | get_s2_page_info | { page_name: string } | Return page description and list of section titles. | | get_s2_page | { page_name: string, section_name?: string } | Return full page markdown, or only the specified section. | | search_s2_icons | { terms: string \| string[] } | Search S2 workflow icon names. | | search_s2_illustrations | { terms: string \| string[] } | Search S2 illustration names. | | get_style_macro_property_values | { propertyName: string } | Return allowed values for an S2 style macro property. | | list_react_aria_pages | { includeDescription?: boolean } | List available pages in the React Aria docs. | | get_react_aria_page_info | { page_name: string } | Return page description and list of section titles. | | get_react_aria_page | { page_name: string, section_name?: string } | Return full page markdown, or only the specified section. |

Privacy Policy

See Adobe's privacy policy.

Development

Testing locally

Build the docs and MCP server locally, then start the docs server.

yarn workspace @react-spectrum/s2-docs generate:md
yarn workspace @react-spectrum/mcp build
yarn start:s2-docs

Update your MCP client configuration to use the local MCP server:

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

Bundling

To build an MCP Bundle (MCPB), first prepare the staging directory:

yarn workspace @react-spectrum/s2-docs generate:mcpb

Then validate and pack using the @anthropic-ai/mcpb CLI (paths are printed by the script above):

npx @anthropic-ai/mcpb validate <staging-dir>
npx @anthropic-ai/mcpb pack <staging-dir> <output-path>