项目简介

'nuxt-mcp' 和 'vite-plugin-mcp' 是为 Nuxt 和 Vite 应用设计的 MCP 服务器插件。它们允许大型语言模型 (LLM) 访问您的 Vite 或 Nuxt 应用的配置信息，从而帮助模型更好地理解您的前端项目。此插件通过 Vite 插件或 Nuxt 模块的形式集成，在开发服务器中运行，为 MCP 客户端提供标准化的上下文访问能力。

主要功能点

Vite/Nuxt 配置信息访问: 提供工具使 LLM 能够获取 Vite 或 Nuxt 的详细配置信息，包括但不限于：根目录、别名配置、插件列表、运行时配置、模块配置、组件信息、自动导入配置等。
Vite 模块信息查询: 允许 LLM 查询 Vite 模块的详细信息，例如模块 ID、URL、导入者、元数据、HMR 信息等，从而深入了解项目模块依赖关系和结构。
自动 Cursor 配置更新: 如果项目根目录下存在 '.cursor' 目录，插件可以自动更新 '.cursor/mcp.json' 文件，写入 MCP 服务器的地址，简化 Cursor 等 MCP 客户端的配置流程。

安装步骤

对于 Nuxt 项目:

使用 npm 或 yarn 安装 'nuxt-mcp' 模块:

npm install nuxt-mcp
# 或
yarn add nuxt-mcp

将 'nuxt-mcp' 添加到 'nuxt.config.ts' 的 'modules' 配置项中:

export default defineNuxtConfig({
  modules: ['nuxt-mcp'],
  // ...
})

对于 Vite 项目:

使用 npm 或 yarn 安装 'vite-plugin-mcp' 插件:

npm install vite-plugin-mcp
# 或
yarn add vite-plugin-mcp

将 'ViteMcp' 插件添加到 'vite.config.ts' 的 'plugins' 配置项中:

import { defineConfig } from 'vite'
import { ViteMcp } from 'vite-plugin-mcp'

export default defineConfig({
  plugins: [
    ViteMcp(),
  ],
  // ...
})

服务器配置

MCP 客户端（如 Cursor）需要配置以下 JSON 信息以连接到此 MCP 服务器。此配置描述了如何启动和连接到由 'vite-plugin-mcp' 或 'nuxt-mcp' 提供的 MCP 服务器：

{
  "serverName": "vite-mcp",
  "command": "npm run dev",
  "args": [],
  "url": "http://localhost:5173/__mcp/sse"
}

配置参数说明:

'serverName': MCP 服务器的名称，可以自定义，例如 "vite-mcp" 或 "nuxt-mcp"。
'command': 启动 Vite 或 Nuxt 开发服务器的命令。通常为 'npm run dev' 或 'yarn dev'，请根据你的项目实际启动命令配置。请确保此命令能成功启动你的前端开发服务器。
'args': 启动命令的参数，通常为空数组 '[]'。
'url': MCP 服务器的 SSE 连接地址。
- 'http://localhost:5173'： Vite 默认开发服务器地址和端口。如果你的 Vite 配置修改了端口，请相应更改。Nuxt 默认端口为 3000，如果使用 Nuxt 插件，且未修改端口，则应为 'http://localhost:3000'。
- '/__mcp/sse'： 'vite-plugin-mcp' 和 'nuxt-mcp' 默认的 MCP 路径和 SSE 协议 endpoint。如果配置了 'mcpPath' 选项，请修改为相应的路径。

重要提示:

开发服务器运行: 'vite-plugin-mcp' 和 'nuxt-mcp' 作为 Vite/Nuxt 插件运行在开发服务器中。必须先启动 Vite 或 Nuxt 开发服务器 ('npm run dev' 或 'yarn dev')，MCP 服务器才能正常工作。
端口匹配: 请确保 'url' 中的端口号与你的 Vite 或 Nuxt 开发服务器实际运行的端口号一致。Vite 默认端口是 5173，Nuxt 默认端口是 3000。
路径匹配: 默认 MCP 路径为 '/__mcp'，如果配置项 'mcpPath' 被修改，'url' 也需要同步修改。

基本使用方法

启动开发服务器: 在你的 Vite 或 Nuxt 项目根目录下，运行 'npm run dev' 或 'yarn dev' 启动开发服务器。这将同时启动 MCP 服务器插件。
配置 MCP 客户端: 打开 MCP 客户端（如 Cursor），按照上述 “服务器配置” 部分的说明，填写正确的服务器配置信息。
连接和使用: 在 MCP 客户端中连接到配置的 MCP 服务器。连接成功后，客户端即可调用插件提供的工具，例如 'get-vite-config', 'get-nuxt-config', 'get-vite-module-info', 'get-nuxt-components', 'get-nuxt-auto-imports-items' 等，获取 Vite/Nuxt 应用的配置和模块信息，为 LLM 提供上下文数据，以支持代码理解、智能提示等功能。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息