varlet_mcp

william999xue/varlet_mcp

1 Stars 14 次浏览更新于 2026-08-23

一个用于Varlet UI的模型上下文协议服务器，为AI助手提供了访问Varlet UI文档、组件API和开发资源的全面途径。](https://badge.fury.

开发者工具

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

{
  "mcpServers": {
    "varlet-ui": {
      "args": [],
      "command": "varlet-mcp-server",
      "env": {
        "CACHE_TTL": "3600000",
        "VARLET_VERSION": "latest"
      }
    }
  }
}

该服务需要配置环境变量：CACHE_TTL、VARLET_VERSION

服务介绍

Varlet MCP Server

📖 指南

🚀 快速开始 - 在 5 分钟内启动并运行
📚 用户指南 - 全面的使用指南
🔧 故障排除 - 常见问题解决方案

🌟 特性

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

📦 安装

前提条件

Node.js 18+
npm 或 pnpm
Claude Desktop 或其他兼容 MCP 的客户端

从 npm 安装（推荐）


npm install -g @varlet/mcp

从源代码安装


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

cd varlet-mcp

pnpm install

pnpm run build

npm link

验证安装


varlet-mcp-server --version

🚀 使用

与 Claude Desktop 集成

将以下内容添加到您的 Claude Desktop 配置文件中：

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"

      }

    }

  }

}

与其他 MCP 客户端集成

直接启动服务器：


varlet-mcp-server

或者使用 npx：


npx @varlet/mcp

Claude 中的使用示例

配置完成后，您可以向 Claude 提出如下问题：

"如何使用 Varlet Button 组件？"
"显示 Vite 的安装指南"
"var-input 的属性有哪些？"
"使用 Varlet 组件生成一个移动布局"
"帮助我从 Element Plus 迁移到 Varlet"

🛠️ 可用工具

API 工具

工具	描述	参数
`get_varlet_api_by_version`	下载并缓存 Varlet API 类型	`version` (字符串)
`get_component_api_by_version`	获取详细的组件 API 信息	`componentName`, `version`
`get_directive_api_by_version`	获取指令 API 信息	`directiveName`, `version`
`get_varlet_components_list`	获取所有可用组件的列表	`version`

文档工具

工具	描述	参数
`get_installation_guide`	获取安装说明	`platform`, `ssr`, `fresh`
`get_feature_guides`	获取可用功能列表	-
`get_feature_guide`	获取详细的特性指南	`feature`
`get_varlet_exports`	获取包导出列表	-
`get_frequently_asked_questions`	获取常见问题的内容	-
`get_release_notes_by_version`	获取特定版本的发布说明	`version`
`get_varlet_playground_examples`	获取 playground 示例	`component`

智能提示

提示	描述	用例
`varlet_component_usage`	生成组件使用示例	学习组件 API
`varlet_layout_design`	生成布局设计建议	构建应用程序布局
`varlet_troubleshooting`	生成故障排除指南	调试问题
`varlet_performance_optimization`	生成优化指南	提高应用程序性能

📚 资源

服务器提供了几种结构化的资源：

资源URI	内容类型	描述
`varlet://api/components`	`application/json`	Varlet组件的完整列表，已分类
`varlet://api/directives`	`application/json`	可用指令及其使用示例
`varlet://api/utilities`	`application/json`	实用函数、服务和辅助工具
`varlet://examples/quick-start`	`text/markdown`	包含代码示例的快速入门指南

资源示例


// 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')

🔧 开发

设置


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

cd varlet-mcp

pnpm install

开发模式


pnpm run dev

构建


pnpm run build

测试


pnpm test

代码检查


pnpm run lint

pnpm run lint:fix

查看源码项目主页