MCP Server

Bridging the gap between AI agents and Ark UI.

The Ark UI MCP Server is a specialized Model Context Protocol server that empowers AI agents to build design system components with full knowledge of Ark UI.

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 and is published at @ark-ui/mcp.

Visual Studio Code

Make sure you have the GitHub Copilot and GitHub Copilot Chat extensions installed.

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

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

The MCP server is now ready to use. Click on Start on the MCP server.

Cursor

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

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

If Cursor doesn't automatically detect the changes, restart the editor or manually enable the Ark UI server via "MCP Tools."

Claude Code

Make sure you have Claude Code installed. Visit Anthropic docs for installation instructions.

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

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

The MCP server is now ready to use. Start a Claude Code session by running claude.

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:

{
  "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.

Zed

• Go to Settings > Open Settings

• In the settings.json file, add MCP server as a new context server

{
  "context_servers": {
    "ark-ui": {
      "source": "custom",
      "command": "npx",
      "args": ["-y", "@ark-ui/mcp"]
    }
  }
}

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.

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