Skip to content
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,8 @@ export default [{
"packages/dev/parcel-transformer-storybook/*",
"packages/dev/storybook-builder-parcel/*",
"packages/dev/storybook-react-parcel/*",
"packages/dev/s2-docs/pages/**"
"packages/dev/s2-docs/pages/**",
"packages/dev/mcp/*/dist"
],
}, ...compat.extends("eslint:recommended"), {
plugins: {
Expand Down
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
"build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
"start:s2-docs": "yarn workspace @react-spectrum/s2-docs start",
"build:s2-docs": "yarn workspace @react-spectrum/s2-docs build",
"build:mcp": "yarn workspace @react-spectrum/mcp build",
"start:mcp": "yarn workspace @react-spectrum/s2-docs generate:md && yarn workspace @react-spectrum/mcp build && node packages/dev/mcp/dist/index.js",
"build:mcp": "yarn workspace @react-spectrum/mcp build && yarn workspace @react-aria/mcp build",
"start:mcp": "yarn workspace @react-spectrum/s2-docs generate:md && yarn build:mcp && node packages/dev/mcp/s2/dist/index.js && node packages/dev/mcp/react-aria/dist/index.js",
"test:mcp": "yarn build:s2-docs && yarn build:mcp && node packages/dev/mcp/scripts/smoke-list-pages.mjs",
"test": "cross-env STRICT_MODE=1 VIRT_ON=1 yarn jest",
"test:lint": "node packages/**/*.test-lint.js",
Expand Down Expand Up @@ -66,6 +66,8 @@
"packages/react-aria",
"packages/react-aria-components",
"packages/tailwindcss-react-aria-components",
"packages/dev/mcp/s2",
"packages/dev/mcp/react-aria",
"packages/*/*"
],
"devDependencies": {
Expand Down
172 changes: 0 additions & 172 deletions packages/dev/mcp/README.md

This file was deleted.

138 changes: 138 additions & 0 deletions packages/dev/mcp/react-aria/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
# @react-aria/mcp

The `@react-aria/mcp` package provides a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) server for React Aria documentation. It exposes a set of tools that MCP clients can discover and call to browse the docs.

## Installation

### Quick Start

Simply run the server using npx:

```bash
npx @react-aria/mcp
```

### 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 Aria": {
"command": "npx",
"args": ["@react-aria/mcp"]
}
}
}
```

<details>
<summary>Cursor</summary>

#### Click the button to install:

[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](cursor://anysphere.cursor-deeplink/mcp/install?name=React%20Aria&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJAcmVhY3QtYXJpYS9tY3AiXX0%3D)

Or follow the MCP install [guide](https://docs.cursor.com/en/context/mcp#installing-mcp-servers) and use the standard config above.

</details>

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

#### Click the button to install:

[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](vscode:mcp/install?%7B%22name%22%3A%22React%20Aria%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40react-aria%2Fmcp%22%5D%7D)

#### Or install manually:

Follow the MCP install [guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) and use the standard config above. You can also add the server using the VS Code CLI:

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

</details>

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

Use the Claude Code CLI to add the server:

```bash
claude mcp add react-aria npx @react-aria/mcp
```
For more information, see the [Claude Code MCP documentation](https://docs.claude.com/en/docs/claude-code/mcp).
</details>

<details>
<summary>Codex</summary>

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

```toml
[mcp_servers.react-aria]
command = "npx"
args = ["@react-aria/mcp"]
```

For more information, see the [Codex MCP documentation](https://github.com/openai/codex/blob/main/docs/config.md#mcp_servers).

</details>

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

Use the Gemini CLI to add the server:

```bash
gemini mcp add react-aria npx @react-aria/mcp
```

For more information, see the [Gemini CLI MCP documentation](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#how-to-set-up-your-mcp-server).

</details>

<details>
<summary>Windsurf</summary>

Follow Windsurf MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp) and use the standard config above.

</details>

## Tools

| Tool | Input | Description |
| --- | --- | --- |
| `list_react_aria_pages` | `{ includeDescription?: boolean }` | List available pages in the React Aria docs. |
| `get_react_aria_page_info` | `{ page_name: string }` | Return page description and list of section titles. |
| `get_react_aria_page` | `{ page_name: string, section_name?: string }` | Return full page markdown, or only the specified section. |

## 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-aria/mcp build
yarn start:s2-docs
```

Update your MCP client configuration to use the local MCP server:

```json
{
"mcpServers": {
"React Aria": {
"command": "node",
"args": ["{your path here}/react-spectrum/packages/dev/mcp/react-aria/dist/index.js"],
"env": {
"DOCS_CDN_BASE": "http://localhost:1234"
}
}
}
}
```
41 changes: 41 additions & 0 deletions packages/dev/mcp/react-aria/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
{
"name": "@react-aria/mcp",
"version": "0.1.0",
"description": "MCP server for React Aria documentation",
"type": "module",
"bin": "dist/react-aria/src/index.js",
"scripts": {
"prepublishOnly": "yarn build",
"build": "tsc -p tsconfig.json",
"start": "node dist/react-aria/src/index.js",
"dev": "node --enable-source-maps dist/react-aria/src/index.js"
},
"dependencies": {
"@modelcontextprotocol/sdk": "^1.17.3",
"@swc/helpers": "^0.5.0",
"zod": "^3.23.8"
},
"devDependencies": {
"typescript": "^5.8.2"
},
"engines": {
"node": ">=18"
},
"license": "Apache-2.0",
"publishConfig": {
"access": "public"
},
"repository": {
"type": "git",
"url": "https://github.com/adobe/react-spectrum"
},
"files": [
"dist",
"src"
],
"sideEffects": false,
"main": "dist/main.js",
"module": "dist/module.js",
"types": "dist/types.d.ts",
"source": "src/index.ts"
}
Loading