學MCP的最佳方式是：自己構建一個！我開發了一個幫你網站配圖的MCP Server

學了超過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