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