Chakra UI MCP Server

An MCP server providing AI assistants with access to Chakra UI components, examples, migration patterns, and premium templates.

Features

• Component Library: Get components, props, and usage examples
• Migration Support: v2 to v3 upgrade guidance with before/after code snippets
• Design Tokens: Access semantic tokens and text styles for consistent theming
• Premium Templates: Chakra UI Pro blocks and component templates (requires API key)

Available Tools

• get_components - List all Chakra UI components
• get_component_props - Get component properties and configuration
• get_component_example - Retrieve usage examples and code patterns
• get_theme - Get theme tokens, semantic tokens, text styles and layer styles
• list_blocks - List Chakra UI Pro blocks
• get_component_templates - Get premium component templates (Pro)
• v2_to_v3_code_review - Migration guidance with code snippets

Setup

Claude Desktop / Cursor

Add to your Claude Desktop or Cursor configuration file:

{
  "mcpServers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"],
      "env": {
        "CHAKRA_PRO_API_KEY": "your-api-key-here"
      }
    }
  }
}

OpenAI Codex

Add to your ~/.codex/config.toml file:

[mcp_servers.chakra-ui]
command = "npx"
args = ["-y", "@chakra-ui/react-mcp"]
startup_timeout_ms = 20_000

# Optional: Add Chakra Pro API key if using premium features
# [mcp_servers.chakra-ui.env]
# CHAKRA_PRO_API_KEY = "your-api-key-here"

Or use the CLI command:

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

Note: Requires Codex CLI v0.34.0 or later.

Environment Variables

• CHAKRA_PRO_API_KEY (optional) - For accessing premium templates and blocks

Development

pnpm install
pnpm build
pnpm dev

License

MIT @ Chakra Systems