Learn how to use the React Aria 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 Aria": {
"command": "npx",
"args": ["@react-aria/mcp@latest"]
}
}
}
Cursor
Or follow Cursor's MCP install guide and use the standard config above.
VS 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 Aria","command":"npx","args":["@react-aria/mcp@latest"]}'Claude Code
Use the Claude Code CLI to add the server:
claude mcp add react-aria npx @react-aria/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-aria]
command = "npx"
args = ["@react-aria/mcp@latest"]
For more information, see the Codex MCP documentation.
Gemini CLI
Use the Gemini CLI to add the server:
gemini mcp add react-aria npx @react-aria/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 Aria skill, run:
npx skills add https://react-aria.adobe.com
Markdown docs
Each page in the React Aria 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 Aria documentation.