Nuxtui MCP Server

Nuxt UI MCP服务器

通过xflo.ai

模型上下文协议（MCP）服务器，为AI助手提供对Nuxt UI组件、文档和使用示例的全面访问。该服务器使Windsurf、Claude Desktop、Cursor和其他MCP兼容客户端等AI工具能够与Nuxt UI无缝协作。

⚠️ 安全通知

这是仅供内部使用和受信任环境使用的开发软件。

⚠️ 已知的安全限制：

• 外部API请求未得到充分验证（SSRF风险）
• 组件名称没有严格消毒（注射风险）
• 错误消息可能会暴露内部信息
• 从外部源解析HTML而不进行完全净化
• 无速率限制或请求大小限制

建议：

• 仅在受信任的内部开发环境中使用
• 不要将此服务器暴露于公共网络
• 考虑为生产使用实施额外的输入验证
• 监控日志以发现可疑活动

对于生产部署，请实施适当的安全控制或联系xflo.ai获取企业版本。

特性

• 📚 组件文档：访问所有50+Nuxt UI组件的详细文档
• 🔍 智能搜索：按名称或描述搜索组件
• 📝 源代码访问：直接从Nuxt UI存储库检索组件源代码
• 🎨 主题信息：获取主题和自定义详细信息
• 🚀 安装指南：Nuxt和Vue的框架特定安装说明
• 📦 类别筛选：按类别浏览组件（表单、导航、覆盖等）
• 💾 智能高速缓存：通过智能缓存减少API调用
• 🔧 TypeScript支持：全类型安全和智能感知

快速开始

使用npx（推荐）

使用Nuxt UI MCP服务器的最简单方法是使用npx：

# Basic usage
npx xflo-nuxtui-mcp-server

# With GitHub token for better rate limits (set as env var)
GITHUB_TOKEN=your_token_here npx xflo-nuxtui-mcp-server

Windsurf中的安装

将此配置添加到您的 ~/.codeium/windsurf/model_config.json:

{
  "mcpServers": {
    "nuxtui": {
      "command": "npx",
      "args": ["-y", "xflo-nuxtui-mcp-server"],
      "env": {
        "GITHUB_TOKEN": "ghp_your_token_here"  // Optional
      }
    }
  }
}

在Claude Desktop中安装

添加到您的Claude Desktop配置中：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "nuxtui": {
      "command": "npx",
      "args": ["xflo-nuxtui-mcp-server"]
    }
  }
}

在Cursor中安装

增添 ~/.cursor/mcp.json （全球）或 .cursor/mcp.json （项目特定）：

{
  "mcpServers": {
    "nuxtui": {
      "command": "npx",
      "args": ["-y", "xflo-nuxtui-mcp-server"]
    }
  }
}

可用工具

MCP服务器为AI助手提供以下工具：

1. list_nuxtui_components

获取所有可用Nuxt UI组件的列表。

参数：

• category （可选）：按类别筛选(components, forms, data, feedback, navigation, overlays, layout)

AI中的示例用法：

"List all Nuxt UI form components"
"Show me available navigation components in Nuxt UI"

2. get_component_details

获取特定组件的详细信息，包括道具、插槽、事件和使用示例。

参数：

• name （必填）：组件名称（例如，“按钮”、“模态”、“形式”）

AI中的示例用法：

"Show me details about the Nuxt UI button component"
"What props does the modal component accept?"

3. get_component_source

检索Nuxt UI组件的源代码。

参数：

• name （必填）：组件名称
• version （可选）：Git分支或标签（默认：'main'）

AI中的示例用法：

"Show me the source code for the Nuxt UI accordion component"
"Get the button component source from version 3.0.0"

4. search_components

按名称或描述中的关键字搜索组件。

参数：

• query （必填）：搜索词

AI中的示例用法：

"Search for Nuxt UI components related to forms"
"Find components with 'overlay' in their description"

5. get_installation_guide

获取Nuxt UI的全面安装说明。

AI中的示例用法：

"How do I install Nuxt UI?"
"Show me the Vue setup for Nuxt UI"

地方发展

先决条件

• Node.js v18或更高版本
• npm或纱线

设置

1. 克隆存储库：

git clone https://github.com/yourusername/nuxtui-mcp-server.git
cd nuxtui-mcp-server

1. 安装依赖项：

npm install

1. 构建服务器：

npm run build

1. 运行服务器：

npm start

发展模式

在热重载的开发模式下运行：

npm run dev

MCP检验员测试

使用MCP检查器进行调试：

npm run inspector

这将提供一个URL，用于访问浏览器中的调试工具。

环境变量

• GITHUB_TOKEN：用于更高API速率限制的GitHub个人访问令牌（可选但推荐）

项目结构

nuxtui-mcp-server/
├── src/
│   └── index.ts          # Main server implementation
├── dist/                 # Compiled output
├── package.json
├── tsconfig.json
├── README.md
└── LICENSE

运作原理

1. 组件发现：服务器从Nuxt UI文档中获取组件列表
2. 文档解析：使用Cheerio解析HTML文档以获取组件详细信息
3. 源代码检索：直接从GitHub获取组件源代码
4. 智能高速缓存：缓存响应以最小化API调用
5. MCP协议：实现AI工具通信的模型上下文协议

故障排除

速率限制

如果您遇到GitHub API速率限制：

1. 将GitHub个人访问令牌添加到您的环境中
2. 令牌将速率限制从每小时60个请求增加到5000个请求

未找到组件

如果找不到组件：

1. 验证组件名称是否完全匹配（区分大小写）
2. 检查该组件是否存在于最新的Nuxt UI版本中
3. 尝试使用搜索 search_components 工具

连接问题

如果服务器无法连接：

1. 确保已安装Node.js v18+
2. 检查您的MCP客户端配置
3. 使用MCP检查器进行调试

贡献

欢迎投稿！拜托：

1. 分叉存储库
2. 创建要素分支
3. 为新功能添加测试
4. 提交拉取请求

许可证

MIT许可证-有关详细信息，请参阅许可证文件

致谢

• 为 Nuxt用户界面 Nuxt团队开发的库
• 实施 模型上下文协议
• 受shadcn-ui MCP服务器实现的启发

链接

• Nuxt用户界面文档
• 模型上下文协议
• MCP SDK文档