企业官网建设流程全解析

Slidev 如何把内置 MCP 服务器接入 Claude Code 或 VS Code 让 AI Agent 编辑幻灯片

【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev

Slidev 内置了一个 MCP（Model Context Protocol）服务器（文档标注since: v52.17.0），任何支持 MCP 的 AI Agent——Claude Code、Codex、Cursor、VS Code Copilot 等——都可以用它通过结构化工具来检查、编辑、重排和导航你的幻灯片，而不是直接改 Markdown 文本。这篇文档对应 MCP Server 官方文档，覆盖两条接入路径：开发服务器运行时的 HTTP 端点，以及无需开发服务器的 stdio 独立服务器。

前提条件（来自 Getting Started 与 CLI 文档）：

• 已安装 Node.js >= 20.12.0；
• 已有一个 Slidev 项目（如通过pnpm create slidev/npm init slidev@latest创建，CLI 已随项目本地安装），或已全局安装@slidev/cli并拥有入口文件（如slides.md）；
• Slidev 版本需包含内置 MCP 服务器功能（v52.17.0 起）。

路径一（主路径）：通过开发服务器的 HTTP 端点接入

开发服务器运行期间，MCP 服务器通过 streamable HTTP 传输暴露在：

http://localhost:<port>/__mcp

其中<port>替换为你的实际端口。按 CLI 文档，slidev开发命令的--port默认值为3030，因此未改端口时端点即http://localhost:3030/__mcp。

注册到 Claude Code

在终端执行：

claude mcp add --transport http slidev http://localhost:3030/__mcp

命令中的slidev是注册给 Agent 的服务名称，末尾是开发服务器的 MCP 端点地址。

注册到 VS Code / Cursor

在 MCP 配置中加入：

{ "mcpServers": { "slidev": { "type": "http", "url": "http://localhost:3030/__mcp" } } }

关闭端点（可选）

如果不想暴露这个端点，在幻灯片的 headmatter 中设置：

--- mcp: false ---

路径二（替代）：无需开发服务器的 stdio 服务器

没有运行开发服务器时，可以启动一个独立的 stdio MCP 服务器，直接操作 Markdown 文件：

slidev mcp [entry]

[entry]为幻灯片入口路径，默认slides.md，见 CLI 文档。官方 MCP 文档给出的注册示例：

{ "mcpServers": { "slidev": { "command": "npx", "args": ["slidev", "mcp", "slides.md"] } } }

这里需要留意一处文档间的差异：CLI 文档提示“通常npx slidev不受支持，因为包名实际是@slidev/cli”。如果npx slidev无法解析，按 CLI 文档的前提安装说明，将@slidev/cli全局安装（npm i -g @slidev/cli等）或在 Node.js 项目中本地安装后，直接使用slidev可执行文件。

Agent 接入后能获得哪些工具

连接成功后，Agent 可以使用以下工具（引自 MCP 文档）：

两个关键行为细节：

• 幻灯片按渲染后的 1 起始编号寻址，与演示中显示的幻灯片编号一致；
• 通过 MCP 工具做的编辑会写回你的 Markdown 文件并即时热更新。

验证接入是否生效

文档给出了两条可操作的验证依据：

1. 连接后让 Agent 调用slidev-get-info或slidev-list-slides，应返回演示的入口文件、标题、幻灯片数量和编号列表，说明端点可达且解析正常；
2. 让 Agent 执行一次编辑（如用slidev-update-slide修改某页内容）：
   • 开发服务器模式下，改动写回 Markdown 后浏览器即时热更新；还可以用slidev-goto-slide让所有已连接的浏览器跳转到该页——文档特别指出这适合“编辑完立刻在视觉上核对这一页”；
   • stdio 模式下没有slidev-goto-slide（源码注释也说明 stdio 服务器不提供 live-navigation 工具），验证方式为直接查看入口 Markdown 文件中对应幻灯片的内容、备注或 frontmatter 是否已被改写。

可选补充：VS Code 扩展的 Language Model Tools

如果你主要用 VS Code，VS Code 扩展（v0.52.0 起）另提供一组 Language Model Tools，让 Copilot 等 AI 助手不经过 MCP 端点也能操作项目：slidev_getActiveSlide（获取当前活动幻灯片与项目信息）、slidev_getSlideContent（按编号取幻灯片内容）、slidev_getAllSlideTitles（列出全部标题）、slidev_findSlideNoByTitle（按标题找编号）、slidev_listEntries（列出所有已加载的入口）、slidev_getPreviewPort（获取预览服务器端口）、slidev_chooseEntry（切换活动入口）。这组工具偏“读取与导航”；要做结构化编辑仍建议走本文的 MCP 路径。

另外，Work with AI 文档提到可给 Agent 安装官方 skill，让它掌握 Slidev 语法与最佳实践后再配合 MCP 使用：

npx skills add slidevjs/slidev

限制

• slidev-goto-slide只在开发服务器模式下可用；stdio 模式直接读写文件，无实时导航。
• 端点默认开启，需要关闭时用 headmatter 的mcp: false。
• stdio 注册示例使用npx slidev时可能遇到 CLI 文档中提到的“包名是@slidev/cli”问题，按上文安装方式处理。

【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev