-
securityF
license-
qualityA demonstration implementation of the Model Context Protocol server that facilitates communication between AI models and external tools while maintaining context awareness.
Last updated -
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.
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 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 |
| 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 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
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
A Model Context Protocol server that provides AI assistants access to Mesh Design System components and design tokens, enabling AI-powered development tools to natively understand and utilize these UI components.
Related MCP Servers
- AsecurityFlicenseAqualityA Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.Last updated -3216
- -securityAlicense-qualityA Model Context Protocol server that enables AI agents to control and operate TouchDesigner projects through creation, modification, and querying of nodes and project structures.Last updated -6794MIT License
- AsecurityFlicenseAqualityA comprehensive Model Context Protocol server that connects AI assistants to Electronic Design Automation tools, enabling Verilog synthesis, simulation, ASIC design flows, and waveform analysis through natural language interaction.Last updated -628