Varlet MCP Server

A Model Context Protocol Server for Varlet UI

Provides AI assistants with comprehensive access to Varlet UI documentation, component APIs, and development resources.

📖 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:

• "How do I use the Varlet Button component?"
• "Show me the installation guide for Vite"
• "What are the props for var-input?"
• "Generate a mobile layout using Varlet components"
• "Help me migrate from Element Plus to Varlet"

🛠️ Available Tools

API Tools

Tool	Description	Parameters
get_varlet_api_by_version	Downloads and caches Varlet API types	version (string)
get_component_api_by_version	Gets detailed component API information	componentName, version
get_directive_api_by_version	Gets directive API information	directiveName, version
get_varlet_components_list	Gets a list of all available components	version

Documentation Tools

Tool	Description	Parameters
get_installation_guide	Gets installation instructions	platform, ssr, fresh
get_feature_guides	Gets a list of available features	-
get_feature_guide	Gets a detailed feature guide	feature
get_varlet_exports	Gets a list of package exports	-
get_frequently_asked_questions	Gets the content of frequently asked questions	-
get_release_notes_by_version	Gets release notes for a version	version
get_varlet_playground_examples	Gets playground examples	component

Smart Prompts

Prompt	Description	Use Case
varlet_component_usage	Generates component usage examples	Learning component APIs
varlet_layout_design	Generates layout design suggestions	Building application layouts
varlet_migration_guide	Generates migration guides	Switching from other UI libraries
varlet_troubleshooting	Generates troubleshooting guides	Debugging issues
varlet_performance_optimization	Generates optimization guides	Improving application performance

📚 Resources

The server provides several structured resources:

Resource URI	Content Type	Description
varlet://api/components	application/json	A complete list of Varlet components, categorized
varlet://api/directives	application/json	Available directives with usage examples
varlet://api/utilities	application/json	Utility functions, services, and helpers
varlet://examples/quick-start	text/markdown	A quick start guide with code examples

Resource Example

// Access the component list
const components = await mcp.readResource('varlet://api/components')

// Get the quick start guide
const guide = await mcp.readResource('varlet://examples/quick-start')

🔧 Development

Setup

git clone https://github.com/varletjs/varlet-mcp.git
cd varlet-mcp
pnpm install

Development Mode

pnpm run dev

Build

pnpm run build

Testing

pnpm test

Linting

pnpm run lint
pnpm run lint:fix