Varlet MCP Server

📖 Guides

• 🚀 Quick Start - Get up and running in 5 minutes
• 📚 User Guide - A comprehensive guide to usage
• 🔧 Troubleshooting - Solutions to common problems

🌟 Features

• 🔍 Component API Access: Get detailed information about Varlet UI components, props, events, and slots.
• 📚 Documentation Tools: Access installation guides, feature documentation, and best practices.
• 🎯 Smart Prompts: Pre-built prompts for component usage, layout design, and troubleshooting.
• 🚀 Performance Optimized: Built-in caching and efficient data retrieval.
• 🌐 Multi-language Support: Support for internationalization.
• 🔄 Version Management: Support for multiple Varlet UI versions.
• 📱 Mobile First: Optimized for mobile development workflows.
• 🛠️ Developer Experience: Rich tools and debugging features.

📦 Installation

Prerequisites

• Node.js 18+
• npm or pnpm
• Claude Desktop or other MCP-compatible client

Install from npm (Recommended)

npm install -g @varlet/mcp

Install from Source

git clone https://github.com/varletjs/varlet-mcp.git
cd varlet-mcp
pnpm install
pnpm run build
npm link

Verify Installation

varlet-mcp-server --version

🚀 Usage

{
  "mcpServers": {
    "varlet-ui": {
      "command": "npx",
      "args": [
        "-y",
        "@fe-fast/varlet-mcp"
      ],
      "env": {
        "VARLET_VERSION": "latest",
        "CACHE_TTL": "3600000"
      }
    }
  }
}

Integration with Claude Desktop

Add to your Claude Desktop configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%/Claude/claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "varlet-ui": {
      "command": "varlet-mcp-server",
      "args": [],
      "env": {
        "VARLET_VERSION": "latest",
        "CACHE_TTL": "3600000"
      }
    }
  }
}

Integration with Other MCP Clients

Start the server directly:

varlet-mcp-server

Or use npx:

npx @varlet/mcp

Usage Examples in Claude

Once configured, you can ask Claude questions like: