Skip to content

Commit 58bbf44

Browse files
devongovettdevongovett
committed
Merge branch 'main' of github.com:adobe/react-spectrum
2 parents 8df1873 + 8c16aa1 commit 58bbf44

2 files changed

Lines changed: 176 additions & 140 deletions

File tree

‎packages/dev/s2-docs/pages/react-aria/ai.mdx‎

Lines changed: 88 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Layout} from '../../src/Layout';
22
import {StaticTable} from '../../src/StaticTable';
33
import {Command} from '../../src/Command';
4-
import {Link} from '@react-spectrum/s2';
4+
import {Link, Tabs, TabList, Tab, TabPanel} from '@react-spectrum/s2';
55
export default Layout;
66

77
export const section = 'Guides';
@@ -14,78 +14,96 @@ export const tags = ['ai', 'mcp', 'agent', 'skills', 'llms.txt', 'markdown'];
1414

1515
## MCP Server
1616

17-
### Pre-requisites
18-
1917
[Node.js](https://nodejs.org/) must be installed on your system to run the MCP server.
2018

21-
### Using with an MCP client
22-
23-
Add the server to your MCP client configuration (the exact file and schema may depend on your client).
24-
25-
```js
26-
{
27-
"mcpServers": {
28-
"React Aria": {
29-
"command": "npx",
30-
"args": ["@react-aria/mcp@latest"]
19+
<Tabs aria-label="MCP Clients" density="compact">
20+
<TabList><Tab id="cursor">Cursor</Tab><Tab id="vscode">VS Code</Tab><Tab id="claude-code">Claude Code</Tab><Tab id="codex">Codex</Tab><Tab id="gemini-cli">Gemini CLI</Tab><Tab id="other">Other</Tab></TabList>
21+
<TabPanel id="cursor">
22+
Click the button to install:
23+
24+
<Link href="cursor://anysphere.cursor-deeplink/mcp/install?name=React%20Aria&config=eyJjb21tYW5kIjoibnB4IEByZWFjdC1hcmlhL21jcEBsYXRlc3QifQ%3D%3D" aria-label="Add to Cursor">
25+
<picture>
26+
<source srcSet="https://cursor.com/deeplink/mcp-install-dark.svg" media="(prefers-color-scheme: light)" />
27+
<source srcSet="https://cursor.com/deeplink/mcp-install-light.svg" media="(prefers-color-scheme: dark)" />
28+
<img src="https://cursor.com/deeplink/mcp-install-light.svg" alt="Add to Cursor" />
29+
</picture>
30+
</Link>
31+
32+
Or follow Cursor's MCP install [guide](https://cursor.com/docs/context/mcp#installing-mcp-servers) and use the following config:
33+
34+
```js
35+
{
36+
"mcpServers": {
37+
"React Aria": {
38+
"command": "npx",
39+
"args": ["@react-aria/mcp@latest"]
40+
}
41+
}
3142
}
32-
}
33-
}
34-
```
35-
36-
### Cursor
37-
38-
<Link href="cursor://anysphere.cursor-deeplink/mcp/install?name=React%20Aria&config=eyJjb21tYW5kIjoibnB4IEByZWFjdC1hcmlhL21jcEBsYXRlc3QifQ%3D%3D" aria-label="Add to Cursor">
39-
<picture>
40-
<source srcSet="https://cursor.com/deeplink/mcp-install-dark.svg" media="(prefers-color-scheme: light)" />
41-
<source srcSet="https://cursor.com/deeplink/mcp-install-light.svg" media="(prefers-color-scheme: dark)" />
42-
<img src="https://cursor.com/deeplink/mcp-install-light.svg" alt="Add to Cursor" />
43-
</picture>
44-
</Link>
45-
46-
Or follow Cursor's MCP install [guide](https://cursor.com/docs/context/mcp#installing-mcp-servers) and use the standard config above.
47-
48-
### VS Code
49-
50-
<Link href="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%40latest%22%5D%7D" aria-label="Add to Visual Studio Code">
51-
<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in Visual Studio Code" />
52-
</Link>
53-
54-
Or follow VS Code's 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:
55-
56-
<Command command='code --add-mcp &#39;{"name":"React Aria","command":"npx","args":["@react-aria/mcp@latest"]}&#39;' />
57-
58-
### Claude Code
59-
60-
Use the Claude Code CLI to add the server:
61-
62-
<Command command="claude mcp add react-aria npx @react-aria/mcp@latest" />
63-
64-
For more information, see the [Claude Code MCP documentation](https://docs.claude.com/en/docs/claude-code/mcp).
65-
66-
### Codex
67-
68-
Create or edit the configuration file `~/.codex/config.toml` and add:
69-
70-
```
71-
[mcp_servers.react-aria]
72-
command = "npx"
73-
args = ["@react-aria/mcp@latest"]
74-
```
75-
76-
For more information, see the [Codex MCP documentation](https://github.com/openai/codex/blob/main/docs/config.md#mcp_servers).
77-
78-
### Gemini CLI
79-
80-
Use the Gemini CLI to add the server:
81-
82-
<Command command="gemini mcp add react-aria npx @react-aria/mcp@latest" />
83-
84-
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).
85-
86-
### Windsurf
87-
88-
Follow the Windsurf MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp) and use the standard config above.
43+
```
44+
</TabPanel>
45+
<TabPanel id="vscode">
46+
Click the button to install:
47+
48+
<Link href="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%40latest%22%5D%7D" aria-label="Add to Visual Studio Code">
49+
<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in Visual Studio Code" />
50+
</Link>
51+
52+
Or follow VS Code's MCP install [guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) and use the following config. You can also add the server using the VS Code CLI:
53+
54+
<Command command='code --add-mcp &#39;{"name":"React Aria","command":"npx","args":["@react-aria/mcp@latest"]}&#39;' />
55+
56+
```js
57+
{
58+
"mcpServers": {
59+
"React Aria": {
60+
"command": "npx",
61+
"args": ["@react-aria/mcp@latest"]
62+
}
63+
}
64+
}
65+
```
66+
</TabPanel>
67+
<TabPanel id="claude-code">
68+
Use the Claude Code CLI to add the server:
69+
70+
<Command command="claude mcp add react-aria npx @react-aria/mcp@latest" />
71+
72+
For more information, see the [Claude Code MCP documentation](https://docs.claude.com/en/docs/claude-code/mcp).
73+
</TabPanel>
74+
<TabPanel id="codex">
75+
Create or edit the configuration file `~/.codex/config.toml` and add:
76+
77+
```
78+
[mcp_servers.react-aria]
79+
command = "npx"
80+
args = ["@react-aria/mcp@latest"]
81+
```
82+
83+
For more information, see the [Codex MCP documentation](https://github.com/openai/codex/blob/main/docs/config.md#mcp_servers).
84+
</TabPanel>
85+
<TabPanel id="gemini-cli">
86+
Use the Gemini CLI to add the server:
87+
88+
<Command command="gemini mcp add react-aria npx @react-aria/mcp@latest" />
89+
90+
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).
91+
</TabPanel>
92+
<TabPanel id="other">
93+
Add the server to your MCP client configuration (the exact file and schema may depend on your client).
94+
95+
```js
96+
{
97+
"mcpServers": {
98+
"React Aria": {
99+
"command": "npx",
100+
"args": ["@react-aria/mcp@latest"]
101+
}
102+
}
103+
}
104+
```
105+
</TabPanel>
106+
</Tabs>
89107

90108
## Agent Skills
91109

‎packages/dev/s2-docs/pages/s2/ai.mdx‎

Lines changed: 88 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Layout} from '../../src/Layout';
22
import {StaticTable} from '../../src/StaticTable';
33
import {Command} from '../../src/Command';
4-
import {Link} from '@react-spectrum/s2';
4+
import {Link, Tabs, TabList, Tab, TabPanel} from '@react-spectrum/s2';
55
export default Layout;
66

77
export const section = 'Guides';
@@ -14,78 +14,96 @@ export const tags = ['ai', 'mcp', 'agent', 'skills', 'llms.txt', 'markdown'];
1414

1515
## MCP Server
1616

17-
### Pre-requisites
18-
1917
[Node.js](https://nodejs.org/) must be installed on your system to run the MCP server.
2018

21-
### Using with an MCP client
22-
23-
Add the server to your MCP client configuration (the exact file and schema may depend on your client).
24-
25-
```js
26-
{
27-
"mcpServers": {
28-
"React Spectrum (S2)": {
29-
"command": "npx",
30-
"args": ["@react-spectrum/mcp@latest"]
19+
<Tabs aria-label="MCP Clients" density="compact">
20+
<TabList><Tab id="cursor">Cursor</Tab><Tab id="vscode">VS Code</Tab><Tab id="claude-code">Claude Code</Tab><Tab id="codex">Codex</Tab><Tab id="gemini-cli">Gemini CLI</Tab><Tab id="other">Other</Tab></TabList>
21+
<TabPanel id="cursor">
22+
Click the button to install:
23+
24+
<Link href="cursor://anysphere.cursor-deeplink/mcp/install?name=React%20Spectrum%20(S2)&config=eyJjb21tYW5kIjoibnB4IEByZWFjdC1zcGVjdHJ1bS9tY3BAbGF0ZXN0In0%3D" aria-label="Add to Cursor">
25+
<picture>
26+
<source srcSet="https://cursor.com/deeplink/mcp-install-dark.svg" media="(prefers-color-scheme: light)" />
27+
<source srcSet="https://cursor.com/deeplink/mcp-install-light.svg" media="(prefers-color-scheme: dark)" />
28+
<img src="https://cursor.com/deeplink/mcp-install-light.svg" alt="Add to Cursor" />
29+
</picture>
30+
</Link>
31+
32+
Or follow Cursor's MCP install [guide](https://cursor.com/docs/context/mcp#installing-mcp-servers) and use the following config:
33+
34+
```js
35+
{
36+
"mcpServers": {
37+
"React Spectrum (S2)": {
38+
"command": "npx",
39+
"args": ["@react-spectrum/mcp@latest"]
40+
}
41+
}
3142
}
32-
}
33-
}
34-
```
35-
36-
### Cursor
37-
38-
<Link href="cursor://anysphere.cursor-deeplink/mcp/install?name=React%20Spectrum%20(S2)&config=eyJjb21tYW5kIjoibnB4IEByZWFjdC1zcGVjdHJ1bS9tY3BAbGF0ZXN0In0%3D" aria-label="Add to Cursor">
39-
<picture>
40-
<source srcSet="https://cursor.com/deeplink/mcp-install-dark.svg" media="(prefers-color-scheme: light)" />
41-
<source srcSet="https://cursor.com/deeplink/mcp-install-light.svg" media="(prefers-color-scheme: dark)" />
42-
<img src="https://cursor.com/deeplink/mcp-install-light.svg" alt="Add to Cursor" />
43-
</picture>
44-
</Link>
45-
46-
Or follow Cursor's MCP install [guide](https://cursor.com/docs/context/mcp#installing-mcp-servers) and use the standard config above.
47-
48-
### VS Code
49-
50-
<Link href="vscode:mcp/install?%7B%22name%22%3A%22React%20Spectrum%20(S2)%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40react-spectrum%2Fmcp%40latest%22%5D%7D" aria-label="Add to Visual Studio Code">
51-
<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in Visual Studio Code" />
52-
</Link>
53-
54-
Or follow VS Code's 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:
55-
56-
<Command command='code --add-mcp &#39;{"name":"React Spectrum (S2)","command":"npx","args":["@react-spectrum/mcp@latest"]}&#39;' />
57-
58-
### Claude Code
59-
60-
Use the Claude Code CLI to add the server:
61-
62-
<Command command="claude mcp add react-spectrum-s2 npx @react-spectrum/mcp@latest" />
63-
64-
For more information, see the [Claude Code MCP documentation](https://docs.claude.com/en/docs/claude-code/mcp).
65-
66-
### Codex
67-
68-
Create or edit the configuration file `~/.codex/config.toml` and add:
69-
70-
```
71-
[mcp_servers.react-spectrum-s2]
72-
command = "npx"
73-
args = ["@react-spectrum/mcp@latest"]
74-
```
75-
76-
For more information, see the [Codex MCP documentation](https://github.com/openai/codex/blob/main/docs/config.md#mcp_servers).
77-
78-
### Gemini CLI
79-
80-
Use the Gemini CLI to add the server:
81-
82-
<Command command="gemini mcp add react-spectrum-s2 npx @react-spectrum/mcp@latest" />
83-
84-
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).
85-
86-
### Windsurf
87-
88-
Follow the Windsurf MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp) and use the standard config above.
43+
```
44+
</TabPanel>
45+
<TabPanel id="vscode">
46+
Click the button to install:
47+
48+
<Link href="vscode:mcp/install?%7B%22name%22%3A%22React%20Spectrum%20(S2)%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40react-spectrum%2Fmcp%40latest%22%5D%7D" aria-label="Add to Visual Studio Code">
49+
<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in Visual Studio Code" />
50+
</Link>
51+
52+
Or follow VS Code's MCP install [guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) and use the following config. You can also add the server using the VS Code CLI:
53+
54+
<Command command='code --add-mcp &#39;{"name":"React Spectrum (S2)","command":"npx","args":["@react-spectrum/mcp@latest"]}&#39;' />
55+
56+
```js
57+
{
58+
"mcpServers": {
59+
"React Spectrum (S2)": {
60+
"command": "npx",
61+
"args": ["@react-spectrum/mcp@latest"]
62+
}
63+
}
64+
}
65+
```
66+
</TabPanel>
67+
<TabPanel id="claude-code">
68+
Use the Claude Code CLI to add the server:
69+
70+
<Command command="claude mcp add react-spectrum-s2 npx @react-spectrum/mcp@latest" />
71+
72+
For more information, see the [Claude Code MCP documentation](https://docs.claude.com/en/docs/claude-code/mcp).
73+
</TabPanel>
74+
<TabPanel id="codex">
75+
Create or edit the configuration file `~/.codex/config.toml` and add:
76+
77+
```
78+
[mcp_servers.react-spectrum-s2]
79+
command = "npx"
80+
args = ["@react-spectrum/mcp@latest"]
81+
```
82+
83+
For more information, see the [Codex MCP documentation](https://github.com/openai/codex/blob/main/docs/config.md#mcp_servers).
84+
</TabPanel>
85+
<TabPanel id="gemini-cli">
86+
Use the Gemini CLI to add the server:
87+
88+
<Command command="gemini mcp add react-spectrum-s2 npx @react-spectrum/mcp@latest" />
89+
90+
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).
91+
</TabPanel>
92+
<TabPanel id="other">
93+
Add the server to your MCP client configuration (the exact file and schema may depend on your client).
94+
95+
```js
96+
{
97+
"mcpServers": {
98+
"React Spectrum (S2)": {
99+
"command": "npx",
100+
"args": ["@react-spectrum/mcp@latest"]
101+
}
102+
}
103+
}
104+
```
105+
</TabPanel>
106+
</Tabs>
89107

90108
## Agent Skills
91109

0 commit comments

Comments
 (0)