MeshMCP

@lukeylias/MeshMCP

0 Stars 4 次浏览 lukeylias 更新于 2026-08-23

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

{
  "mcpServers": {
    "mesh-design-system": {
      "args": [
        "main.py"
      ],
      "command": "python3",
      "cwd": "/Users/luke.ylias/Documents/GitHub/MeshMCP"
    }
  }
}

服务介绍

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

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.

查看源码项目主页