@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.

Installation

Quick Start

Simply run the server using npx:

bash

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).

json

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

<details> <summary>Cursor</summary>

Click the button to install:

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

</details> <details> <summary>VS Code</summary>

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:

bash

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

</details> <details> <summary>Claude Code</summary>

Use the Claude Code CLI to add the server:

bash

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

For more information, see the Claude Code MCP documentation.

</details> <details> <summary>Codex</summary>

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

toml

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

For more information, see the Codex MCP documentation.

</details> <details> <summary>Gemini CLI</summary>

Use the Gemini CLI to add the server:

bash

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

For more information, see the Gemini CLI MCP documentation.

</details> <details> <summary>Windsurf</summary>

Follow Windsurf MCP documentation and use the standard config above.

</details>

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.

Development

Testing locally

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

bash

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:

json

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