MeshMCP by lukeylias - MCP Server

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

Quick Start

1. Install Dependencies

⚠️ Dependencies Fixed! See 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

Tool	Description	Example
`list_components`	Lists all Mesh components	"List all Mesh components"
`get_component_details`	Get component props & examples	"Get details for Button component"
`get_design_tokens`	Retrieve design tokens	"Show me Mesh color tokens"
`generate_placeholder_data`	Generate test data	"Generate 5 member records"
`search_components_by_use_case`	Find components for use cases	"Components for a data table"
`generate_prototype_code`	Generate React code	"Create a member signup form"

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

- Installation & configuration in 3 steps
- 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.