MCP Server

<Image marginTop="0" src="/images/chakra-ui-mcp.png" alt="MCP Server" objectFit="cover" fill aspectRatio="16/9" />

The Chakra UI MCP Server is a specialized Model Context Protocol server that provides AI assistants (like Claude Code, Cursor, and Copilot) with access to the Chakra UI component library, design tokens, and migration guidance.

Tools

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

Component Tools

• list_components: Get a complete list of all available components
• get_component_props: Detailed props, types, and configuration options for any component
• get_component_example: Retrieve code examples and usage patterns

Chakra UI Pro Tools

These tools provide AI agents with access to well-designed, fully responsive, and accessible component templates from Chakra UI Pro.

• list_component_templates: List available component templates from Chakra UI Pro
• get_component_templates: Retrieve well-designed, fully responsive, and accessible component templates from Chakra UI Pro

:::note

These tools require an active Chakra UI Pro license and setting the CHAKRA_PRO_API_KEY environment variable with your API key generated from Chakra UI Pro. See the Chakra UI Pro Integration section for setup instructions.

:::

Design System Tools

• get_theme: Get a detailed list of all the design tokens
• theme_customization: Custom theme token creation and modification

Migration Tools

• v2_to_v3_code_review: Migration guidance from version 2 to version 3

Setup

The MCP server currently supports only stdio transport and is published at @chakra-ui/react-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": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-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": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

If Cursor doesn't automatically detect the changes, restart the editor or manually enable the Chakra 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 Chakra UI MCP server:

claude mcp add chakra-ui -- npx -y @chakra-ui/react-mcp

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

Windsurf

1. Navigate to "Settings" > "Windsurf Settings" > "Cascade"

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

3. Add the following to the MCP configuration file:

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

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

Zed

1. Go to Settings > Open Settings

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

{
  "context_servers": {
    "chakra-ui": {
      "source": "custom",
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-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": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

Chakra UI Pro Integration

To enable access to premium component templates from Chakra UI Pro, you'll need to configure your API key. This requires an active Chakra UI Pro license.

Setting Up Your API Key

1. Get your API key from the Chakra UI Pro user menu.

2. Add the CHAKRA_PRO_API_KEY environment variable to your MCP configuration:

For editors with env support (VS Code, Cursor, Windsurf, Zed, Custom MCP):

{
  "env": {
    "CHAKRA_PRO_API_KEY": "your_api_key_here"
  }
}

For Claude Code:

claude mcp add chakra-ui --env CHAKRA_PRO_API_KEY=your_api_key_here -- npx -y @chakra-ui/react-mcp

Once configured, the list_component_templates and get_component_templates tools will be available for accessing PRO component templates.