基于 OpenMCP 的 AI PPT 自动生成开发与测试
📝 面试求职： 「面试试题小程序」 ，内容涵盖 测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）
📝 职场经验干货：
从 2022 年 12 月份 ChatGPT 横空出世，我们见证了 AI 技术的进步，同时也在思考一个非常关键的问题：
如何才能利用 AI 降低我们的工作时间，提升我们的工作效率？
仅仅通过自然语言进行交互的网页版大模型，显然能力有限，就在此刻，AI Agent 技术基于大模型，给出了上面那个问题更多的可能性。
制作 PPT 是一个我们常见的任务，无论是工程师还是学者，大家总是需要制作一份 PPT 来汇报自己的工作，展示自己的思想。
那么不知道大家有没有思考过这么一个问题：我们如何才能只专注于 PPT 的内容，能否让 AI 帮我们完成 PPT 其余我们不关心的部分的书写（比如样式，文字大小等等与内容无关的体力活）。
只靠网页大模型显然，能力有限，因为网页大模型只能输出文本；市面上也有不少 AI PPT 产品，比如 gamma，WPS AI，MindShow 等等。
但是这些产品并没有很好的普及，一定的操作门槛无疑成为了阻挡用户和伟大功能的「最后一公里」。
但是现在有了完全可以只通过自然语言就能进行交互的大模型，那么我们能不能做出一些新的可能性呢？
答案是可以，这篇文章就将演示一下如何开发一款能帮我们进行 slidev PPT 开发的 MCP 并利用 openmcp 完成功能模块的验证和测试。
测试完成的 MCP 作为插件装载进入任意一个 MCP 客户端就能直接成为一个帮我们自动根据大纲制作可以在网页上浏览的在线 PPT 的 AI Agent 了。
环境准备
为了进行了本篇文章，你需要准备如下的开发环境：
-
python 3.10 以上版本
-
nodejs 18.0.0 以上版本
-
vscode 或者 trae 或者 cursor
-
安装插件 OpenMCP
本期文章代码在：https://github.com/LSTM-Kirigaya/slidev-mcp
什么是 slidev
Slidev 是一款专为开发者设计的现代化、基于 Markdown 和 Vue.js 的开源幻灯片制作工具，旨在让用户通过简单的文本语法创建高度可定制且交互性强的演示文稿。
在开始后续的内容之前，我想要带大家先玩玩 slidev，初步建立一个基本印象，这样我们后续构建智能体来自动帮我们构建 PPT 时，逻辑才会更加明晰。
开始一个超级简单的网络 PPT
首先打开命令行，先安装一下 slidev
npm i -g @slidev/cli安装完成后，我们创建第一个 Slidev 的 PPT，此处就以 slidev 官网上的例子，我们创建 demo.md，然后在下面填充如下内容：
# Title
Hello, Slidev!Slide 2
使用代码块来高亮代码：
console.log('Hello, World!')然后我们启动 slidev 来看看效果，在命令行中输入：
slidev demo.md这句命令会将 demo.md 看作 slidev 幻灯片的入口文件并执行编译渲染。执行完成后，命令行会输出这样的字样：
public slide show > http://localhost:3030/这个时候，我们复制一下
http://localhost:3030/，然后打开浏览器，并在搜索边框中粘贴进入，按下回车，你就可以看到渲染好的 PPT 了：
把光标移动到左下角还能看到一个隐藏的工具栏，可以切换主题颜色、全屏、查看栅格视窗；按下方向键的左右可以切换不同的幻灯片。
添加转场动画
从上面的案例中大家应该也能看出来了，slidev 使用 --- 分隔符来确定不同的页面。--- 就是另起一页，有点像是 latex 里面的 \newpage。
事实上，除了 --- 外，Slidev 还支持使用 frontmatter 作为分割符，比如：
---
value1: key1
value2: key2
---这里我们通过了如下的这个被称为 frontmatter 的特殊语法单元定义了当前幻灯片的属性。
slidev 提供了很多内置的属性，比如我们可以设置 transition: slide-left 来设置这页 PPT 的入场动画。
---
transition: slide-left
---
# Title
Hello, Slidev!transition: slide-left
Slide 2
使用代码块来高亮代码：
console.log('Hello, World!')效果如下：
除此之外，slidev 还提供了一大堆其他的功能和特性，都需要制定各种各样的样式和 frontmatter 来制定。这些都可以在他们的官方文档中看到。
看到这里，我知道你有一种想要退出的欲望了。先别急！我也觉得 Slidev 的使用非常麻烦，这也是这篇文章的目的。
上面我列出的例子并非在教会你如何使用 slidev，而是通过一种目视的身体力行，让我的观众知道 slidev 的使用并不简单，这样才为我们开发 Slidev 的 Agent 创建了逻辑上的“正确性”。
编写 Slidev MCP
写 slidev 真的麻烦
在之前的演示中，大家可以看到，通过简单的 markdown，我们就可以创建出简洁优雅的 PPT，但是 Slidev 因为上手门槛高，中长篇PPT编写繁琐，slidev 编写者心智负担过大等原因，导致 slidev 这项技术一直无法很好地普及。
如果你真的跟着上面的步骤走过，还点进了官方提供的文档，看到一大堆非常麻烦的 html，有一种放弃的冲动的时候，那么你一定能理解我打算做的事情。
直接用大模型生成 Slidev
在正式开始之前，肯定有朋友要问了：既然 slidev 也是纯文本，为什么不让大模型直接生成呢？
有如下几点原因：
1. slidev 使用了特殊的 markdown 语法，大模型并不认识这些语法单元，导致生成的效果会很差。
2. slidev 通过 --- 定义了多页 PPT，你询问大模型每次都要重新生成每一页的 PPT，不仅效率低下，而且因为生成范围变大了，大模型犯错的概率也提升了。
感兴趣的读者可以在这篇文章结束后，把相同的问题塞入大模型来测试效果。
直接使用大模型无法解决我们的问题，所以我们不得不编写 Agent 来优化这个过程。
编写我们的 Slidev Agent
好了，我们准备开始编写我们的 Slidev Agent，来帮我们自动编写 PPT。
确定基本的 Agent 技能
编写 AI Agent 的第一步就是要先确定我们的 agent 具备哪些基本技能。
我们根据我们自己开发 slidev 的经验，不难总结出如下的几条基本的技能（或者说步骤）：
-
检查 Node.js 和 Slidev CLI 是否安装就绪 (没有的话自动安装)
-
创建新的 Slidev 项目（需获取用户输入的标题和作者信息）
-
加载现有 Slidev 项目
-
创建/更新封面页（支持自定义模板和背景图片）
-
添加新幻灯片页面（支持多种布局和内容格式）
-
修改现有幻灯片内容
-
获取特定幻灯片内容
实现基本技能
实现 Agent 基本技能我们通过 mcp 工具 来实现。打开 vscode 或者别的代码编辑器，我们先完成上述技能的 python 实现。
需要注意的是，这里我们采用全局变量来保存当前的 slidev PPT 的状态，比如当前有多少页 PPT ，每一页 PPT 都是什么内容呀等等。
这里需要我们根据我们关于 slidev 的知识来编写对应的工具，比如我们在编写正常一页 slidev 的代码可能如下：
---
layout: default
transition: slide-left
---
## Hello World !然后，为了减轻用户的思维负担，我决定把所有的转场动画 transition 全部指定为 slide-left，然后布局 layout 就让 AI 自己决定。
那么假设你已经确定了这样的需求模式，上面的例子对应的 python 的字符串模板就是：
template = f"""
---
layout: {layout}
transition: slide-left
---
{content}
"""其中，layout 就是 default，content 就是 ## Hello World !，当然，这些接口都是预留给大模型，让大模型来帮我们生成的。
所以增加一页 PPT 的 mcp 工具 就可以如此编写：
@mcp.tool(
description='Add new page.'
)
def add_page(content: str, layout: str = "default") -> SlidevResult:
global SLIDEV_CONTENT
if not ACTIVE_SLIDEV_PROJECT:
return SlidevResult(False, "No active Slidev project. Please create or load one first.")
template = f"""
---
layout: {layout}
transition: slide-left
---
{content}
""".strip()
SLIDEV_CONTENT.append(template)
page_index = len(SLIDEV_CONTENT) - 1
save_slidev_content()
return SlidevResult(True, f"Page added at index {page_index}", page_index)这里给大家一个简单的小提示，设置这些接口有几个基本准则：
1. 函数尽量不能设置复杂数据结构作为参数，参数最好就设置成字符串或者数字。
2. 一定要确保填入的参数是大模型大概率知道的东西，比如上面填入的是 slidev 的布局字符和文本内容。文本内容是基于上下文生成的 markdown，我们认为大模型知道；下面的 mcp 工具 就是一个反面例子：
# 错误的例子：因为大模型并不知道最新的 Windows 激活码
@mcp.tool(description='激活 Windows')
def activate_windows(activation_code: str):
winapi.activate(activation_code)知晓上述的基本逻辑后，就可以编写出最终的代码了，完整代码在
https://github.com/LSTM-Kirigaya/slidev-mcp/blob/main/tutorial/step1.py
最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】
扫一扫
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
