Package Exports

@moontra/moonui-mcp-server

Readme

MoonUI MCP Server

Model Context Protocol server for MoonUI component library - AI-native component access with authentication support.

Features

✨ Get component list and information with Pro/Free classification
🔍 Smart component suggestions based on use case
🔐 Authentication-aware - respects Pro component access
📚 Comprehensive documentation access
🚀 Optimized performance with intelligent caching
💾 Only 36KB dist size

Installation

npm install @moontra/moonui-mcp-server

Usage with Claude Desktop

Add to your Claude Desktop config:

{
  "mcpServers": {
    "moonui": {
      "command": "npx",
      "args": ["@moontra/moonui-mcp-server"]
    }
  }
}

Authentication Requirements

For Pro Components Access

The MCP server respects MoonUI's authentication system:

Development: Run moonui dev to start the auth server
- Auth server runs on localhost:7878
- Automatically validates Pro component access
- No external API calls required
Production: Set MOONUI_LICENSE_KEY environment variable
- Get your license key from MoonUI Dashboard → Settings
- For Vite: use VITE_MOONUI_LICENSE_KEY
- For Create React App: use REACT_APP_MOONUI_LICENSE_KEY

CLI Authentication

# One-time authentication
moonui login

# Check authentication status
moonui status

# Start dev server with auth
moonui dev

Available Tools

`get_components`

Get list of all MoonUI components organized by category.

// Returns:
{
  free: ["button", "card", ...],
  pro: ["data-table", "kanban", ...],
  categories: ["forms", "overlay", ...],
  total: 120
}

`get_component_info`

Get detailed information about a specific component.

// Input: { name: "button" }
// Returns: Complete component metadata including:
// - Installation instructions
// - Import statements
// - Props and variants
// - Usage examples
// - Accessibility info

`suggest_component`

Get intelligent component suggestions based on description.

// Input: { description: "I need a data table with sorting" }
// Returns: Ranked suggestions with Pro/Free classification

`get_docs`

Access comprehensive MoonUI documentation.

// Topics: installation, authentication, usage, theming, cli, troubleshooting
// Returns: Detailed documentation with examples

`search_docs`

Search documentation for specific information.

// Input: { query: "dark mode" }
// Returns: Relevant documentation sections

`get_server_info`

Get server version and runtime information.

`clear_cache`

Clear MCP server cache for fresh data.

`reload_registry`

Reload component registry after updates.

Authentication Flow

graph TD
    A[MCP Server Request] --> B{Check Component Type}
    B -->|Free| C[Return Component Info]
    B -->|Pro| D{Check Auth}
    D -->|Dev Mode| E[Check localhost:7878]
    D -->|Production| F[Check License Key]
    E -->|Valid| C
    F -->|Valid| C
    E -->|Invalid| G[Return Limited Info]
    F -->|Invalid| G

Troubleshooting

Pro components not accessible?

In Development:

# Start auth server
moonui dev

# Or auth server only
moonui dev --no-nextjs

In Production:

# Set environment variable
export MOONUI_LICENSE_KEY=your_license_key

Check Status:
```
moonui status
```

Auth Server Issues

Port 7878 in use: lsof -i :7878 to check
Clear cache: rm -rf ~/.moonui/cache
Re-login: moonui logout && moonui login

Device Limit Reached

# List devices
moonui device:list

# Remove old device
moonui device:remove [device-id]

Cache Strategy

Production: 24-hour cache for optimal performance
Development: 1-hour cache for faster updates
Clear manually: Use clear_cache tool

Philosophy

This MCP server provides accurate, authentication-aware component metadata. It respects MoonUI's licensing model while enabling AI to generate better code with proper component information.

Version Information

Server Version: 4.5.3
Protocol: Model Context Protocol
Runtime: Node.js 18+

Support

Documentation: https://moonui.dev/docs/mcp
Issues: https://github.com/moonui/mcp-server/issues
Discord: https://discord.gg/moonui

License

MIT