@react-spectrum/mcp

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

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

Cursor

Click the button to install:

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

VS Code

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"]}'

Claude Code

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.

Codex

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.

Gemini CLI

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.

Windsurf

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.

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