README.mdā¢3.92 kB
# 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.