Skip to content
Open
Show file tree
Hide file tree
Changes from 4 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.

23 changes: 4 additions & 19 deletions packages/dev/mcp/package.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
{
"name": "@react-spectrum/mcp",
"name": "mcp-packages",
"private": true,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not have these be shared? is the code just inlined when bundled right now such that you don't need a shared package?
the project structure is a bit odd as a result

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where would the dependencies go without a shared package? I guess one option is to have the shared code in one of the two packages, but it seemed better to have an internal shared one.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

right, but the structure is weird as it is right now

  • this package is private
  • this package is inside of a 'src' directory
  • modules imported from this package are referenced via a relative path instead of from the package workspace name

this is why i asked if the code was being inlined instead of actually shared

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've improved the structure to avoid confusion. I think this is what we want:

  • mcp-shared is a private package
  • @react-spectrum/mcp and @react-aria/mcp import from there using relative paths

I'm not sure about outputing src/ in the dist folder. Would that be a tsconfig.json setting?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is a private package
import from there using relative paths

why?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think these packages are bundled right now, just compiled with tsc.

"version": "0.1.0",
"description": "MCP server for React Spectrum (S2) and React Aria documentation",
"description": "Shared code for MCP servers",
"type": "module",
"bin": "dist/index.js",
"scripts": {
"prepublishOnly": "yarn build",
"build": "node ./scripts/build-data.mjs && tsc -p tsconfig.json",
"start": "node dist/index.js",
"dev": "node --enable-source-maps dist/index.js"
},
"dependencies": {
"@modelcontextprotocol/sdk": "^1.17.3",
"@swc/helpers": "^0.5.0",
Expand All @@ -19,13 +13,6 @@
"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"
Expand All @@ -38,7 +25,5 @@
"dist",
"src"
],
"sideEffects": [
"*.css"
]
"sideEffects": false
}
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"
}
}
}
}
```
Loading