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

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

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.

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

How are these scores calculated?

Resources

GitHub Repository

Need Help?

Report Issue

Related Servers

Mesh Design System MCP Server