MoonUI MCP Server 🌙🤖

Model Context Protocol (MCP) server for MoonUI component library. Enables AI assistants like Claude to seamlessly interact with MoonUI components.

Features

🔧 Tools

• suggest_component - Find the best MoonUI component for any use case
• fix_imports - Automatically fix missing or incorrect imports
• generate_code - Generate component code for specific scenarios
• validate_usage - Validate component usage and suggest fixes

📚 Resources

• Component metadata and documentation
• Usage examples and best practices
• Props documentation and type definitions
• Dependency information

📝 Prompts

• Form wizard generation
• Dashboard layout creation
• Component composition templates

Installation

For Claude Desktop

1. Install the MCP server:

npm install -g @moontra/mcp-server

2. Configure Claude Desktop by adding to your config:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "moonui": {
      "command": "npx",
      "args": ["@moontra/mcp-server"],
      "env": {
        "PROJECT_PATH": "/path/to/your/project",
        "MOONUI_LICENSE": "your-license-key"
      }
    }
  }
}

3. Restart Claude Desktop

Usage

Once configured, Claude will automatically have access to MoonUI components. You can:

Find Components

"I need a component for displaying data in a table"

Claude will use the suggest_component tool to find DataTable.

Fix Imports

"Fix the imports in this code: <Button>Click</Button>"

Claude will add the missing import statement.

Generate Code

"Create a login form with validation"

Claude will generate complete code with all necessary imports.

Validate Usage

"Check if this component usage is correct"

Claude will validate props, variants, and accessibility.

Environment Variables

• PROJECT_PATH - Path to your project directory
• MOONUI_LICENSE - Your MoonUI Pro license key (optional)
• DEBUG - Enable debug logging (set to moonui:*)
• MOONUI_ANALYTICS - Enable usage analytics (default: true)
• MOONUI_LEARNING - Enable learning from usage (default: true)

Development

Running Locally

1. Clone the repository:

git clone https://github.com/moonui/mcp-server.git
cd packages/mcp-server

2. Install dependencies:

npm install

3. Build the project:

npm run build

4. Run in development mode:

npm run dev

Testing

Run the test suite:

npm test

Project Structure

packages/mcp-server/
├── src/
│   ├── index.ts           # Entry point
│   ├── server.ts          # MCP server implementation
│   ├── types.ts           # TypeScript definitions
│   ├── metadata/          # Component registry
│   ├── tools/             # MCP tools
│   ├── resources/         # MCP resources
│   └── prompts/           # MCP prompts
├── tests/                 # Test files
├── package.json
└── README.md

API Reference

Tools

suggest_component

Find the best component for a use case:

{
  "description": "I need a form input",
  "context": "login form",
  "preferPro": false
}

fix_imports

Fix missing imports in code:

{
  "code": "<Button>Click</Button>",
  "filePath": "app.tsx"
}

generate_code

Generate component code:

{
  "component": "DataTable",
  "useCase": "user list",
  "variant": "pro",
  "typescript": true
}

validate_usage

Validate component usage:

{
  "code": "<Button variant='invalid'>Test</Button>",
  "strict": true
}

Resources

• moonui://components - List all components
• moonui://components/free - List free components
• moonui://components/pro - List pro components
• moonui://component/{id} - Component details
• moonui://component/{id}/examples - Usage examples
• moonui://component/{id}/props - Props documentation

Prompts

• form_wizard - Multi-step form creation
• dashboard_layout - Dashboard layout generation

Troubleshooting

Server not starting

• Check that Node.js >= 18 is installed
• Verify the MCP server is installed globally
• Check Claude Desktop configuration

Components not found

• Ensure PROJECT_PATH is set correctly
• Verify MoonUI is installed in your project
• Check debug logs with DEBUG=moonui:*

Pro components not accessible

• Verify MOONUI_LICENSE is set
• Check license validity

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT © MoonUI Team

Support

• Documentation: moonui.dev/docs/mcp
• Issues: GitHub Issues
• Discord: Join our community