# 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](https://github.com/astral-sh/uv) for Python package management.
### Prerequisites
- Python 3.10 or higher
- uv package manager
### Setup
1. Install uv if you haven't already:
```bash
pip install uv
```
2. Install dependencies:
```bash
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:**
```json
{
"component_name": "Button"
}
```
### 2. `search_mui_components`
Search for MUI components by keyword.
**Parameters:**
- `query` (string): Search query (e.g., 'input', 'button', 'layout')
**Example:**
```json
{
"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:**
```json
{
"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](https://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`:
```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`:
```json
{
"mcpServers": {
"mui-mcp-server": {
"command": "uv",
"args": [
"--directory",
"/path/to/MUI-MCP-SERVER",
"run",
"mui-mcp-server"
]
}
}
}
```
## Running the Server
### Standalone
```bash
uv run mui-mcp-server
```
### For Development
```bash
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](src/mui_mcp_server/mui_fetcher.py):
```python
COMPONENT_URLS = {
"YourComponent": "/material-ui/react-your-component/",
}
```
## License
MIT
## Contributing
Feel free to add more MUI components or improve the existing tool functionality!
