MoonUI Dynamic MCP Server 🚀

Next-generation Model Context Protocol server for MoonUI. Uses dynamic code analysis instead of static registries to provide 100% accurate component information to AI assistants.

🎯 Why Dynamic MCP Server?

Previous Issues (Static Registry)

• ❌ Manual export lists prone to errors
• ❌ AI suggesting non-existent components (DashboardGrid, MetricCard)
• ❌ Constant maintenance required
• ❌ Out-of-sync with actual package exports

New Solution (Dynamic Analysis)

• ✅ Real-time Export Analysis - TypeScript Compiler API reads actual exports
• ✅ 100% Accuracy - Directly from .d.ts files
• ✅ Zero Maintenance - Automatically stays in sync
• ✅ Rich Documentation - Markdown docs, JSDoc, and type info
• ✅ Smart Suggestions - Finds similar components when typos occur

🚀 What's New in v2.0.0

Complete Architecture Redesign

• Dynamic Export Analyzer using TypeScript AST parsing
• Intelligent Component Organizer groups related components
• Rich Documentation Generator with real examples
• JSDoc Standards & Applicator for IDE support
• Smart Cache System for performance

Key Features

• Analyzes 900+ exports accurately (393 from moonui, 501+ from moonui-pro)
• Distinguishes between components, hooks, types, and utilities
• Groups sub-components under main components (Tooltip includes TooltipTrigger, TooltipContent, etc.)
• Provides detailed documentation with real usage examples

📦 Installation

For Claude Desktop

1. Install the MCP server:

npm install -g @moontra/moonui-mcp-server

2. Configure Claude Desktop:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "moonui": {
      "command": "moonui-mcp"
    }
  }
}

3. Restart Claude Desktop

🔧 MCP Tools

get_exports

Get all exports from a MoonUI package with accurate categorization.

{
  "package": "@moontra/moonui",
  "category": "components", // optional: components, hooks, types, utilities
  "refresh": false // optional: force cache refresh
}

get_component_info

Get detailed information about a specific component including documentation and examples.

{
  "package": "@moontra/moonui",
  "componentName": "Button"
}

search_exports

Search for exports by name pattern across packages.

{
  "query": "button",
  "package": "@moontra/moonui" // optional
}

validate_import

Check if imports are valid and get suggestions for incorrect ones.

{
  "package": "@moontra/moonui",
  "imports": ["Button", "Card", "NonExistent"]
}

generate_import_statement

Generate correct import statements for components.

{
  "components": ["Button", "Card", "Dialog"]
}

📊 Export Analysis

The dynamic analyzer provides real-time information:

• @moontra/moonui: 393 exports (280 components, 1 hook, various utilities)
• @moontra/moonui-pro: 501+ exports (300+ components, 6 hooks, advanced features)

Component Organization

Components are intelligently grouped:

Button
├── Button (main component)
├── ButtonProps (type)
├── ButtonVariant (type)
└── buttonVariants (utility)

Card
├── Card
├── CardHeader
├── CardTitle
├── CardDescription
├── CardContent
└── CardFooter

Tooltip
├── Tooltip
├── TooltipProvider
├── TooltipTrigger
├── TooltipContent
└── TooltipArrow

🧪 Testing

Run the test suite:

npm test

Analyze exports:

npm run analyze:exports

📚 Documentation

Detailed component documentation is generated dynamically and includes:

• Overview - What the component does
• Installation - How to add it
• Basic Usage - Simple examples
• Advanced Examples - Complex patterns
• API Reference - Props and types
• Accessibility - Keyboard and ARIA support
• Best Practices - Do's and don'ts

🔄 Migration from v1.x

If upgrading from the static registry version:

1. Update the package:

npm update -g @moontra/moonui-mcp-server

2. No configuration changes needed - it's backward compatible!

3. Enjoy accurate component suggestions 🎉

🛠️ Development

Setup

git clone https://github.com/moonui/mcp-server
cd mcp-server
npm install

Commands

npm run dev           # Development mode
npm run build         # Build for production
npm run test          # Run tests
npm run analyze:exports # Analyze package exports

Architecture

mcp-server/
├── src/
│   ├── analyzer/          # Export analysis engine
│   ├── organizer/         # Component organization
│   ├── generator/         # Documentation generation
│   ├── standards/         # JSDoc standards
│   ├── server/           # MCP server implementation
│   └── __tests__/        # Test suite
├── docs/
│   └── components/       # Generated documentation
└── scripts/              # Utility scripts

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

📄 License

MIT License - see LICENSE file for details.

🔗 Links

• MoonUI Documentation
• GitHub Repository
• NPM Package
• Discord Community

Maintained by the MoonUI Team
Version: 2.0.0
Last Updated: 2024-01-15