# 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!