Mesh Design System 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 [INSTALL.md](INSTALL.md) for detailed installation instructions. ```bash pip install -r requirements.txt playwright install chromium ``` ### 2. Test the Server ```bash python3 test_mcp.py ``` ### 3. Configure in VS Code Add to `~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json`: ```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?** ```bash # Verify installation python3 test_mcp.py # Check MCP package pip list | grep mcp ``` **Cache issues?** ```bash # Clear cache (will regenerate) rm -rf cache_data/ ``` **Playwright errors?** ```bash # Reinstall browsers playwright install --force chromium ``` ## Documentation - **[QUICK_START.md](QUICK_START.md)** - Installation & configuration in 3 steps - **[SETUP.md](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.