MCP Server

在 AI 助手中通过 Model Context Protocol 使用 Movk Nuxt。

什么是 MCP？

MCP (Model Context Protocol) 是一个标准化协议，使 AI 助手能够访问外部数据源和工具。Movk Nuxt 提供 MCP 服务器，让 AI 工具能够直接访问组件信息、API 文档和使用示例。

可用资源

MCP 服务器提供以下资源供 AI 发现和浏览：

资源 URI	描述
`resource://movk-nuxt/components`	组件完整列表，包含元数据和分类信息
`resource://movk-nuxt/composables`	组合式函数完整列表，包含元数据和分类信息
`resource://movk-nuxt/auto-form`	AutoForm 系统完整文档，包含配置、API、字段定义和自定义选项
`resource://movk-nuxt/data-table`	DataTable 系统完整文档，包含列配置、树形、分页和样式定制
`resource://movk-nuxt/api`	API 系统完整文档，包含插件配置、Hooks、Composables 和进度上传/下载
`resource://docs/documentation-pages`	所有可用文档页面的完整列表
`resource://docs/examples`	所有可用示例代码和演示的完整列表

在 Claude Code 等工具中使用 @ 访问这些资源。

可用工具

列表查询

工具名称	描述
`list-components`	列出所有 Movk Nuxt 组件及其分类和基本信息
`list-examples`	列出文档站所有可用示例
`list-api`	列出 API 系统文档，覆盖插件、Hooks 和 Composables
`list-data-table`	列出 DataTable 系统全部文档

详情获取

工具名称	描述
`get-documentation-page`	获取特定文档页面的完整内容。支持 `sections` 参数（h2 标题数组，如 `["Usage", "API"]`）以减少响应大小
`get-example`	获取示例的实现代码，需提供 `exampleName` 参数（PascalCase）
`get-component`	获取指定组件的完整 API 文档与用法说明
`get-component-metadata`	获取指定组件的元数据（props、slots、emits 等结构化信息）

搜索过滤

工具名称	描述
`search-documentation`	全文搜索文档站所有页面
`search-composables`	按关键词搜索 Composables
`search-icons`	搜索可用图标
`search-components-by-category`	按分类或关键词搜索组件
`search-auto-form-by-category`	按分类搜索 AutoForm 文档
`search-data-table-by-category`	按分类或关键词搜索 DataTable 文档
`search-api-by-category`	按分类或关键词搜索 API 系统文档

对于大型文档页面，AI 可以使用 get-documentation-page 的 sections 参数仅获取相关部分（如「Usage」或「API」），减少响应大小并提高性能。

可用提示

MCP 服务器为常见工作流提供引导式提示：

提示名称	描述
`find-component-for-usecase`	根据使用场景推荐最适合的组件
`find-autoform-solution`	根据表单需求推荐字段类型和配置方案
`implement-component-with-props`	按指定 props 给出组件落地实现指引

在 Claude Code 等工具中使用 / 访问这些提示。

配置

Movk Nuxt MCP 服务器使用 HTTP 传输，可在不同 AI 助手中配置。

ChatGPT

自定义连接器使用 MCP 功能需要 ChatGPT Pro 或 Plus 账户，仅在 Web 端可用。

将 Movk Nuxt 配置为 ChatGPT 连接器：

启用开发者模式：进入「Settings」>「Connectors」>「Advanced settings」>「Developer mode」
打开 ChatGPT 设置
在 Connectors 标签页中创建新连接器：
- 名称：Movk Nuxt
- MCP server URL：https://nuxt.mhaibaraai.cn/mcp
- Authentication：None
点击 Create

后续对话可在编辑器「Developer mode」工具列表中调用该连接器。

Claude Code

确保已安装 Claude Code。参阅 Anthropic 文档获取安装说明。

通过 CLI 命令添加服务器：

claude mcp add --transport http movk-nuxt https://nuxt.mhaibaraai.cn/mcp

Claude Desktop

打开 Claude Desktop，进入「Settings」>「Developer」
点击「Edit Config」打开本地 Claude 配置目录
编辑 claude_desktop_config.json：

claude_desktop_config.json

{
  "mcpServers": {
    "movk-nuxt": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://nuxt.mhaibaraai.cn/mcp"
      ]
    }
  }
}

重启 Claude Desktop，Movk Nuxt MCP 服务器即注册成功

Cursor

一键安装

点击下方按钮，直接在 Cursor 中安装 Movk Nuxt MCP 服务器：

Install MCP in Cursor

手动配置

打开 Cursor，进入「Settings」>「Tools & MCP」
添加 Movk Nuxt MCP 服务器配置

或在项目根目录创建/编辑 .cursor/mcp.json：

.cursor/mcp.json

{
  "mcpServers": {
    "movk-nuxt": {
      "type": "http",
      "url": "https://nuxt.mhaibaraai.cn/mcp"
    }
  }
}

Google Antigravity

在编辑器顶部的 Agent 面板「...」下拉菜单中打开 MCP store
点击「Manage MCP Servers」
点击「View raw config」
编辑 mcp_config.json：

mcp_config.json

{
  "mcpServers": {
    "movk-nuxt": {
      "serverUrl": "https://nuxt.mhaibaraai.cn/mcp"
    }
  }
}

返回「Manage MCP Servers」并点击「Refresh」，Movk Nuxt MCP 服务器即出现在列表中

Gemini CLI

定位 Gemini CLI 配置文件（通常位于 ~/.gemini/settings.json 或环境变量指定路径）
在 mcpServers 对象中追加配置：

~/.gemini/settings.json

{
  "mcpServers": {
    "movk-nuxt": {
      "url": "https://nuxt.mhaibaraai.cn/mcp"
    }
  }
}

重启终端或重新加载 CLI，Movk Nuxt MCP 工具即可使用

Le Chat Mistral

进入「Intelligence」>「Connectors」
点击「Add Connector」按钮，选择「Custom MCP Connector」
创建自定义 MCP 连接器：
- Connector Name：MovkNuxt
- Connector Server：https://nuxt.mhaibaraai.cn/mcp

Visual Studio Code

Install MCP in VS Code

需要安装 GitHub Copilot 和 GitHub Copilot Chat 扩展。

打开 VS Code 命令面板（Ctrl/Cmd + Shift + P）
输入「Preferences: Open Workspace Settings (JSON)」并执行
在项目 .vscode 目录下创建或编辑 mcp.json：

.vscode/mcp.json

{
  "servers": {
    "movk-nuxt": {
      "type": "http",
      "url": "https://nuxt.mhaibaraai.cn/mcp"
    }
  }
}

Windsurf

进入「Settings」>「Windsurf Settings」>「Cascade」
点击「Manage MCPs」>「View raw config」
添加以下配置：

.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "movk-nuxt": {
      "type": "http",
      "url": "https://nuxt.mhaibaraai.cn/mcp"
    }
  }
}

Zed

进入「Settings」>「Open Settings」
打开 JSON 设置文件
添加 context server 配置：

.config/zed/settings.json

{
  "context_servers": {
    "movk-nuxt": {
      "source": "custom",
      "command": "npx",
      "args": ["mcp-remote", "https://nuxt.mhaibaraai.cn/mcp"],
      "env": {}
    }
  }
}

Opencode

在项目根目录创建 opencode.json
添加以下配置：

opencode.json

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "movk-nuxt": {
      "type": "remote",
      "url": "https://nuxt.mhaibaraai.cn/mcp",
      "enabled": true
    }
  }
}

GitHub Copilot Agent

需要仓库管理员权限以配置 GitHub Copilot coding agent 的 MCP 服务器。

若已在 VS Code 中完成配置，可基于相同结构调整（将 servers 键替换为 mcpServers），并显式声明 tools 列出可用工具。

打开 GitHub 仓库
进入「Settings」>「Code & automation」>「Copilot」>「Coding agent」
在「MCP configuration」中添加：

{
  "mcpServers": {
    "movk-nuxt": {
      "type": "http",
      "url": "https://nuxt.mhaibaraai.cn/mcp",
      "tools": ["*"]
    }
  }
}

点击 Save

更多信息参阅 Extend coding agent with MCP。

使用示例

配置完成后，可按 Movk Nuxt 四大能力域向 AI 助手提问：

AutoForm（Schema 驱动表单）

「如何用 Zod schema 自动生成表单？」
「支持哪些字段类型？如何注册自定义控件？」
「如何实现字段条件渲染与跨字段联动？」
「我想做一个用户注册表单，应该怎么组织 schema？」

DataTable（数据表格）

「DataTable 的列定义有哪些字段，如何用函数式 column？」
「如何实现树形数据、列固定与列拖拽？」
「如何配置分页、加载更多与空状态？」
「我要做一个带行右键菜单的可编辑表格，应该用哪些 API？」

API 系统（fetch 与进度）

「useApiFetch 和 $fetch 有什么区别？」
「如何配置多端点与自动认证？」
「如何监控文件上传/下载进度？」
「业务状态码与 Toast 提示如何接入？」

独立组件与 Composables

「有哪些独立 UI 组件可用？」
「DatePicker、StarRating、PillGroup 接受哪些 props？」
「useDateFormatter、useTheme、useMessageBox 怎么用？」
「我需要一个可选日期范围的选择器，推荐用哪个组件？」

AI 助手会通过 MCP 工具获取结构化数据并给出场景化建议；带「推荐 / 应该用什么」的提问会自动触发引导式 prompts。

主题系统

通过模块默认值、ThemePicker 组件和 useTheme composable 管理颜色、圆角、字体、图标集与深色模式。

LLMs.txt

如何让 Cursor、Windsurf、GitHub Copilot、ChatGPT 和 Claude 等 AI 工具理解 Movk Nuxt 组件、API 和最佳实践。