amazon-q-chakra-ui-mcp-server

JMRMEDEV/amazon-q-chakra-ui-mcp-server

3.2

If you are the rightful owner of amazon-q-chakra-ui-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

The Chakra UI MCP Server provides a seamless interface to access tools from the @chakra-ui/react-mcp package, facilitating component management and design system customization.

Tools
9
Resources
0
Prompts
0

Chakra UI MCP Server

This MCP server provides access to all tools from the official @chakra-ui/react-mcp package.

Available Tools

Component Tools

  • list_components - Get all available Chakra UI components
  • get_component_props - Get detailed props for any component
  • get_component_example - Get code examples and usage patterns

Design System Tools

  • get_theme - Get detailed list of all design tokens
  • customize_theme - Custom theme token creation and modification

Migration Tools

  • v2_to_v3_code_review - Migration guidance from version 2 to version 3

Additional Tools

  • installation - Get installation steps for different frameworks
  • get_component_templates - Get Chakra UI Pro templates (requires API key)
  • list_component_templates - List available Pro templates (requires API key)

Setup

  1. Install dependencies:

    npm install
    
  2. Test the server:

    node server.js
    

Usage with Amazon Q

Add to your Q CLI config:

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

How It Works

The server acts as a proxy to @chakra-ui/react-mcp, automatically exposing all available tools without manual configuration. New tools added to the upstream package are automatically available.

Developer Guide: Adding New Tools

1. Discover Available Tools

Check what tools exist in the upstream package:

# 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. Add Tool to Fallback List

If you want to ensure a tool is always available, add it to the fallback tools array in 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 Tool Availability

# 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. Debug Tool Issues

Check the upstream package structure:

# 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