MCP Server Integration

Enable AI assistants to perfectly understand and use MoonUI components with intelligent suggestions

AI-NATIVE

Perfect AI Integration

Claude, ChatGPT, and all MCP-enabled AI assistants

200+ Components

Complete component library coverage

Complete Metadata

Props, examples, best practices

Lightning Fast

Instant component suggestions

PRO FEATURES

Pro License Benefits

Automatic Pro component prioritization

Pro Component Priority

AI suggests Pro components first

Pro Component Priority

AI suggests best components first

Smart Pro Prioritization

Upgrade mapping & conversion

What is MCP Server?

Model Context Protocol (MCP) is an open protocol that enables AI assistants to securely communicate with external tools and data sources. MoonUI MCP Server provides complete component intelligence with automatic Pro component prioritization.

200+ Components

Complete coverage of all MoonUI components with rich metadata

Smart AI Tools

Component suggestion, import fixing, code generation, validation

Pro Prioritization

Automatically suggests Pro components for better user experience

Installation

Step 1: Open Claude Desktop Config File

Config File Location

# macOS~/Library/Application Support/Claude/claude_desktop_config.json# Windows%APPDATA%\Claude\claude_desktop_config.json# Linux~/.config/Claude/claude_desktop_config.json

Step 2: Add MCP Server Configuration

claude_desktop_config.json

{
  "mcpServers": {
    "moonui": {
      "command": "npx",
      "args": ["-y", "@moontra/moonui-mcp-server@latest"],
      "env": {
        "MOONUI_LICENSE": "YOUR_LICENSE_KEY_HERE"
      }
    }
  }
}

License Key Required

Get your license key from Dashboard → Settings to access Pro components

Step 3: Restart Claude Desktop

Complete Setup

Fully restart Claude Desktop application for changes to take effect. The MCP server will automatically start when you open Claude.

API Key (License)

How to Get Your License Key

Navigate to Settings

Go to Dashboard → Settings → API Keys section

Generate API Key

Click "Generate API Key" button and copy your key

Important

Store your API key securely. It won't be shown again. If you have a Pro license, you'll automatically get access to Pro components.

MCP Server Features

suggest_component

Find the best component using natural language

# Ask AI:"I need a data table with sorting"# MCP suggests:→ DataTable (Pro)→ Table (Free alternative)→ Usage examples→ Import statements

fix_imports

Automatically fix missing or incorrect imports

# Broken code:<Button>Click</Button> // Not imported# MCP fixes:import { Button } from '@moontra/moonui';<Button>Click</Button>

generate_code

Generate custom component code for your needs

# Request:"Generate a login form"# MCP generates:✓ Input validation✓ Error handling✓ TypeScript types✓ Best practices

validate_usage

Validate component usage and suggest improvements

# Validates:✓ Prop types✓ Required props✓ Deprecated APIs✓ Performance✓ Accessibility

theming_helper

Get theming guidance and customization examples

# Theming assistance:✓ Dark mode setup✓ CSS variables✓ Custom colors✓ Theme switchers✓ Best practices

Pro License Benefits

Automatic Pro Component Suggestions
With Pro license, AI always suggests Pro components first
Premium Pro Components
DataTable, Charts, RichTextEditor and more
Priority Support
Get early access to MCP Server updates

Resources

NPM Package

Browse @moontra/moonui-mcp-server package

MCP Protocol

Learn more about Model Context Protocol

Example Projects

Example projects using MCP Server