Skip to main content
Glama

Mesh Design System MCP Server

by lukeylias
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.

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/lukeylias/MeshMCP'

If you have feedback or need assistance with the MCP directory API, please join our Discord server