MeshMCP - Mesh Design System MCP Server

A stdio-based Model Context Protocol (MCP) server that provides Claude Code (VS Code) access to the Mesh Design System components, design tokens, and prototyping tools.

Features

• 🎨 Component Discovery - List all Mesh Design System components

• 📋 Component Details - Get props, examples, and design guidance

• 🎨 Design Tokens - Access colors, typography, and spacing tokens

• 🔄 Placeholder Data - Generate realistic insurance/healthcare test data

• 🔍 Use Case Search - Find components for specific UI patterns

• 💻 Code Generation - Generate React prototype code with Mesh components

• ⚡ Smart Caching - File-based caching with TTL for performance

Related MCP server: SupaUI MCP Server

Quick Start

1. Install Dependencies

⚠️ Dependencies Fixed! See INSTALL.md for detailed installation instructions.

pip install -r requirements.txt
playwright install chromium

2. Test the Server

python3 test_mcp.py

3. Configure in VS Code

Add to ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json:

{
  "mcpServers": {
    "mesh-design-system": {
      "command": "python3",
      "args": ["main.py"],
      "cwd": "/Users/luke.ylias/Documents/GitHub/MeshMCP"
    }
  }
}

Restart VS Code and start using the tools with Claude!

Available Tools

Project Structure

MeshMCP/
├── main.py                    # FastMCP server entry point
├── requirements.txt           # Python dependencies
├── test_mcp.py               # Test script
├── SETUP.md                  # Detailed setup guide
├── QUICK_START.md            # Quick reference
├── scrapers/
│   └── mesh_scraper.py       # Web scraping with Playwright
├── cache/
│   └── cache_manager.py      # File-based caching
├── generators/
│   └── data_generator.py     # Placeholder data generation
└── models/
    └── mcp_models.py         # Pydantic models

How It Works

Claude Code (VS Code)
    ↓ stdio (JSON-RPC)
FastMCP Server (main.py)
    ↓
┌─────────────────────────────┐
│  mesh_scraper.py (Playwright)│ → Mesh Design System
│  cache_manager.py (File)    │ → cache_data/
│  data_generator.py (Faker)  │ → Test data
└─────────────────────────────┘

Troubleshooting

Server not connecting?

# Verify installation
python3 test_mcp.py

# Check MCP package
pip list | grep mcp

Cache issues?

# Clear cache (will regenerate)
rm -rf cache_data/

Playwright errors?

# Reinstall browsers
playwright install --force chromium

Documentation

• QUICK_START.md - Installation & configuration in 3 steps

• SETUP.md - Complete setup guide with troubleshooting

Tech Stack

• MCP SDK - Model Context Protocol for Claude integration

• Playwright - Web scraping for component data

• Faker - Realistic Australian insurance data generation

• Pydantic - Data validation

• aiofiles - Async file operations for caching

License

See LICENSE file for details.