RELATED 01
Blade MCP
OFFICIAL SERVERServes Razorpay's Blade design system docs and scaffolding to coding assistants building React UIs
664GitHub stars
3.1k/wknpm downloads
69popularity score
Chakra UI MCP Server
Gives an assistant Chakra UI component props, examples, theme tokens and v2-to-v3 migration help
Official · Chakra TypeScript Local · stdio Developer toolsKnowledge and memoryDesign
72 popularity score ★ 41k ↓ 3.0k/wk
Connect your client
Local (npm)
Add in one click
Opens the app, which asks before it adds the server.
Or add it by command or config
Claude CodeTerminal
claude mcp add chakra-ui -- npx -y @chakra-ui/react-mcpClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"chakra-ui": {
"command": "npx",
"args": [
"-y",
"@chakra-ui/react-mcp"
]
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"chakra-ui": {
"command": "npx",
"args": [
"-y",
"@chakra-ui/react-mcp"
]
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"chakra-ui": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@chakra-ui/react-mcp"
]
}
}
}Codex~/.codex/config.toml
[mcp_servers.chakra-ui]
command = "npx"
args = ["-y", "@chakra-ui/react-mcp"]Gemini CLITerminal
gemini mcp add --scope user chakra-ui npx -- -y @chakra-ui/react-mcpSettings 1
CHAKRA_PRO_API_KEY |
Optional: Chakra UI Pro API key, for the premium component templates and blocks. |
|---|
What it does
The Chakra UI MCP Server is the official MCP server from the makers of Chakra UI, the React component library. It lets an AI assistant look up the list of Chakra UI components, the props and configuration of each one, and code examples and usage patterns, so the code it writes matches the library's current API.
It also exposes the design tokens of the theme (semantic tokens, text styles, layer styles), helps with creating and changing custom theme tokens, and reviews code for the move from Chakra UI version 2 to version 3 with before-and-after guidance.
With an active Chakra UI Pro licence and the CHAKRA_PRO_API_KEY environment variable set, two more tools list and fetch Chakra UI Pro component templates and blocks. Without the key the free component, theme and migration tools still work.
It runs locally over stdio from the npm package @chakra-ui/react-mcp (started with npx), and its docs give setup steps for VS Code, Cursor, Claude Code, Windsurf, Zed, OpenAI Codex and other MCP clients.
What it needs
| Runtime | Node.js |
|---|
Tools 9
list_components- Get a complete list of all available Chakra UI components
get_component_props- Detailed props, types and configuration options for any component
get_component_example- Retrieve code examples and usage patterns
list_component_templates- List available component templates from Chakra UI Pro (needs a Pro API key)
get_component_templates- Retrieve responsive, accessible component templates from Chakra UI Pro (needs a Pro API key)
list_blocks- List Chakra UI Pro blocks
get_theme- Get theme tokens, semantic tokens, text styles and layer styles
theme_customization- Custom theme token creation and modification
v2_to_v3_code_review- Migration guidance from Chakra UI version 2 to version 3 with code snippets