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

168 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.

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

Simple Setup - No License Required

Pro components are automatically prioritized for the best experience. No additional configuration needed!

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 v6

DocsConfig-Driven Registry — Complete Component Data

v6 is a major upgrade: the registry now mirrors MoonUI's authoritative DocsConfig source, so every component ships with full prop tables, code examples, accessibility specs and best practices — no more hardcoded fallbacks or empty fields.

Registry schema v3.0 — full DocsConfig data

installation.manualSetup, usage.basic/pro.code, fullExamples.free/pro, api.components[].props, accessibility, bestPractices, proFeatures, seo

4 new granular tools

get_props, get_examples, get_accessibility, get_installation — return slices instead of the whole entry, keeping LLM context bloat down

Hybrid registry loader (opt-in)

Set MOONUI_REMOTE_REGISTRY=true to pull fresh data from moonui.dev/api/mcp/registry. 3s timeout, 1h tmp cache, embedded fallback — always offline-safe

Sub-component linking + dataQuality field

data-table-bulk-actions.parentComponent === "data-table"; every response carries dataQuality (complete / partial / ast-only) so LLMs know how trustworthy the entry is

Coverage — 168 components: 45 free + 123 Pro

Components without a DocsConfig fall back to AST data and are flagged dataQuality: "ast-only"

Fix — suggest_component static-registry fallback

Dynamic scan returned empty for end users without the component packages installed; now falls back to the embedded registry so suggestions always work

Install / Upgrade

npx -y @moontra/moonui-mcp-server@latest

Dist-tags: latest is the current stable release, next carries release candidates, legacy is the 5.x line

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

Upgrade to Pro

Resources

NPM Package

Browse @moontra/moonui-mcp-server package

View on NPM

MCP Protocol

Learn more about Model Context Protocol

MCP Docs

Example Projects

Example projects using MCP Server

Usage Guide

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

168 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?

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

Simple Setup - No License Required

Pro components are automatically prioritized for the best experience. No additional configuration needed!

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 v6

DocsConfig-Driven Registry — Complete Component Data

Registry schema v3.0 — full DocsConfig data

installation.manualSetup, usage.basic/pro.code, fullExamples.free/pro, api.components[].props, accessibility, bestPractices, proFeatures, seo

4 new granular tools

get_props, get_examples, get_accessibility, get_installation — return slices instead of the whole entry, keeping LLM context bloat down

Hybrid registry loader (opt-in)

Set MOONUI_REMOTE_REGISTRY=true to pull fresh data from moonui.dev/api/mcp/registry. 3s timeout, 1h tmp cache, embedded fallback — always offline-safe

Sub-component linking + dataQuality field

data-table-bulk-actions.parentComponent === "data-table"; every response carries dataQuality (complete / partial / ast-only) so LLMs know how trustworthy the entry is

Coverage — 168 components: 45 free + 123 Pro

Components without a DocsConfig fall back to AST data and are flagged dataQuality: "ast-only"

Fix — suggest_component static-registry fallback

Dynamic scan returned empty for end users without the component packages installed; now falls back to the embedded registry so suggestions always work

Install / Upgrade

npx -y @moontra/moonui-mcp-server@latest

Dist-tags: latest is the current stable release, next carries release candidates, legacy is the 5.x line

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

Upgrade to Pro

Resources

NPM Package

Browse @moontra/moonui-mcp-server package

View on NPM

MCP Protocol

Learn more about Model Context Protocol

MCP Docs

Example Projects

Example projects using MCP Server

Usage Guide