學(xué)了超過(guò)100小時(shí)的MCP之后，我才意識(shí)到，和學(xué)AI、AI編程的最佳方式是實(shí)操一樣，學(xué)MCP的最佳方式也是自己親自上手搭建一個(gè)。

關(guān)于MCP的概念，我就不在這多做解釋了，感興趣的可以去看我之前的文章：

說(shuō)干就干，我開(kāi)發(fā)并發(fā)布了我的第一個(gè)MCP Server，這是個(gè)給Cursor等AI IDE工具提供文生圖能力的免費(fèi)MCP，用于解決你在網(wǎng)站開(kāi)發(fā)或者SEO文章批量生成過(guò)程中的配圖問(wèn)題。

很多人應(yīng)該都有體感，現(xiàn)在的Claude 4、Gemini 2.5、DeepSeek R1-0528等模型都能生成設(shè)計(jì)感非常出色的界面了，但是因?yàn)檫@些模型并不是可以生成圖片的多模態(tài)模型，所以當(dāng)你開(kāi)發(fā)的網(wǎng)站/app需要配圖時(shí)，他們只能用占位符作為暫時(shí)的替代，或者，你也可以要求它使用開(kāi)源圖片庫(kù)的資源，但問(wèn)題是那些圖片可能加載出錯(cuò)，抑或是和你的網(wǎng)站主題毫無(wú)相干。

而我的這款MCP就試圖解決這個(gè)問(wèn)題。讓Cursor、Trae、Claude Code等AI Coding工具根據(jù)他們對(duì)網(wǎng)站內(nèi)容主題的理解，調(diào)用AI文生圖MCP為你的網(wǎng)站在指定位置生成合適的配圖。

比如，一個(gè)原本長(zhǎng)這樣的球鞋交易平臺(tái)首頁(yè)

用了我的MCP之后，被優(yōu)化成了這樣，網(wǎng)站的配圖不止是質(zhì)量不錯(cuò)，而且你注意看細(xì)節(jié)的話，發(fā)現(xiàn)和描述的球鞋型號(hào)也完全匹配。

接下來(lái)我來(lái)詳解下，我是怎么用Cursor在一個(gè)小時(shí)內(nèi)把這個(gè)MCP開(kāi)發(fā)出來(lái)的（當(dāng)然你用別的你自己熟悉的AI Coding也完全可以）。

步驟一：準(zhǔn)備MCP開(kāi)發(fā)文檔

因?yàn)镸CP這個(gè)概念是Anthropic在2024年底提出的，而現(xiàn)在我們主流使用的大模型，訓(xùn)練語(yǔ)料的截止時(shí)間通常是2023年底或者2024年中旬，所以你可以理解為絕大多數(shù)大模型都不具備關(guān)于什么是MCP、怎么開(kāi)發(fā)MCP的知識(shí)。

Anthropic在MCP的官方網(wǎng)站：https://modelcontextprotocol.io/tutorials/building-mcp-with-llms 提供了相應(yīng)的文檔，比如以我的開(kāi)發(fā)項(xiàng)目來(lái)說(shuō)，分別是要訪問(wèn)以下兩個(gè)鏈接復(fù)制內(nèi)容：

https://modelcontextprotocol.io/llms-full.txt

https://github.com/modelcontextprotocol/typescript-sdk/blob/main/README.md

你需要下載這個(gè)頁(yè)面中第一步llm-full.txt的文檔，以及根據(jù)你要開(kāi)發(fā)MCP技術(shù)棧的差異，再下載第二步TypeScript或者Python的SDK readme文檔。

下載之后可以把文檔放到你這個(gè)MCP開(kāi)發(fā)文件夾的根目錄中

步驟二：表達(dá)需求

有了對(duì)應(yīng)的文檔內(nèi)容可以供AI參考之后，你就可以根據(jù)你想要實(shí)現(xiàn)的目標(biāo)表達(dá)需求了，在用Cursor開(kāi)發(fā)的情況下，你需要注意的關(guān)鍵點(diǎn)是要主動(dòng) @ 這兩個(gè)文件，這種情況下Cursor會(huì)消耗更多token去更充分的讀取上下文（因?yàn)镸CP開(kāi)發(fā)文檔的上下文有10000多行，確實(shí)太長(zhǎng)長(zhǎng)長(zhǎng)了）。

比如我這個(gè)需求信息如下：

請(qǐng)參考 @mcprule.txt @mcprule-ts.txt 這兩個(gè)文檔，幫我開(kāi)發(fā)一個(gè)web設(shè)計(jì)圖片生成的MCP serve。
就是當(dāng)用戶(hù)在使用AI設(shè)計(jì)網(wǎng)頁(yè)時(shí)，如果他的網(wǎng)頁(yè)涉及到占位圖片等圖片信息的展示，就通過(guò)該MCP調(diào)用AI文生圖模型，提供對(duì)應(yīng)的英文prompt生成圖片，并且圖片填充到對(duì)應(yīng)的網(wǎng)站區(qū)域。
文生圖調(diào)用方式如下，注意API key是由MCP客戶(hù)端傳入的，不要寫(xiě)死在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')

你可能注意到了，我寫(xiě)的提示詞里還有一段示例代碼，這是因?yàn)槲覀兊腗CP需要調(diào)用文生圖的API，所以你需要自己去找個(gè)你想用的大模型，再提供對(duì)應(yīng)的調(diào)用案例讓AI進(jìn)行參考，我這次選擇的是阿里魔搭社區(qū)上的一個(gè)Flux.1的模型https://modelscope.cn/models/MusePublic/489_ckpt_FLUX_1 一方面是覺(jué)得效果還不錯(cuò)，另一方面是我希望我的MCP用戶(hù)也都能免費(fèi)使用對(duì)應(yīng)API（魔搭社區(qū)給所有用戶(hù)都提供每天2000次的API調(diào)用權(quán)限）

步驟三：Bug處理和測(cè)試

提完需求之后，AI完成的MCP可能符合你的預(yù)期，也可能存在各種各樣的bug，在這個(gè)過(guò)程中你就持續(xù)用自然語(yǔ)言表達(dá)想法，以及讓AI自己做測(cè)試就好了。

步驟四：打包發(fā)布npm包

當(dāng)你完成MCP的開(kāi)發(fā)之后，你就可以讓Cursor再把你開(kāi)發(fā)成功的MCP server寫(xiě)到Mcp Json中進(jìn)行調(diào)用了，但這里出現(xiàn)了一個(gè)小問(wèn)題。

你會(huì)發(fā)現(xiàn)其中一行代碼是

      "args": ["/Users/alchain/11/MCP_FLUX_WEB/dist/index.js"],

這是個(gè)本地的文件路徑?。?/p>

這時(shí)候你倒是也可以把你的MCP代碼倉(cāng)庫(kù)開(kāi)源到Github，讓你的用戶(hù)可以下載后自行配置，但這顯然不是個(gè)足夠好的用戶(hù)體驗(yàn)。

所以，還有個(gè)更好的選擇是把你開(kāi)發(fā)的MCP Server打包成npm包，這等于是讓你開(kāi)發(fā)的資源成了個(gè)更標(biāo)準(zhǔn)化的node服務(wù)，相當(dāng)于給MCP配上了個(gè)更標(biāo)準(zhǔn)的公域的文章。

這個(gè)過(guò)程同樣的，你只需要用自然語(yǔ)言表達(dá)即可，比如：

幫我把這個(gè)node服務(wù)打包上傳為npx的包

不過(guò)在此之前，你需要先前往node的官方網(wǎng)站https://www.npmjs.com/ 注冊(cè)個(gè)賬號(hào)，你的發(fā)布過(guò)程會(huì)需要你登錄對(duì)應(yīng)賬號(hào)。

我的這個(gè)MCP Server的npm包地址為：https://www.npmjs.com/package/@alchain/mcp-flux-web-image-generator

步驟五：使用和配置

接下來(lái)一切就緒，你就可以輕松的自己配置這個(gè)MCP服務(wù)，或者也發(fā)給你的用戶(hù)使用了。

我開(kāi)發(fā)的相應(yīng)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你可以通過(guò)這個(gè)鏈接獲?。篽ttps://modelscope.cn/my/myaccesstoken

你可以在Cursor中通過(guò)下面的入口增加MCP

點(diǎn)擊“New MCP Server”后你可能看到類(lèi)似下面的界面

看著這些代碼也不用慌，你可以全選，然后cmd+k或者ctrl+k，讓AI自己把代碼給你加上就行了。

配置成功后，你就可以隨時(shí)用自然語(yǔ)言表達(dá)你想要的圖片需求，也可以讓Cursor幫你把圖配上去。

文章寫(xiě)得挺長(zhǎng)，但其實(shí)操作起來(lái)還是很簡(jiǎn)單的，你真的可以試試，跑通之后你對(duì)什么是MCP的理解會(huì)上升一個(gè)臺(tái)階。

如果你更習(xí)慣看視頻的話，也可以通過(guò)我這期B站視頻的教程：

https://www.bilibili.com/video/BV1i9GJzwEyM/?vd_source=b8ed956bbe6170c4bb6e401414e9d3ee