varletjs/mcp

12 stars 0 forks 品質 99 トレンド 99

A Model Context Protocol Server for Varlet UI Provides AI assistants with comprehensive access to Varlet UI documentation, component APIs, and development resources.

概要

A Model Context Protocol Server for Varlet UI Provides AI assistants with comprehensive access to Varlet UI documentation, component APIs, and development resources. - - Get up and running in 5 minutes - - A comprehensive guide to usage - - Solutions to common problems - 🔍 : Get detailed information about Varlet UI components, props, events, and slots. - 📚 : Access installation guides, feature documentation, and best practices. - 🎯 : Pre-built prompts for component usage, layout design, and troubleshooting. - 🚀 : Built-in caching and efficient data retrieval. - 🌐 : Support for internationalization. - 🔄 : Support for multiple Varlet UI versions. - 📱 : Optimized for mobile development workflows. - 🛠️ : Rich tools and debugging features. - Node.js 18+ - npm or pnpm - Claude Desktop or other MCP-compatible client Add to your Claude Desktop configuration file: : ~/Library/Application Support/Claude/claude_desktop_config.json : %APPDATA%/Claude/claude_desktop_config.json : ~/.

README

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:

“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

View this README on GitHub

インストール

npx -y @fe-fast/varlet-mcp

設定

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