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
- Install uv if you haven't already:
pip install uv
- 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 generateprops(object, optional): Props to apply to the componentchildren(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:
- On each request, it fetches the latest component data from mui.com
- Parses descriptions, props, and code examples from the docs
- Returns formatted, ready-to-use component information
- 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!