编写自己的第一个mcp插件

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

1. 全局安装cc-plugin

npm i [email protected] -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插件开发的任何问题,谢谢粉丝的支持和理解。

相关推荐
神秘代码行者1 小时前
Vue项目Git提交流程集成
前端·vue.js·git
阿黄学技术3 小时前
Vite简单介绍
前端·前端框架·vue
264玫瑰资源库3 小时前
网狐飞云娱乐三端源码深度实测:组件结构拆解与部署Bug复盘指南(附代码分析)
java·开发语言·前端·bug·娱乐
济南壹软网络科技-专注源码开发数十年!4 小时前
盲盒源码_盲盒系统_盲盒定制开发 盲盒搭建前端教程
开发语言·前端·uni-app·php
哟哟耶耶4 小时前
react-13react中外部css引入以及style内联样式(动态className与动态style)
前端·css·react.js
A_aspectJ5 小时前
【Bootstrap V4系列】学习入门教程之 组件-卡片(Card)高级用法
前端·学习·bootstrap
DT——5 小时前
ECMAScript 6(ES6):JavaScript 现代化的革命性升级
前端·javascript·ecmascript
qq_400552005 小时前
【React Hooks原理 - useCallback、useMemo】
前端·react.js·前端框架
互联网搬砖老肖5 小时前
深入理解 Web 架构:从基础到实践
前端·架构
来自星星的坤6 小时前
用 Tailwind CSS 优化你的 Vue 3 项目! ! !
前端·css·vue.js