medi-mcp-server

MCP (Model Context Protocol) Server for medi-ui components. Provides AI assistants with access to medi-ui component documentation, usage examples, and best practices.

Features

This MCP server provides the following capabilities:

• Component Documentation: Get detailed documentation for any medi-ui component
• Component List: Retrieve a list of all available medi-ui components
• Usage Patterns: Access common usage patterns and best practices
• Code Examples: Get ready-to-use code examples for components

Installation

# Global install (recommended)
npm install -g @mdfe/medi-mcp-server

# Local install
npm install @mdfe/medi-mcp-server

Usage

With MCP Clients (Claude Desktop, etc.)

Add to your MCP client configuration:

{
  "mcpServers": {
    "medi-mcp": {
      "command": "npx",
      "args": ["-y", "@mdfe/medi-mcp-server"]
    }
  }
}

Or if globally installed:

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

With Claude CLI

claude mcp add medi-mcp -- npx -y @mdfe/medi-mcp-server

Available Tools

1. get_medi_document

Get documentation for a specific medi-ui component or get the full component list.

Parameters:

• componentName (optional): Component name (e.g., "Button", "Form", "Table")
• section (optional): Specific section to retrieve ("props", "events", "methods", "examples", "all")

Examples:

// Get all components list
{
  "name": "get_medi_document"
}

// Get Button component documentation
{
  "name": "get_medi_document",
  "arguments": {
    "componentName": "Button"
  }
}

// Get only props for Input component
{
  "name": "get_medi_document",
  "arguments": {
    "componentName": "Input",
    "section": "props"
  }
}

2. get_component_list

Get a list of all available medi-ui components with metadata.

Parameters: None

Example:

{
  "name": "get_component_list"
}

3. get_usage_pattern

Get usage patterns and best practices for common scenarios.

Parameters:

• patternName (optional): Pattern name (e.g., "form-validation", "table-remote-data", "dialog-form")
• category (optional): Pattern category ("form", "table", "dialog", "layout", "all")

Examples:

// Get all patterns
{
  "name": "get_usage_pattern"
}

// Get form-related patterns
{
  "name": "get_usage_pattern",
  "arguments": {
    "category": "form"
  }
}

// Get specific pattern
{
  "name": "get_usage_pattern",
  "arguments": {
    "patternName": "form-validation"
  }
}

4. search_components

Search components by keyword or functionality.

Parameters:

• query (required): Search query string
• limit (optional): Maximum number of results (default: 10)

Example:

{
  "name": "search_components",
  "arguments": {
    "query": "date picker",
    "limit": 5
  }
}

Resources

The server also provides the following MCP resources:

• medi://components - Full component list organized by category
• medi://patterns - Usage patterns and best practices
• medi://overview - Getting started guide
• medi://theming - Theme customization guide (CSS variables, dark mode)
• medi://i18n - Internationalization and locale configuration
• medi://component/{name} - Individual component documentation (e.g., medi://component/Button)

Development

# Install dependencies
npm install

# Run in development mode (auto-syncs skills + watch)
npm run dev

# Build for production (syncs skills + type-check)
npm run build

# Manually sync medi-design-skill files
npm run sync-skills

The sync-skills script copies ecosystem/medi-design-skill into src/skills/medi-ui/ so the MCP server can reference skill documents at a stable, build-time path. This script runs automatically before dev and build.

Project Structure

medi-mcp/
├── scripts/
│   └── sync-skills.ts         # Copies skill files into src/skills/ at build-time
├── src/
│   ├── index.ts               # MCP server entry point
│   ├── skills/                # Generated — skill docs copied from medi-design-skill (git-ignored)
│   ├── tools/                 # MCP tool implementations
│   │   ├── index.ts
│   │   ├── get-document.ts
│   │   ├── get-component-list.ts
│   │   ├── get-usage-pattern.ts
│   │   └── search-components.ts
│   └── utils/
│       ├── component-loader.ts
│       └── version.ts
├── package.json
└── README.md

Integration with Skills

This MCP server works together with the medi-design skill:

• MCP Server: Provides tools for querying component documentation and patterns
• Skill: Provides behavioral guidelines and workflow instructions for using the components

What's in the MCP Server:

• Component documentation (props, events, methods, examples)
• Usage patterns and best practices
• Component search functionality
• Raw documentation data access

What's in the Skill:

• AI behavior guidelines
• Workflow instructions
• Component usage examples in Skill format
• Integration with development workflows

License

MIT

Related

• medi-ui - The component library
• medi-design-skill - The companion skill
• MCP Protocol - Model Context Protocol specification