Varlet UI 的模型上下文协议服务器 为 AI 助手提供对 Varlet UI 文档、组件 API 和开发资源的全面访问。

📖 向导

• ** 🚀 快速启动** - 5分钟内启动
• ** 📚 用户指南** - 一份全面的使用指南
• ** 🔧 故障排除** - 常见问题解决方案

🌟 特色

• 🔍 组件 API 访问：获取 Varlet UI 组件、道具、事件和槽的详细信息。
• 📚 文档工具：访问安装指南、功能文档和最佳实践。
• 🎯 智能提示词：预建的组件使用、布局设计和故障排除提示。
• 🚀 性能优化：内置缓存和高效数据检索。
• 🌐 多语言支持：支持国际化。
• 🔄 版本管理：支持多个 Varlet UI 版本。
• 📱 移动优先：针对移动开发工作流程进行了优化。
• 🛠️ 开发者体验：丰富的工具和调试功能。

📦 安装

先决条件

• Node.js 18+
• NPM 或 PNPM
• Claude Desktop 或其他兼容 MCP 的客户端

从 npm 安装（推荐）

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: