编写自己的第一个mcp插件

千呼万唤始出来,本篇教程就手把手,一步一步带你编写自己的mcp插件。

1. 全局安装cc-plugin

npm i cc-plugin@2.3.0 -g

2. 检查安装的cc-plugin版本是否正常,2.3.0版本才支持mcp插件

npm list cc-plugin -g

3. 创建插件

bash 复制代码
cd xxx
ccp create mcp-tools

4. 安装依赖

推荐使用yarn,因为cc-plugin的依赖比较多

npm之前尝试过,安装后的依赖可能无法正常构建运行插件,也没有再去修复这个问题。

在vscode中,可以点击对应的运行按钮即可,非常方便。

有概率因为网络环境问题,会导致依赖安装失败,可以尝试使用腾讯云镜像进行安装。

npm config set registry mirrors.cloud.tencent.com/npm/

5. 测试下项目是否正常

因为cc-plugin是支持web运行的,所以我们直接运行web版本验证下即可

如果一切顺利,就会自动打开浏览器,出现下面的页面,基本说明项目是没有问题。

6. 编写tools逻辑

创建的插件项目中,默认带了一个tools,方便我们参考,我们手动启用下这个tools,valid=true即可。

7. 将mcp插件构建到指定项目

tools编写完毕后,接下来我们还需要告诉cc-plugin,我们打算将插件放在哪个cocos creator项目,因为我们的插件是3.x版本,所以设置v3字段即可,指向creator的项目目录

8. 构建插件,运行ccp-serve-v3

正常情况下,就会在creator项目中生成符合3.x规范的插件

9. 在vscode中,配置好cocos-mcp-server。

大概率会遇到端口占用的问题,这个问题将会在后续版本中优化下,解决办法参考之前的文章。

10. 使用creator打开项目

注意,必须先配置好cocos-mcp-server,对顺序有严格的要求。正常情况下,tools就会被正确识别到。

11. 我们测试下这个mcp

可以看到这个响应数据是符合我们的tools返回结果的,基本可以确定是没有问题的。

12. 调试tools

目前tools是运行在编辑器的主进程,可能调试起来不是很方便,后续版本会考虑迭代优化下,支持在vscode中断点调试。

13. 发布mcp插件到store

至此,基本上mcp插件的编写就算结束了,接下来我们就要发布下这个mcp插件。

一般来说mcp插件不需要面板,可以考虑把面板的配置删了

如果你想对你的插件加密混淆 ,只需要配置options.obscure即可:

直接运行ccp-pack-v3即可,在dist目录就会生成zip包,和插件的提交流程一样,提交到store分发变现

总结

以上就是mcp插件从开发到发布的完整流程,整个过程我们只需要聚焦tools的编写即可,剩下的所有工作都交给cc-plugin完成了,因为cc-plugin同时支持creator2x / creator3x,所以强烈推荐大家基于cc-plugin开发,免去creator多版本适配的麻烦。

当然cocos-mcp目前还存在很多优化的地方,还有很长的一段路要走。

后续个人同时也会开源一款mcp插件,供大家学习参考,毕竟只有亲自参与开发,才能知道开发的痛点在哪里。

如果你在开发mcp插件的过程中,遇到任何问题,作者提供有偿技术支持,购买本人everything插件即可:

store-my.cocos.com/seller/reso...

同时会拉你进入mcp插件开发者专属交流群,在群内可以提问关于creator插件开发的任何问题,谢谢粉丝的支持和理解。

相关推荐
AI视觉网奇3 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1233 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
wyzqhhhh6 小时前
less和sass
前端·less·sass
Nan_Shu_6147 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel9 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始9 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible9 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫9 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评10 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner10 小时前
【html】canvas实现一个时钟
前端·html