Provides containerized deployment of the MCP server using Docker for easy scaling and deployment options.
Uses FastAPI for the API endpoints that serve the MCP server functionality, including health checks, tool listings, and tool invocation.
Employs Pydantic models to structure the MCP request/response data, ensuring type validation for the API interactions.
Integrates with Storybook to provide direct links to component documentation, allowing AI assistants to reference visual examples of Mesh components.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Mesh Design System MCP Servershow me the available form components"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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 chromium2. Test the Server
python3 test_mcp.py3. 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 |
| Lists all Mesh components | "List all Mesh components" |
| Get component props & examples | "Get details for Button component" |
| Retrieve design tokens | "Show me Mesh color tokens" |
| Generate test data | "Generate 5 member records" |
| Find components for use cases | "Components for a data table" |
| 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 modelsHow 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 mcpCache issues?
# Clear cache (will regenerate)
rm -rf cache_data/Playwright errors?
# Reinstall browsers
playwright install --force chromiumDocumentation
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.