Material UI MCP Server

A Model Context Protocol (MCP) server providing comprehensive access to the Material UI component library documentation. Deploy this MCP to help AI assistants like Claude Code build consistent, well-designed React applications using Material UI components.

🚀 Quick Deploy

This will deploy your Material UI MCP server to a URL like: mui-mcp.<your-account>.workers.dev/sse

📋 What This MCP Provides

This MCP server gives AI assistants instant access to Material UI's 50+ React components with 6 specialized tools:

Available Tools

list_components - Browse all 50+ available Material UI components
get_component_info - Get component details, imports, and documentation links
search_components - Find components by use case (forms, navigation, feedback, etc.)
get_customization_guide - Learn Material UI's theming and styling system
get_setup_guide - Installation and setup instructions for Material UI
get_mui_guide - Comprehensive guide to Material UI documentation and best practices

Component Categories

Inputs: Text Field, Select, Checkbox, Radio Button, Switch, Slider, Autocomplete
Data Display: Table, List, Typography, Avatar, Badge, Chip, Tooltip, Timeline
Feedback: Alert, Dialog, Progress, Snackbar, Skeleton, Backdrop
Surfaces: Card, Paper, Accordion
Navigation: App Bar, Drawer, Tabs, Breadcrumbs, Menu, Stepper, Bottom Navigation
Layout: Box, Container, Grid, Stack, Image List, Masonry
Utils: Click Away Listener, CSS Baseline, Portal
And more: 50+ production-ready components

🔌 Installation

Option 1: Quick Start (if you don't want to deploy to Cloudflare or run your own locally)

Use the public Material UI MCP server to get started immediately:

Claude Code:

claude mcp add mui npx mcp-remote https://mui-mcp-cloudflare.jgentes.workers.dev/sse

Cursor:

Install in Cursor:

To install the Material UI MCP Server in Cursor, copy and paste the following link into your browser's address bar:

cursor://anysphere.cursor-deeplink/mcp/install?name=mui&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJtY3AtcmVtb3RlIiwiaHR0cHM6Ly9tdWktbWNwLWNsb3VkZmxhcmUuamdlbnRlcy53b3JrZXJzLmRldi9zc2UiXX0=

Or manually add to your Cursor settings:

{
  "mcpServers": {
    "mui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mui-mcp-cloudflare.jgentes.workers.dev/sse"
      ]
    }
  }
}

Option 2: Deploy Your Own

Deploy your own instance to Cloudflare Workers:

Click the "Deploy to Cloudflare Workers" button at the top
After deployment, your MCP will be available at: https://mui-mcp-cloudflare.<your-account>.workers.dev/sse
Connect to Claude Code:

claude mcp add mui npx mcp-remote https://mui-mcp-cloudflare.<your-account>.workers.dev/sse

Or manually edit your config:

{
  "mcpServers": {
    "mui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mui-mcp-cloudflare.<your-account>.workers.dev/sse"
      ]
    }
  }
}

Option 3: Local Server

For running using the Wrangler CLI:

# Install dependencies
npm install

# Run locally (starts on http://localhost:8787)
npm run dev

Connect to your local instance:

Claude Code:

claude mcp add mui npx mcp-remote http://localhost:8787/sse

Manual config:

{
  "mcpServers": {
    "mui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse"
      ]
    }
  }
}

🛠️ How It Works

This MCP server fetches documentation directly from mui.com and provides structured information to AI assistants. It helps ensure:

✅ Consistency - Correct Material UI component usage across projects
✅ Efficiency - Quick component discovery prevents unnecessary custom development
✅ Accuracy - Direct access to official documentation ensures proper implementation
✅ Customization - Full support for Material UI's theming and styling system
✅ Best Practices - Includes accessibility guidelines and proper usage patterns

📚 Example Usage

When connected to Claude Code, you can ask questions like:

"List all available Material UI components"
"Show me how to use the Button component"
"Find components for building forms"
"How do I set up Material UI theming?"
"What's the best way to customize Material UI components?"
"Show me data display components"

The MCP will provide accurate, up-to-date information with direct links to the official Material UI documentation.

🔧 Customization

To modify the MCP server, edit src/index.ts:

Update component lists in the COMPONENTS constant
Add new tools using this.server.tool(...)
Modify search categories in COMPONENT_MAP
Enhance documentation extraction methods

📦 Versioning & Releases

This project uses release-it with conventional changelog for versioning.

For Maintainers

To create a new release:

npm run release

This will:

Prompt you to select version bump (patch/minor/major)
Update package.json version
Generate/update CHANGELOG.md from commit messages
Create a git tag
Push changes to GitHub
Create a GitHub release

Commit Message Format

Use Conventional Commits format for automatic changelog generation:

feat: add new component tool - New features (minor version bump)
fix: correct component URL - Bug fixes (patch version bump)
docs: update installation guide - Documentation changes
chore: update dependencies - Maintenance tasks
BREAKING CHANGE: in commit body - Breaking changes (major version bump)

See CHANGELOG.md for release history.

📄 License

MIT

🙏 Credits

Built with Cloudflare Workers
Documentation from Material UI
Implements the Model Context Protocol

Material UI MCP Server

🚀 Quick Deploy

This will deploy your Material UI MCP server to a URL like: mui-mcp.<your-account>.workers.dev/sse

📋 What This MCP Provides

This MCP server gives AI assistants instant access to Material UI's 50+ React components with 6 specialized tools:

Available Tools

list_components - Browse all 50+ available Material UI components
get_component_info - Get component details, imports, and documentation links
search_components - Find components by use case (forms, navigation, feedback, etc.)
get_customization_guide - Learn Material UI's theming and styling system
get_setup_guide - Installation and setup instructions for Material UI
get_mui_guide - Comprehensive guide to Material UI documentation and best practices

Component Categories

Inputs: Text Field, Select, Checkbox, Radio Button, Switch, Slider, Autocomplete
Data Display: Table, List, Typography, Avatar, Badge, Chip, Tooltip, Timeline
Feedback: Alert, Dialog, Progress, Snackbar, Skeleton, Backdrop
Surfaces: Card, Paper, Accordion
Navigation: App Bar, Drawer, Tabs, Breadcrumbs, Menu, Stepper, Bottom Navigation
Layout: Box, Container, Grid, Stack, Image List, Masonry
Utils: Click Away Listener, CSS Baseline, Portal
And more: 50+ production-ready components

🔌 Installation

Option 1: Quick Start (if you don't want to deploy to Cloudflare or run your own locally)

Use the public Material UI MCP server to get started immediately:

Claude Code:

claude mcp add mui npx mcp-remote https://mui-mcp-cloudflare.jgentes.workers.dev/sse

Cursor:

Install in Cursor:

To install the Material UI MCP Server in Cursor, copy and paste the following link into your browser's address bar:

cursor://anysphere.cursor-deeplink/mcp/install?name=mui&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJtY3AtcmVtb3RlIiwiaHR0cHM6Ly9tdWktbWNwLWNsb3VkZmxhcmUuamdlbnRlcy53b3JrZXJzLmRldi9zc2UiXX0=

Or manually add to your Cursor settings:

{
  "mcpServers": {
    "mui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mui-mcp-cloudflare.jgentes.workers.dev/sse"
      ]
    }
  }
}

Option 2: Deploy Your Own

Deploy your own instance to Cloudflare Workers:

Click the "Deploy to Cloudflare Workers" button at the top
After deployment, your MCP will be available at: https://mui-mcp-cloudflare.<your-account>.workers.dev/sse
Connect to Claude Code:

claude mcp add mui npx mcp-remote https://mui-mcp-cloudflare.<your-account>.workers.dev/sse

Or manually edit your config:

{
  "mcpServers": {
    "mui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mui-mcp-cloudflare.<your-account>.workers.dev/sse"
      ]
    }
  }
}

Option 3: Local Server

For running using the Wrangler CLI:

# Install dependencies
npm install

# Run locally (starts on http://localhost:8787)
npm run dev

Connect to your local instance:

Claude Code:

claude mcp add mui npx mcp-remote http://localhost:8787/sse

Manual config:

{
  "mcpServers": {
    "mui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse"
      ]
    }
  }
}

🛠️ How It Works

This MCP server fetches documentation directly from mui.com and provides structured information to AI assistants. It helps ensure:

✅ Consistency - Correct Material UI component usage across projects
✅ Efficiency - Quick component discovery prevents unnecessary custom development
✅ Accuracy - Direct access to official documentation ensures proper implementation
✅ Customization - Full support for Material UI's theming and styling system
✅ Best Practices - Includes accessibility guidelines and proper usage patterns

📚 Example Usage

When connected to Claude Code, you can ask questions like:

"List all available Material UI components"
"Show me how to use the Button component"
"Find components for building forms"
"How do I set up Material UI theming?"
"What's the best way to customize Material UI components?"
"Show me data display components"

The MCP will provide accurate, up-to-date information with direct links to the official Material UI documentation.

🔧 Customization

To modify the MCP server, edit src/index.ts:

Update component lists in the COMPONENTS constant
Add new tools using this.server.tool(...)
Modify search categories in COMPONENT_MAP
Enhance documentation extraction methods

📦 Versioning & Releases

This project uses release-it with conventional changelog for versioning.

For Maintainers

To create a new release:

npm run release

This will:

Prompt you to select version bump (patch/minor/major)
Update package.json version
Generate/update CHANGELOG.md from commit messages
Create a git tag
Push changes to GitHub
Create a GitHub release

Commit Message Format

Use Conventional Commits format for automatic changelog generation:

feat: add new component tool - New features (minor version bump)
fix: correct component URL - Bug fixes (patch version bump)
docs: update installation guide - Documentation changes
chore: update dependencies - Maintenance tasks
BREAKING CHANGE: in commit body - Breaking changes (major version bump)

See CHANGELOG.md for release history.

📄 License

MIT

🙏 Credits

Built with Cloudflare Workers
Documentation from Material UI
Implements the Model Context Protocol