-
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.
Mesh Design System MCP Server
A Model Context Protocol (MCP) server that provides AI assistants access to the Mesh Design System components and design tokens.
Overview
This MCP server acts as a bridge between AI-powered development tools (like Cursor.ai) and the Mesh Design System, enabling AI assistants to natively understand and utilize Mesh components.
Features
Component Discovery: Lists all available UI components in the Mesh Design System
Component Details: Provides comprehensive information about specific components including props, usage guidelines, and code examples
Design Tokens: Access to core design tokens (colors, typography, spacing)
Caching: Intelligent caching system to optimize performance and reduce scraping overhead
Docker Support: Containerized deployment for easy scaling
MCP Tools
1. listComponents
Returns a list of all available components in the Mesh Design System.
Input: None Output: JSON array of component names
2. getComponentDetails
Fetches detailed information for a specific component.
Input:
componentName(string): Name of the component
Output: JSON object containing:
name: Component namedescription: Component description and usageprops: Mapping of prop names to their types, descriptions, and defaultscodeExamples: Array of code snippetsstorybookUrl: Direct link to Storybook pagedesignGuidance: Usage guidelines
3. getDesignTokens
Provides core design tokens.
Input:
tokenType(optional string): Type of tokens ("colors", "typography", "spacing", or "all")
Output: JSON object with design tokens
Installation
Local Development
Clone the repository:
git clone <repository-url>
cd MeshMCP
Install dependencies:
pip install -r requirements.txt
Install Playwright browsers:
playwright install chromium
Run the server:
python main.py
The server will be available at http://localhost:8000
Docker Deployment
Build and run with Docker Compose:
docker-compose up --build
Or build and run manually:
docker build -t mesh-mcp-server .
docker run -p 8000:8000 mesh-mcp-server
API Endpoints
GET /: Health check endpoint
GET /tools: Returns the MCP manifest with available tools
POST /tools/{tool_name}/invoke: Execute a specific MCP tool
Usage with AI Assistants
Cursor.ai Integration
Configure Cursor.ai to connect to the MCP server endpoint:
http://localhost:8000The AI assistant can now use the tools to:
Discover available Mesh components
Get detailed component information
Access design tokens for consistent styling
Example Queries
"What components are available in the Mesh Design System?"
"Show me the props for the Button component"
"What are the available color tokens?"
"Generate a form using Mesh components"
Configuration
Environment variables:
LOG_LEVEL: Logging level (default: INFO)CACHE_TTL: Cache TTL in seconds (default: 3600 for components list, 7200 for details)
Caching
The server implements intelligent caching:
Components list: 1 hour TTL
Component details: 2 hours TTL
Design tokens: 2 hours TTL
Cache stored in
cache_data/directoryAutomatic cleanup of expired entries
Error Handling
The server includes robust error handling for:
Component not found scenarios
Web scraping failures
Invalid input parameters
Network timeout issues
Development
Project Structure
MeshMCP/
├── main.py # FastAPI application entry point
├── models/
│ ├── __init__.py
│ └── mcp_models.py # Pydantic models for MCP
├── scrapers/
│ ├── __init__.py
│ └── mesh_scraper.py # Web scraping logic
├── cache/
│ ├── __init__.py
│ └── cache_manager.py # Caching system
├── requirements.txt # Python dependencies
├── Dockerfile # Container configuration
├── docker-compose.yml # Docker Compose setup
└── README.md # This file
Testing
Test the server endpoints:
# Health check
curl http://localhost:8000/
# Get available tools
curl http://localhost:8000/tools
# List components
curl -X POST http://localhost:8000/tools/listComponents/invoke \
-H "Content-Type: application/json" \
-d '{"arguments": {}}'
# Get component details
curl -X POST http://localhost:8000/tools/getComponentDetails/invoke \
-H "Content-Type: application/json" \
-d '{"arguments": {"componentName": "Button"}}'
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 -3206
- -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 -20890MIT 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 -627