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

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.

What's New in v5.2.1

Perfect 100% Test Coverage Achieved

100% Test Coverage (284/284 tests)

All 284 comprehensive tests passing - Production ready quality

Enhanced Exact Match Scoring (10x → 50x)

5x stronger prioritization ensures exact matches always win

All-Keywords-Match Bonus (15x)

New multi-word query optimization for better component matching

Improved Turkish Translation

Edge case handling for queries like "tarih picker"

Performance Improvement (0.8ms → 0.7ms)

12.5% faster response times for seamless AI integration

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