Back to MCP Servers

React Aria MCP Server

Official Adobe MCP server that exposes React Aria documentation to AI coding assistants, letting them browse pages and pull markdown for accessible React UI primitives.

Developer Tools by Adobe None active
Overview

React Aria MCP is an official Adobe Model Context Protocol server that gives AI coding assistants programmatic access to the React Aria documentation. React Aria is Adobe's library of accessible, unstyled React UI primitives (buttons, comboboxes, date pickers, tables, etc.) with WCAG-compliant keyboard, focus, and screen reader behavior built in. The MCP server lets LLM agents discover available components, look up page metadata, and pull the raw markdown for any documentation page or section.

The server ships as the @react-aria/mcp npm package and is maintained inside the adobe/react-spectrum monorepo under packages/dev/mcp/react-aria. It exposes three tools: list_react_aria_pages, get_react_aria_page_info, and get_react_aria_page. Together, these let an agent enumerate the docs, scan a page's section titles, and retrieve the full markdown for a specific component or feature. Documentation content is pulled from Adobe's docs CDN, with a DOCS_CDN_BASE env var available for pointing at a local docs build during development.

The server is notable for being first-party (Adobe ships it from the same repo as React Aria itself), requires no authentication, and works with any MCP client including Cursor, VS Code, Claude Code, Codex, Gemini CLI, and Windsurf. It pairs well with Adobe's companion @react-spectrum/mcp server for teams using the Spectrum 2 design system on top of React Aria.

Tools

Tool Description
list_react_aria_pages List available pages in the React Aria docs.
get_react_aria_page_info Return page description and list of section titles for a given page.
get_react_aria_page Return full page markdown, or only the specified section.
Setup Guide

Prerequisites

  • Node.js installed locally (the server runs via npx)
  • No API key or authentication required

Run the server

npx @react-aria/mcp@latest

Generic MCP client config

Add this to your client's MCP configuration (Claude Desktop, Cursor, etc.):

{
  "mcpServers": {
    "React Aria": {
      "command": "npx",
      "args": ["@react-aria/mcp@latest"]
    }
  }
}

VS Code

code --add-mcp '{"name":"React Aria","command":"npx","args":["@react-aria/mcp@latest"]}'

Claude Code

claude mcp add react-aria npx @react-aria/mcp@latest

Local development

To point the server at a locally running docs build, set DOCS_CDN_BASE and run the local dist/index.js:

{
  "command": "node",
  "args": ["{path}/react-spectrum/packages/dev/mcp/react-aria/dist/index.js"],
  "env": { "DOCS_CDN_BASE": "http://localhost:1234" }
}
Use Cases
  • Have an AI agent scaffold an accessible combobox, date picker, or table using current React Aria APIs without hallucinating prop names.
  • Pull the exact markdown for a component page (e.g. useListBox) into the model's context before generating implementation code.
  • Look up keyboard interaction patterns and ARIA roles documented for a specific React Aria hook or component.
  • Discover what React Aria primitives exist before deciding whether to build a custom component or wrap an existing one.
  • Keep a coding assistant in sync with the latest React Aria docs instead of relying on stale training data.
Example Prompts
  • "List all the React Aria pages so I can pick the right hook for a multi-select dropdown."
  • "Get the sections of the useComboBox page in React Aria."
  • "Show me the full markdown for the DatePicker component, especially the Internationalization section."
  • "Build a fully accessible Tabs component using React Aria. Pull the docs first."
  • "Compare useListBox and useGridList from React Aria and recommend which to use for a sortable file list."
Pros
  • Official, first-party server maintained by Adobe in the same repo as React Aria itself.
  • No authentication or API key required; just npx and go.
  • Works with every major MCP client (Cursor, VS Code, Claude Code, Codex, Gemini CLI, Windsurf).
  • Small, focused tool surface (3 tools) makes it predictable for agents to use.
Limitations
  • Read-only documentation access; it cannot generate, lint, or validate component code directly.
  • Limited to React Aria docs; teams using Spectrum 2 components also need the separate @react-spectrum/mcp server.
  • No search tool, agents must list pages and pick by name rather than query the docs semantically.
Alternatives
  • @react-spectrum/mcp: Adobe's companion MCP server for the Spectrum 2 design system, also covers icons and illustrations.
  • aria-mcp (joe-watkins/aria-mcp): Community MCP server exposing the W3C WAI-ARIA specification, useful for accessibility lookups beyond React Aria.
  • HeroUI MCP: MCP server for the HeroUI component library, which is itself built on top of React Aria.