JMRMEDEV/amazon-q-chakra-ui-mcp-server
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.
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 componentsget_component_props
- Get detailed props for any componentget_component_example
- Get code examples and usage patterns
Design System Tools
get_theme
- Get detailed list of all design tokenscustomize_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 frameworksget_component_templates
- Get Chakra UI Pro templates (requires API key)list_component_templates
- List available Pro templates (requires API key)
Setup
-
Install dependencies:
npm install
-
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