# MCP Server

URL: https://ark-ui.com/docs/ai/mcp-server
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/ai/mcp-server.mdx

Bridging the gap between AI agents and Ark UI.

---

The Ark UI MCP Server is a specialized [Model Context Protocol](https://modelcontextprotocol.io/introduction) server
that empowers AI agents to build design system components with full knowledge of Ark UI.

<img src="/images/ark-mcp.png" alt="Ark UI MCP Server" width="100%" height="420px" style={{ borderRadius: '10px' }} />

It works with tools like Claude Code, Cursor, and Copilot to generate code and apply design system logic consistently
across React, Vue, Solid, and Svelte.

## Tools

The Ark UI MCP exposes the following tools to AI agents:

- **`list_components`**: Returns a full list of all available components
- **`list_examples`**: Lists various component examples
- **`get_example`**: Retrieves code examples and usage patterns
- **`styling_guide`**: Provides styling guidelines for components (data attributes and CSS variables)

## Setup

The MCP server currently supports only
[stdio transport](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio) and is published at
`@ark-ui/mcp`.

### Visual Studio Code

> Make sure you have the [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) and
> [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) extensions installed.

- In the `.vscode/mcp.json` file at the root of your project, add the MCP server block:

```json title=".vscode/mcp.json"
{
  "servers": {
    "ark-ui": {
      "command": "npx",
      "args": ["-y", "@ark-ui/mcp"]
    }
  }
}
```

- The MCP server is now ready to use. Click the **"Start"** button in the `mcp.json` file.

- Start a new chat VSCode Copilot like _"Build me a checkbox with ark ui"_

### Cursor

- In the `.cursor/mcp.json` file at the root of your project, add the following configuration:

```json
{
  "mcpServers": {
    "ark-ui": {
      "command": "npx",
      "args": ["-y", "@ark-ui/mcp"]
    }
  }
}
```

- Go to **Settings** > **Cursor Settings** > **MCP & Integrations** and enable the Ark UI server.

- Start a new chat Cursor chat like _"Build me a checkbox with ark ui"_

### Claude Code

> Make sure you have Claude Code installed. Visit [Anthropic docs](https://docs.anthropic.com/en/docs/claude-code/mcp)
> for installation instructions.

- Run the following command in your terminal to add the Ark UI MCP server:

```bash
claude mcp add ark-ui -- npx -y @ark-ui/mcp
```

- Start a Claude Code session by running `claude`

- Type a prompt like _"Build me a checkbox with ark ui"_

### Windsurf

- Navigate to **Settings** > **Windsurf Settings** > **Cascade**

- Click the **Manage MCPs** button, then click the **"View raw config"** button.

- Add the following to the MCP configuration file:

```json title=".codeium/windsurf/mcp_config.json"
{
  "mcpServers": {
    "ark-ui": {
      "command": "npx",
      "args": ["-y", "@ark-ui/mcp"]
    }
  }
}
```

> You might need to click the **Refresh** button to see the MCP server in the list.

- Start a new chat Windsurf like _"Build me a checkbox with ark ui"_

### Zed

- Go to **Settings** > **Open Settings**

- In the `settings.json` file, add MCP server as a new **context server**:

```json title=".config/zed/settings.json"
{
  "context_servers": {
    "ark-ui": {
      "source": "custom",
      "command": "npx",
      "args": ["-y", "@ark-ui/mcp"]
    }
  }
}
```

- Start a new chat Zed like _"Build me a checkbox with ark ui"_

### Custom MCP Client

To run the MCP server in a local or development environment using a custom MCP client, you need to add the MCP server to
the client's configuration file.

```json
{
  "mcpServers": {
    "ark-ui": {
      "command": "npx",
      "args": ["-y", "@ark-ui/mcp"]
    }
  }
}
```