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 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:

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

• 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:

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

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

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