---
title: "MCP Server"
description: "在 AI 助手中通过 Model Context Protocol 使用 Movk Nuxt。"
seo_title: "MCP Server"
seo_description: "Use Movk Nuxt inside AI assistants through the Model Context Protocol — browse components, DataTable, AutoForm and API docs, fetch examples, and configure the server in Claude, Cursor, VS Code and more."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/getting-started/ai/mcp"
---
# 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 系统文档     |

> \[\!TIP\]
> 
> 对于大型文档页面，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

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

将 Movk Nuxt 配置为 ChatGPT 连接器：

1. 启用开发者模式：进入「Settings」>「Connectors」>「Advanced settings」>「Developer mode」
2. 打开 ChatGPT 设置
3. 在 Connectors 标签页中创建新连接器：

  - 名称：`Movk Nuxt`
  - MCP server URL：`https://nuxt.mhaibaraai.cn/mcp`
  - Authentication：`None`
4. 点击 Create

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

### Claude Code

> \[\!NOTE\]
> 
> 确保已安装 Claude Code。参阅 
> 
> Anthropic 文档
> 
>  获取安装说明。

通过 CLI 命令添加服务器：

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

### Claude Desktop

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

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

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

### Cursor

#### 一键安装

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

<install-button url="https://nuxt.mhaibaraai.cn/mcp"></install-button>#### 手动配置

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

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

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

### Google Antigravity

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

```json [mcp_config.json]
{
  "mcpServers": {
    "movk-nuxt": {
      "serverUrl": "https://nuxt.mhaibaraai.cn/mcp"
    }
  }
}
```

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

### Gemini CLI

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

```json [~/.gemini/settings.json]
{
  "mcpServers": {
    "movk-nuxt": {
      "url": "https://nuxt.mhaibaraai.cn/mcp"
    }
  }
}
```

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

### Le Chat Mistral

1. 进入「Intelligence」>「Connectors」
2. 点击「Add Connector」按钮，选择「Custom MCP Connector」
3. 创建自定义 MCP 连接器：

  - Connector Name：`MovkNuxt`
  - Connector Server：`https://nuxt.mhaibaraai.cn/mcp`

### Visual Studio Code

<install-button url="https://nuxt.mhaibaraai.cn/mcp" ide="vscode"></install-button>> \[\!NOTE\]
> 
> 需要安装 
> 
> GitHub Copilot
> 
>  和 
> 
> GitHub Copilot Chat
> 
>  扩展。

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

```json [.vscode/mcp.json]
{
  "servers": {
    "movk-nuxt": {
      "type": "http",
      "url": "https://nuxt.mhaibaraai.cn/mcp"
    }
  }
}
```

### Windsurf

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

```json [.codeium/windsurf/mcp_config.json]
{
  "mcpServers": {
    "movk-nuxt": {
      "type": "http",
      "url": "https://nuxt.mhaibaraai.cn/mcp"
    }
  }
}
```

### Zed

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

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

### Opencode

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

```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

> \[\!NOTE\]
> 
> 需要仓库管理员权限以配置 GitHub Copilot coding agent 的 MCP 服务器。

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

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

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

1. 点击 Save

更多信息参阅 [Extend coding agent with MCP](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/coding-agent/extend-coding-agent-with-mcp){rel="[\"nofollow\"]"}。

## 使用示例

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

**AutoForm（Schema 驱动表单）**

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

**DataTable（数据表格）**

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

**API 系统（fetch 与进度）**

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

**独立组件与 Composables**

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

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


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.