Working with AI

Learn how to use the React Spectrum MCP Server, Agent Skills, and more to help you build with AI.

MCP Server

Pre-requisites

Node.js must be installed on your system to run the MCP server.

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

Add to Cursor

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

VS Code

Install in Visual Studio Code

Or follow VS Code's 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 the Windsurf MCP documentation and use the standard config above.

Agent Skills

Agent Skills are folders of instructions, scripts, and resources that your AI coding tool can load when relevant to help with specific tasks.

To install the React Spectrum skill, run:

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

Markdown docs

Each page in the React Spectrum documentation is also available as a standalone markdown file.

Add the .md extension to the URL to get the markdown version of a page. Additionally, each page has a "Copy for LLM" button which, when pressed, will copy the contents of the page to your clipboard as markdown text.

llms.txt

The llms.txt file contains a list of all the markdown pages available in the React Spectrum documentation.