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

1. 测试服务器：

   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