MCP Server
Bridging the gap between AI agents and Chakra UI

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 componentsget_component_props
: Detailed props, types, and configuration options for any componentget_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 Proget_component_templates
: Retrieve well-designed, fully responsive, and accessible component templates from Chakra UI Pro
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 tokenstheme_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:
.vscode/mcp.json
{
"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
-
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:
.codeium/windsurf/mcp_config.json
{
"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
-
Go to Settings > Open Settings
-
In the
settings.json
file, add MCP server as a new context server
.config/zed/settings.json
{
"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
-
Get your API key from the Chakra UI Pro user menu.
-
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.