Chakra UI MCP 服务器

一个MCP服务器,提供AI助手访问Chakra UI组件, 实例、迁移模式和溢价模板.

特征

• 构成部分库: 获取组件、道具和使用示例
• 移徙支助: v2 到 v3 用代码前/后更新指导 片断
• 设计托肯斯: 获取语义符号和文本样式以求一致 主题
• 高级模板: 查克拉大学 Pro 块和组件模板(要求) API 密钥)

可用工具

• get_components - 列出所有 Chakra UI 组件
• get_component_props - 获取组件属性和配置
• get_component_example - 获取使用实例和代码模式
• get_theme - 获得主题符号、语义符号、文本样式和图层样式
• list_blocks - 列出查克拉UI Pro 块
• get_component_templates - 获得溢价组件模板(Pro)
• v2_to_v3_code_review - 带有代码片段的移民指南

设置

克洛德桌面/ 光标

添加到您的 Claude 桌面或光标配置文件 :

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

OpenAI 代码

添加到您的 ~/.codex/config.toml 文件 :

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

或者使用 CLI 命令 :

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

说明: 需要代码 CLI v0.34.0 或更后.

环境变量

• CHAKRA_PRO_API_KEY (可选) - 用于访问溢价模板和块

发展

pnpm install
pnpm build
pnpm dev

许可证

麻省理工学院 @ Chakra系统