AI导哈

Chakra UI组件工具服务器

提供对Chakra UI组件的访问、设计系统定制和迁移工具的服务，适用于React开发人员。

  • by JMRMEDEV
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 JMRMEDEV/amazon-q-chakra-ui-mcp-server

使用说明

Chakra UI MCP 服务器

这个MCP服务器提供了访问官方@chakra-ui/react-mcp包中所有工具的权限。

可用工具

组件工具

  • list_components - 获取所有可用的Chakra UI组件
  • get_component_props - 获取任何组件的详细属性
  • get_component_example - 获取代码示例和使用模式

设计系统工具

  • get_theme - 获取所有设计令牌的详细列表
  • customize_theme - 自定义主题令牌的创建和修改

迁移工具

  • v2_to_v3_code_review - 从版本2到版本3的迁移指南

附加工具

  • installation - 获取不同框架的安装步骤
  • get_component_templates 获取Chakra UI Pro模板（需要API密钥）
  • list_component_templates - 列出可用的专业模板（需要API密钥）

设置

  1. 安装依赖项：

    npm install

  2. 测试服务器：

    node server.js

与 Amazon Q 的配合使用

在您的Q CLI配置中添加：

{
  "mcpServers": {
    "chakra-ui": {
      "command": "node",
      "args": ["/path/to/mcp-servers/chakra-ui/server.js"],
      "env": {
        "CHAKRA_PRO_API_KEY": "your-api-key-here"
      }
    }
  }
}

它是如何工作的

服务器作为@chakra-ui/react-mcp的代理，自动暴露所有可用工具，无需手动配置。上游包中新增的工具也会自动可用。

开发者指南：添加新工具

1. 发现可用工具

检查上游包中存在哪些工具：

# Search for tool definitions
grep -n "name.*description" node_modules/@chakra-ui/react-mcp/dist/stdio.js

# Find tool schemas
grep -A 10 -B 5 "toolName.*Tool" node_modules/@chakra-ui/react-mcp/dist/stdio.js

2. 将工具添加到备用列表

如果你想确保某个工具始终可用，请将其添加到备用工具数组中 server.js：

{
  name: 'your_tool_name',
  description: 'Tool description from upstream',
  inputSchema: {
    type: 'object',
    properties: {
      param: { type: 'string', description: 'Parameter description' }
    },
    required: ['param']
  }
}

3. 测试工具的可用性

# Test if tool is exposed
echo '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}' | node server.js

# Test tool execution
echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"tool_name","arguments":{}}}' | node server.js

4. 调试工具问题

检查上游包结构：

# View available tools in source
cat node_modules/@chakra-ui/react-mcp/dist/stdio.js | grep -A 20 "var tools = \["

# Check tool registration
grep -A 5 "tool.exec" node_modules/@chakra-ui/react-mcp/dist/stdio.js

相关 MCP