Skip to main content
Glama

Mesh Design System MCP Server

by lukeylias

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

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?

# 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

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.

-
security - not tested
F
license - not found
-
quality - not tested

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.

  1. Features
    1. Quick Start
      1. 1. Install Dependencies
      2. 2. Test the Server
      3. 3. Configure in VS Code
    2. Available Tools
      1. Project Structure
        1. How It Works
          1. Troubleshooting
            1. Documentation
              1. Tech Stack
                1. License

                  Related MCP Servers

                  • -
                    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 -
                    • Linux
                    • Apple
                  • 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
                    21
                    6
                  • -
                    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 -
                    67
                    94
                    MIT License
                    • Linux
                    • Apple
                  • 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
                    28
                    • Apple
                    • Linux

                  View all related MCP servers

                  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