Skip to content

ai.mdx

Latest commit

 

History

History
133 lines (102 loc) · 5.36 KB

ai.mdx

File metadata and controls

133 lines (102 loc) · 5.36 KB

import {Layout} from '../../src/Layout'; import {StaticTable} from '../../src/StaticTable'; import {Command} from '../../src/Command'; import {Link, Tabs, TabList, Tab, TabPanel} from '@react-spectrum/s2'; export default Layout;

export const section = 'Guides'; export const description = 'How to use the React Aria MCP Server, Agent Skills, and more to help you build with AI.'; export const tags = ['ai', 'mcp', 'agent', 'skills', 'llms.txt', 'markdown'];

Working with AI

Learn how to use the React Aria MCP Server, Agent Skills, and more to help you build with AI.

MCP Server

Node.js must be installed on your system to run the MCP server.

CursorVS CodeClaude DesktopClaude CodeCodexGemini CLIOther Click the button to install: 
<Link href="cursor://anysphere.cursor-deeplink/mcp/install?name=React%20Aria&config=eyJjb21tYW5kIjoibnB4IEByZWFjdC1hcmlhL21jcEBsYXRlc3QifQ%3D%3D" aria-label="Add to Cursor">
  <picture>
    <source srcSet="https://cursor.com/deeplink/mcp-install-dark.svg" media="(prefers-color-scheme: light)" />
    <source srcSet="https://cursor.com/deeplink/mcp-install-light.svg"  media="(prefers-color-scheme: dark)" />
    <img src="https://cursor.com/deeplink/mcp-install-light.svg" alt="Add to Cursor" />
  </picture>
</Link>

Or follow Cursor's MCP install [guide](https://cursor.com/docs/context/mcp#installing-mcp-servers) and use the following config:

```js
{
  "mcpServers": {
    "React Aria": {
      "command": "npx",
      "args": ["@react-aria/mcp@latest"]
    }
  }
}
```
Click the button to install: 
<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">
  <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" />
</Link>

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:

<Command command='code --add-mcp &#39;{"name":"React Aria","command":"npx","args":["@react-aria/mcp@latest"]}&#39;' />

```js
{
  "mcpServers": {
    "React Aria": {
      "command": "npx",
      "args": ["@react-aria/mcp@latest"]
    }
  }
}
```
Download the extension, then open it in Claude Desktop and click Install: 
<Link href="react-aria.mcpb" download aria-label="Download for Claude Desktop">
  <img src="https://img.shields.io/badge/Claude_Desktop-Claude_Desktop?style=flat-square&label=Download%20Extension&color=D97757" alt="Download for Claude Desktop" />
</Link>

For more information, see Anthropic's [Desktop Extensions announcement](https://www.anthropic.com/engineering/desktop-extensions).
Use the Claude Code CLI to add the server: 
<Command command="claude mcp add react-aria npx @react-aria/mcp@latest" />

For more information, see the [Claude Code MCP documentation](https://docs.claude.com/en/docs/claude-code/mcp).
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](https://github.com/openai/codex/blob/main/docs/config.md#mcp_servers).
Use the Gemini CLI to add the server: 
<Command command="gemini mcp add react-aria npx @react-aria/mcp@latest" />

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).
Add the server to your MCP client configuration (the exact file and schema may depend on your client). 
```js
{
  "mcpServers": {
    "React Aria": {
      "command": "npx",
      "args": ["@react-aria/mcp@latest"]
    }
  }
}
```

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:

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.