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 name
description: Component description and usage
props: Mapping of prop names to their types, descriptions, and defaults
codeExamples: Array of code snippets
storybookUrl: Direct link to Storybook page
designGuidance: 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:8000
The 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/ directory
Automatic 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

security - not tested

license - not found

quality - not tested

How are these scores calculated?

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

MCP Server Demo
tian1ll1
-
security
F
license
-
quality
A demonstration implementation of the Model Context Protocol server that facilitates communication between AI models and external tools while maintaining context awareness.
Last updated -
Python
SupaUI MCP Server
buoooou
A
security
F
license
A
quality
A Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.
Last updated -
3
431
4
TypeScript
TouchDesigner MCP
8beeeaaat
-
security
A
license
-
quality
A 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 -
59
72
TypeScript
MIT License
EDA Tools MCP Server
NellyW8
A
security
F
license
A
quality
A 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 -
6
13
JavaScript

View all related MCP servers

Mesh Design System MCP Server