@hy-app/mcp
Allows checking hy-app component compatibility with Alipay mini programs.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@@hy-app/mcp帮我找一个弹窗组件"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
@hy-app/mcp
华玥组件库 (hy-app) MCP 服务器,为 AI 编辑器提供组件文档查询支持,帮助 AI 准确使用 hy-app 组件。
安装
# 全局安装
npm install -g @hy-app/mcp
# 或使用 npx(无需安装)
npx @hy-app/mcpRelated MCP server: appCN
可用工具
工具名 | 说明 |
| 搜索组件,支持中英文名称模糊匹配 |
| 获取组件 API(Props/Events/Slots) |
| 获取组件使用示例代码 |
| 查询组件平台兼容性 |
| 获取 Hook 文档(useToast、useShare 等) |
| 获取工具函数文档(http、throttle 等) |
| 获取开发指南(主题、国际化等) |
| 校验组件用法是否正确 |
Cursor 配置
打开 Cursor 设置 → MCP,添加以下配置:
方式一:使用 npx(推荐,无需安装)
{
"mcpServers": {
"hy-app": {
"command": "npx",
"args": ["@hy-app/mcp"]
}
}
}方式二:全局安装后
{
"mcpServers": {
"hy-app": {
"command": "hy-app-mcp"
}
}
}方式三:项目本地安装
{
"mcpServers": {
"hy-app": {
"command": "node",
"args": ["./node_modules/@hy-app/mcp/dist/index.js"]
}
}
}配置文件位置:
Windows:
%APPDATA%\Cursor\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.jsonmacOS:
~/Library/Application Support/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
也可以在 Cursor 中通过 Cmd/Ctrl + Shift + P → 输入 MCP → 点击 Edit MCP Settings 直接编辑。
Cursor 使用示例
在 Cursor 对话框中:
# 搜索组件
帮我找一个弹窗组件
# 查看组件 API
获取 Button 组件的 Props 信息
# 查看平台兼容性
Form 组件支持支付宝小程序吗?
# 获取使用示例
给我 Loading 组件的加载中示例代码
# 校验代码
检查这段代码是否有属性错误:
<hy-button type="primary" size="big" @click="handleClick">Trae 配置
方式一:全局安装后
打开 Trae 设置 → 对话 → MCP 配置:
{
"mcpServers": {
"hy-app": {
"command": "hy-app-mcp"
}
}
}方式二:使用 npx
{
"mcpServers": {
"hy-app": {
"command": "npx",
"args": ["@hy-app/mcp"]
}
}
}Trae 使用示例
在 Trae 对话框中直接提问,AI 会自动调用 MCP 工具:
# 示例 1:了解组件用法
我想在项目中使用 hy-app 的 Picker 组件,帮我生成一个基础选择器的代码
# 示例 2:平台兼容性检查
我的项目需要运行在微信小程序上,Radio 组件能用吗?
# 示例 3:Hook 使用
教我用 useToast Hook 实现一个全局提示
# 示例 4:主题定制
我想把组件库的主题色改为 #FF6600,应该怎么做?
# 示例 5:代码校验
帮我检查这段 hy-input 的用法是否正确:
<hy-input v-model="value" type="email" :clearable="true" placeholder="请输入邮箱" />工具详细说明
search_components
搜索组件,返回匹配的组件列表。
{
"componentName": "搜索关键词",
"category": "可选,分类过滤"
}get_component_api
获取组件 API 文档。
{
"componentName": "button",
"section": "可选:props | events | slots | all,默认 all",
"detail": "可选:是否返回完整详情,默认 true。设为 false 可减少 token,只返回 name/type/default/enum",
"includeExamples": "可选:是否包含示例代码,默认 false"
}get_component_examples
获取组件使用示例代码。
{
"componentName": "button",
"feature": "可选,按功能关键词过滤",
"listOnly": "可选,只返回标题列表,默认 false"
}check_platform_support
查询组件平台兼容性。
{
"componentName": "button",
"platform": "可选:app | h5 | weixin | alipay"
}get_hook_doc
获取 Hook 文档。
{
"name": "useToast",
"includeExamples": "可选,默认 false"
}get_tool_doc
获取工具函数文档。
{
"name": "http",
"includeExamples": "可选,默认 false"
}get_guide
获取开发指南。
{
"topic": "theme | locale | style | intro",
"query": "可选,搜索特定内容"
}validate_component_usage
校验组件用法。
{
"componentName": "button",
"code": "<hy-button type='error' size='big' @click='handleClick'>"
}Token 优化说明
本 MCP 服务针对 AI 编辑器的 token 消耗做了优化:
get_component_api 默认不返回示例代码,需通过
includeExamples=true或单独调用get_component_examples获取get_component_api 支持
detail=false精简模式,只返回{name, type, default, enum},适合快速查阅get_hook_doc / get_tool_doc 默认不返回示例代码
get_component_examples 支持
listOnly=true先查看标题列表,再按需获取具体代码search_components 返回精简摘要,最多 10 条结果
组件名支持
hy-前缀,hy-list和list都能匹配到 List 组件
License
MIT
This server cannot be deployed
Maintenance
Related MCP Connectors
MCP server for AI dialogue using various LLM models via AceDataCloud
MCP server for secureFlows: token-free URL builders and integration-linting tools for AI agents.
The official MCP server for Capawesome documentation and Capawesome Cloud.
Related MCP Servers
- AlicenseAqualityCmaintenanceMCP server that exposes the @bunge/ds-components design system catalog, allowing AI assistants to list, search, and retrieve component details including inputs, outputs, usage examples, and import instructions.4MIT
- AlicenseAqualityCmaintenanceMCP server for appCN - discover, search, install, and correctly use copy-paste React Native / Expo UI components (including an AI-native collection) from the live registry51 npm3MIT
- AlicenseBqualityDmaintenanceAn MCP server that scans React and Vue projects, extracts component metadata (props, slots, events, imports, usage), and exposes it to AI coding agents via structured tools.71MIT
- FlicenseAqualityNot gradedmaintenanceMCP server enabling AI agents to search, retrieve details, and compare UI components from 13 popular UI libraries.3-