useVyre Context

本地服务

usevyre.com开发工具712 周前更新

代码仓库访问官网

关于 useVyre Context

useVyre Context 是面向使用 useVyre 组件的开发者和 AI 编码工具的 MCP 服务。它提供组件属性、变体、设计令牌、示例和反模式信息，辅助代码生成。

主要功能

01获取组件上下文和示例
02列出有效属性及取值
03验证属性值
04按使用场景推荐组件
05查询设计令牌和反模式

适用场景

01检查 Button 的有效变体
02编码前验证组件属性
03为界面需求选择组件
04查看设计令牌和已知问题

MCP 相关

该服务向 Claude Desktop 和其他 MCP 客户端提供 useVyre 组件上下文与验证工具。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "gapra-usevyre-context": {
      "command": "npx",
      "args": [
        "-y",
        "@usevyre/mcp-server"
      ]
    }
  }
}

启动命令npx -y @usevyre/mcp-server

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@usevyre/mcp-server1.0.3stdio

工具

收录的工具列表 · 更新于 2 周前

参数	类型	必填	说明
component	string	是	组件名称（例如 'Button'、'Badge'、'Card'）

详细介绍

@usevyre/mcp-server

适用于 useVyre 的 MCP（Model Context Protocol）服务，可让 Claude Desktop 和其他 MCP 客户端实时访问组件上下文、有效属性和反模式。

设置 — Claude Desktop

添加到 ~/Library/Application Support/Claude/claude_desktop_config.json：

{
  "mcpServers": {
    "usevyre": {
      "command": "npx",
      "args": ["-y", "@usevyre/mcp-server"]
    }
  }
}

重启 Claude Desktop。useVyre 工具将显示在工具面板中。

可用工具

工具	描述
`get_component_info`	组件的完整上下文 — 属性、变体、反模式和示例
`get_valid_props`	组件所有有效的属性名称和值
`check_valid_prop_value`	生成代码前验证特定属性值
`suggest_component`	为特定用例查找合适的组件
`get_token_info`	按名称或类别查找设计令牌
`get_full_context`	完整的 AI 上下文块（所有组件和令牌）
`get_anti_patterns`	所有已知的幻觉模式，可按组件筛选
`get_version_info`	软件包版本和上下文有效性信息

示例提示词

"What are the valid variants for the Button component?"
→ get_valid_props({ component: "Button" })

"Is variant='error' valid on Alert?"
→ check_valid_prop_value({ component: "Alert", prop: "variant", value: "error" })

"What component should I use for a search box?"
→ suggest_component({ useCase: "search box with keyboard navigation" })