学了超过100小时的MCP之后，我才意识到，和学AI、AI编程的最佳方式是实操一样，学MCP的最佳方式也是自己亲自上手搭建一个。
关于MCP的概念，我就不在这多做解释了，感兴趣的可以去看我之前的文章：
说干就干，我开发并发布了我的第一个MCP Server，这是个给Cursor等AI IDE工具提供文生图能力的免费MCP，用于解决你在网站开发或者SEO文章批量生成过程中的配图问题。
很多人应该都有体感，现在的Claude 4、Gemini 2.5、DeepSeek R1-0528等模型都能生成设计感非常出色的界面了，但是因为这些模型并不是可以生成图片的多模态模型，所以当你开发的网站/app需要配图时，他们只能用占位符作为暂时的替代，或者，你也可以要求它使用开源图片库的资源，但问题是那些图片可能加载出错，抑或是和你的网站主题毫无相干。
而我的这款MCP就试图解决这个问题。让Cursor、Trae、Claude Code等AI Coding工具根据他们对网站内容主题的理解，调用AI文生图MCP为你的网站在指定位置生成合适的配图。
比如，一个原本长这样的球鞋交易平台首页
用了我的MCP之后，被优化成了这样，网站的配图不止是质量不错，而且你注意看细节的话，发现和描述的球鞋型号也完全匹配。
接下来我来详解下，我是怎么用Cursor在一个小时内把这个MCP开发出来的（当然你用别的你自己熟悉的AI Coding也完全可以）。
步骤一：准备MCP开发文档
因为MCP这个概念是Anthropic在2024年底提出的，而现在我们主流使用的大模型，训练语料的截止时间通常是2023年底或者2024年中旬，所以你可以理解为绝大多数大模型都不具备关于什么是MCP、怎么开发MCP的知识。
Anthropic在MCP的官方网站：https://modelcontextprotocol.io/tutorials/building-mcp-with-llms 提供了相应的文档，比如以我的开发项目来说，分别是要访问以下两个链接复制内容：
https://modelcontextprotocol.io/llms-full.txt
https://github.com/modelcontextprotocol/typescript-sdk/blob/main/README.md
你需要下载这个页面中第一步llm-full.txt的文档，以及根据你要开发MCP技术栈的差异，再下载第二步TypeScript或者Python的SDK readme文档。
下载之后可以把文档放到你这个MCP开发文件夹的根目录中
步骤二：表达需求
有了对应的文档内容可以供AI参考之后，你就可以根据你想要实现的目标表达需求了，在用Cursor开发的情况下，你需要注意的关键点是要主动 @ 这两个文件，这种情况下Cursor会消耗更多token去更充分的读取上下文（因为MCP开发文档的上下文有10000多行，确实太长长长了）。
比如我这个需求信息如下：
请参考 @mcprule.txt @mcprule-ts.txt 这两个文档，帮我开发一个web设计图片生成的MCP serve。
就是当用户在使用AI设计网页时，如果他的网页涉及到占位图片等图片信息的展示，就通过该MCP调用AI文生图模型，提供对应的英文prompt生成图片，并且图片填充到对应的网站区域。
文生图调用方式如下，注意API key是由MCP客户端传入的，不要写死在MCP Server里：
import requests
import json
from PIL import Image
from io import BytesIO
url = 'https://api-inference.modelscope.cn/v1/images/generations'
payload = {
'model': 'MusePublic/489_ckpt_FLUX_1',#ModelScope Model-Id,required
'prompt': 'A golden cat'# required
}
headers = {
'Authorization': 'Bearer API_KEY,
'Content-Type': 'application/json'
}
response = requests.post(url, data=json.dumps(payload, ensure_ascii=False).encode('utf-8'), headers=headers)
response_data = response.json()
image = Image.open(BytesIO(requests.get(response_data['images'][0]['url']).content))
image.save('result_image.jpg')你可能注意到了，我写的提示词里还有一段示例代码，这是因为我们的MCP需要调用文生图的API，所以你需要自己去找个你想用的大模型，再提供对应的调用案例让AI进行参考，我这次选择的是阿里魔搭社区上的一个Flux.1的模型https://modelscope.cn/models/MusePublic/489_ckpt_FLUX_1 一方面是觉得效果还不错，另一方面是我希望我的MCP用户也都能免费使用对应API（魔搭社区给所有用户都提供每天2000次的API调用权限）
步骤三：Bug处理和测试
提完需求之后，AI完成的MCP可能符合你的预期，也可能存在各种各样的bug，在这个过程中你就持续用自然语言表达想法，以及让AI自己做测试就好了。
步骤四：打包发布npm包
当你完成MCP的开发之后，你就可以让Cursor再把你开发成功的MCP server写到Mcp Json中进行调用了，但这里出现了一个小问题。
你会发现其中一行代码是
"args": ["/Users/alchain/11/MCP_FLUX_WEB/dist/index.js"],这是个本地的文件路径啊！
这时候你倒是也可以把你的MCP代码仓库开源到Github，让你的用户可以下载后自行配置，但这显然不是个足够好的用户体验。
所以，还有个更好的选择是把你开发的MCP Server打包成npm包，这等于是让你开发的资源成了个更标准化的node服务，相当于给MCP配上了个更标准的公域的文章。
这个过程同样的，你只需要用自然语言表达即可，比如：
帮我把这个node服务打包上传为npx的包不过在此之前，你需要先前往node的官方网站https://www.npmjs.com/ 注册个账号，你的发布过程会需要你登录对应账号。
我的这个MCP Server的npm包地址为：https://www.npmjs.com/package/@alchain/mcp-flux-web-image-generator
步骤五：使用和配置
接下来一切就绪，你就可以轻松的自己配置这个MCP服务，或者也发给你的用户使用了。
我开发的相应MCP Server配置代码如下：
{
"mcpServers": {
"ai-image-generator": {
"command": "npx",
"args": ["@alchain/mcp-flux-web-image-generator@latest"],
"env": {
"MODELSCOPE_API_KEY": "your-modelscope-api-key-here"
}
}
}
}其中的API key你可以通过这个链接获取：https://modelscope.cn/my/myaccesstoken
你可以在Cursor中通过下面的入口增加MCP
点击“New MCP Server”后你可能看到类似下面的界面
看着这些代码也不用慌，你可以全选，然后cmd+k或者ctrl+k，让AI自己把代码给你加上就行了。
配置成功后，你就可以随时用自然语言表达你想要的图片需求，也可以让Cursor帮你把图配上去。
文章写得挺长，但其实操作起来还是很简单的，你真的可以试试，跑通之后你对什么是MCP的理解会上升一个台阶。
如果你更习惯看视频的话，也可以通过我这期B站视频的教程：
https://www.bilibili.com/video/BV1i9GJzwEyM/?vd_source=b8ed956bbe6170c4bb6e401414e9d3ee
热门跟贴