About MCP
MCP is an MCP server published by varletjs in the Other category.
The repository has 12 stars and 2 forks, with the last commit a year ago. Six months or more without a commit doesn't mean the server is broken, but check the open issues before depending on it in production.
Install
From source
git clone https://github.com/varletjs/mcpThis server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.
Ask AI
✦
Ask AI about MCP
Powered by Claude · Grounded in docs
I know everything about MCP. Ask me about installation, configuration, usage, or troubleshooting.
Security checks
Static checks derived from the repository 2 days ago. Heuristics on the source, not an audit.
- ✓README presentThe repository ships documentation.
- ✓License declaredUsable under a stated license.
- !Tests presentNo tests found. Behaviour changes may go unnoticed between versions.
- !Dependencies pinnedNo lockfile. Installs can pull different code over time.
- ✓No dynamic code executionSource scan found no eval, dynamic Function, or shell execution.
1 check has not been run yet.
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
README fetched from the repository 2 days ago. The original is authoritative.