MoonUI

MCP Server Integration

Enable AI assistants to perfectly understand and use MoonUI components with zero import errors

AI-NATIVE

Perfect AI Integration

Claude, ChatGPT, and all MCP-enabled AI assistants

109+ Components

All MoonUI components recognized

Zero Import Errors

Auto-fix missing imports

<1s Response Time

Instant component suggestions

PRO FEATURES

Pro License Benefits

Automatic Pro component prioritization

Pro Component Priority

AI suggests Pro components first

50+ Pro Components

DataTable, Charts, RichTextEditor

24-Hour Smart Cache

Optimized performance

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 leverages this protocol to help AI assistants perfectly understand and use MoonUI components.

109+ Components

Complete coverage of all MoonUI components with metadata

4 AI Tools

Component suggestion, import fixing, code generation, validation

Smart Caching

24-hour cache with background refresh for optimal performance

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"
      }
    }
  }
}

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

1

Sign In to Dashboard

Sign in or create an account

2

Navigate to Settings

Go to Dashboard → Settings → API Keys section

3

Generate API Key

Click "Generate API Key" button and copy your key

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

  • 50+ 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