MUI MCP Server

A Model Context Protocol (MCP) server that dynamically fetches and provides real-time information for Material-UI (MUI) components from official documentation.

Features

• 🔍 Search MUI Components: Find components by keywords
• 📚 Component Information: Get detailed props, examples, and usage from live MUI docs
• 🎨 Code Generation: Generate MUI components with custom props
• 📋 Component Listing: Browse all 42+ available MUI components
• ⚡ Dynamic Fetching: Always up-to-date with official MUI documentation
• 🏥 Health Check: Monitor fetch latency and component availability

Installation

This project uses uv for Python package management.

Prerequisites

• Python 3.10 or higher
• uv package manager

Setup

1. Install uv if you haven't already:

pip install uv

2. Install dependencies:

uv sync

Available Tools

The MCP server provides the following tools:

1. get_mui_component

Get detailed information about a specific MUI component.

Parameters:

• component_name (string): Name of the MUI component (e.g., Button, TextField, Card)

Example:

{
  "component_name": "Button"
}

2. search_mui_components

Search for MUI components by keyword.

Parameters:

• query (string): Search query (e.g., 'input', 'button', 'layout')

Example:

{
  "query": "input"
}

3. list_all_components

List all available MUI components (fetched dynamically from MUI docs).

Parameters: None

4. mui_health

Health check that fetches components live and reports count and latency.

Parameters: None

5. generate_mui_component

Generate a complete MUI component with specified props.

Parameters:

• component_name (string): The MUI component to generate
• props (object, optional): Props to apply to the component
• children (string, optional): Content/children for the component

Example:

{
  "component_name": "Button",
  "props": {
    "variant": "contained",
    "color": "primary"
  },
  "children": "Click Me"
}

Available Components

The server dynamically fetches information for 42+ MUI components including:

• Inputs: Button, TextField, Checkbox, Radio, Switch, Slider, Select, Autocomplete
• Data Display: Typography, Avatar, Badge, Chip, List, Table, Tooltip
• Feedback: Alert, Dialog, Snackbar, Progress (Circular/Linear), Skeleton
• Surfaces: Card, Paper, Accordion, AppBar
• Navigation: Drawer, Menu, Breadcrumbs, Link, Tabs, Pagination, Stepper
• Layout: Box, Container, Grid, Stack, ImageList
• Utils: Popover, Backdrop, SpeedDial, ToggleButton, Rating

All components are fetched live from mui.com with latest props, examples, and documentation.

Usage with Claude Desktop

To use this MCP server with Claude Desktop, add it to your Claude configuration:

Windows

Edit %APPDATA%\Claude\claude_desktop_config.json:

{
  "mcpServers": {
    "mui-mcp-server": {
      "command": "uv",
      "args": [
        "--directory",
        "C:\\Users\\TejasBorate\\Desktop\\MUI-MCP-SERVER",
        "run",
        "mui-mcp-server"
      ]
    }
  }
}

macOS

Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "mui-mcp-server": {
      "command": "uv",
      "args": [
        "--directory",
        "/path/to/MUI-MCP-SERVER",
        "run",
        "mui-mcp-server"
      ]
    }
  }
}

Running the Server

Standalone

uv run mui-mcp-server

For Development

cd src/mui_mcp_server
uv run python server.py

Example Queries

Once connected to Claude, you can ask:

• "Show me how to use a MUI Button component"
• "Generate a TextField component with email validation"
• "List all available MUI components"
• "Search for layout components in MUI"
• "Create a Card component with a header and actions"

Project Structure

MUI-MCP-SERVER/
├── src/
│   └── mui_mcp_server/
│       ├── __init__.py
│       ├── server.py          # Main MCP server implementation
│       └── mui_fetcher.py     # Dynamic MUI docs scraper
├── pyproject.toml             # Project dependencies
├── README.md                  # This file
└── QUICKSTART.md              # Quick setup guide

How It Works

This server uses dynamic fetching to scrape component information directly from MUI's official documentation:

1. On each request, it fetches the latest component data from mui.com
2. Parses descriptions, props, and code examples from the docs
3. Returns formatted, ready-to-use component information
4. No static data or cache - always current with MUI releases

To add more components, edit COMPONENT_URLS in src/mui_mcp_server/mui_fetcher.py:

COMPONENT_URLS = {
    "YourComponent": "/material-ui/react-your-component/",
}

License

MIT

Contributing

Feel free to add more MUI components or improve the existing tool functionality!