https://github.com/varletjs/mcp
https://github.com/varletjs/mcp
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/varletjs/mcp
- Owner: varletjs
- License: mit
- Created: 2025-07-04T08:24:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-29T05:06:20.000Z (11 months ago)
- Last Synced: 2025-07-29T05:37:19.817Z (11 months ago)
- Language: TypeScript
- Size: 133 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# 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.
[](https://badge.fury.io/js/@varlet%2Fmcp)
[](https://opensource.org/licenses/MIT)
[](https://www.typescriptlang.org/)
## 📖 Guides
- **🚀 [Quick Start](./QUICK_START.md)** - Get up and running in 5 minutes
- **📚 [User Guide](./USER_GUIDE.md)** - A comprehensive guide to usage
- **🔧 [Troubleshooting](./USER_GUIDE.md#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)
```bash
npm install -g @varlet/mcp
```
### Install from Source
```bash
git clone https://github.com/varletjs/varlet-mcp.git
cd varlet-mcp
pnpm install
pnpm run build
npm link
```
### Verify Installation
```bash
varlet-mcp-server --version
```
## 🚀 Usage
```json
{
"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`
```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:
```bash
varlet-mcp-server
```
Or use npx:
```bash
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
```javascript
// 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
```bash
git clone https://github.com/varletjs/varlet-mcp.git
cd varlet-mcp
pnpm install
```
### Development Mode
```bash
pnpm run dev
```
### Build
```bash
pnpm run build
```
### Testing
```bash
pnpm test
```
### Linting
```bash
pnpm run lint
pnpm run lint:fix
```