MCP 服务器

AI Elements Vue 支持模型上下文协议（MCP），用于模型驱动的开发。

模型上下文协议（MCP） 是一个开放标准，允许 Claude、Cursor 和其他 AI 驱动的工具等 AI 助手安全地连接到外部数据源和系统。可以将其视为一个"通用遥控器"，让你的 AI 工具能够访问真实世界的数据和功能。

AI Elements Vue 支持 MCP，以增强你的 AI 开发工作流程。

安装指南

步骤 1：选择你的 AI 工具

首先，确保你使用的是支持 MCP 的 AI 开发工具：

Claude Desktop（免费 - 推荐初学者使用）
Claude Code（AI 编程助手）
Cursor（AI 驱动的代码编辑器）
Windsurf by Codeium（AI 开发平台）
其他兼容 MCP 的工具

步骤 2：定位你的配置文件

根据你的 AI 工具，你需要编辑以下文件之一：

Claude Desktop：Claude/claude_desktop_config.json
Claude Code：.claude.json
Cursor：.cursor/mcp.json
Windsurf：.codeium/windsurf/mcp_config.json
其他工具：查看你工具的 MCP 文档

步骤 3：添加 AI Elements Vue 配置

选项 A：手动配置（所有工具）

将此配置复制并粘贴到你的 MCP 配置文件中：

.cursor/mcp.json

{
  "mcpServers": {
    "ai-elements-vue": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://registry.ai-elements-vue.com/mcp"
      ]
    }
  }
}

选项 B：快速安装（仅限 Claude Code）

如果你使用 Claude Code，可以使用内置命令：

claude mcp add --transport http ai-elements-vue https://registry.ai-elements-vue.com/mcp

这会将服务器自动添加到你的 .claude.json 配置中。

步骤 4：重启你的 AI 工具

关闭并重新打开你的 AI 应用程序以使更改生效。

步骤 5：验证连接

通过询问你的 AI 助手来测试集成：

"有哪些 AI Elements Vue 组件可用于构建 AI 应用？"

如果成功，你的 AI 应该能够列出并解释 AI Elements Vue 组件！

多个 MCP 服务器

你可以将 AI Elements Vue 与其他 MCP 服务器一起使用：

.cursor/mcp.json

{
  "mcpServers": {
    "ai-elements-vue": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://registry.ai-elements-vue.com/mcp"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"]
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    }
  }
}