MCP 最近在 AI 領域 引發了 廣泛關注，特別是在 海外各大社區 中，大家熱烈討論，熱度 相當高。

我打開了(le) ，這(zhe)是(shi)一個專(zhuan)門用(yong)于查看全球(qiu)熱(re)點(dian)趨勢(shi)的網站。

輸入關鍵詞后，可以查看其熱度變化。

我搜索了 “MCP”，它的趨勢如圖所示，變化非常明顯。

各位可以參考一下。

每天都有新的 MCP 工具被推出，為我們帶來了無限的機會。

當我打開 Cline 的 MCP Servers 時，便發現了許多新工具等待探索。

本文，我會全面介紹 MCP，包括它的基本概念、核心技術原理，以及它在實際應用中的各種場景。

讓你輕松掌握 MCP 的所有要點。

什么是 MCP

MCP（Model Context Protocol，即模型上下文協議）是由 Anthropic（Claude 的母公司）于 2024年11月 開源發布的一項 全新技術。

簡單來說，MCP 是一個 AI 大模型的標準化工具箱。

大模型可以通過這些工具與 外界互動，獲取信息，并 完成具體任務。

在日常工作和學習中，我們經常需要與 瀏覽器、文件、數據庫 和 代碼倉庫 等外(wai)部(bu)工具進(jin)行交互(hu)。

在 傳統方式 中，我們需要 手動截圖 或 復制文本，再將其 粘貼 到 AI 窗口 中進行對話。

大家請注意，我的插畫中的箭頭都是從右到左，表示內容是單向流動的，而不是雙向的。

這意味著我們是將瀏覽器、文件系統或GitHub中的信息復制到 AI 中，以便(bian)進行對話時(shi)的數據流向(xiang)。

MCP通過標準化的協議，讓我們不再需要手動截圖、復制文本，然后再粘貼到AI 窗口中進行對話。

這一過程被自動化了，簡化了我們的操作。

MCP 服務充當AI 和外部工具之間的橋梁，能夠自動替代人類訪問和操(cao)作這些外部(bu)工具。

在我的插圖中，箭頭為雙向，表示AI 可以直接訪問 MCP 服務。

而 MCP 服務則能訪問瀏覽器、文件系統等數據源。

通過這種方式，數據能夠通過 MCP 服務傳輸到 AI 中。

每個 MCP 服務（也稱為 MCP Server）專注于特定的任務。

例如，有的服務專門用于讀取和寫入瀏覽器信息，有的負責處理本地文件，還有的用于操作 Git 倉庫等。

MCP Server 通常是一個在本地運行的程序，可能是用 Node.js 或 Python 開發的。

大模型通過操作系統的 標準輸入輸出（stdio），即我們常說的輸入與輸出通道，來進行信息交流與處理，并調用某個 MCP Server。

它的信息格式是 JSON，這是一種常用的數據交換格式。

{
    "jsonrpc": "2.0",
    "id": 129,
    "method": "tools/call",
    "params": {
        "name": "search_repositories",
        "arguments": {
            "query": "user:BNTang"
        }
    }
}

MCP Server 在接收到請求后，會通過自身的代碼或外部工具的 API來執行任務。

從這里可以看出，MCP 協議與 Function Calling 非常相似。

MCP 的最大優點是整合了之前各大模型不同的Function Call 標準，形成了一個統一的標準協議。

而且，不僅是 Claude，幾乎所有市面上的大模型都可以接入 MCP。

本文，我將用免費的 DeepSeek，來進行實戰演示。

準備工作

在正式開始之前，我們需要先準備一個支持 MCP 協議的客戶端。

目前支持 MCP 功能 的客戶端并不多，主要有 AI 編程工具 Cline、Cursor、WindSurf，以及 Claude 官方客戶端（Claude App） 等。

本文將以開源免費的 Cline 為例進行演示，并簡要介紹如何在 Cursor 中完成相關配置。

首先，請訪問 官網，下載并安裝 Visual Studio Code。

后續我會持續分享 VSCode 的安裝與使用教程，歡迎大家關注我，以便第一時間獲取最新內容。

安裝完成后，我們打開 VSCode 軟件：

在界面左側的工具欄中，找到并點擊 Extensions 圖標，即可進入插件市場，方便我們安裝和管理各種實用插件。

在 Extensions 市場中搜索 Cline，找到并點擊 安裝插件：

安裝完成后，在左側面板找到 Cline，點擊進入：

接下來，需要為 Cline 配置一個 AI 模型。首先點擊 設置（Settings）：

在 模型提供商中，選擇 OpenRouter，它提供免費的 DeepSeek V3 模型：

在模型搜索框中，輸入 deepseek/deepseek-chat-free，選擇該模型：

這是免費的 DeepSeek V3 模型，大家可以選擇它。

接下來，我們需要獲取一個 API Key，點擊 Get OpenRouter API Key：

需要登錄（可以使用 谷歌賬號）：

該地址在國(guo)內可以直(zhi)連。

點擊 Authorize 授權：

點擊 打開 Visual Studio Code：

然后再點擊 Open：

此時 OpenRouter 的 API Key 會自動填寫：

Cline 支持兩種運行模式：Planning（規劃模式） 和 Acting（執行模式），具體說明如下：

• Planning 模式：此模式用于生成詳細的行動計劃，非常適合在開始編寫代碼之前與 AI 進行溝通，清晰地分解任務，從而避免盲目操作導致的返工。您可以利用此模式規劃新功能的實現步驟或討論如何優化現有代碼。
• Acting 模式：此模式負責根據 Planning 階段的計劃逐步執行任務。適用于在明確計劃后，讓 AI 實際執行操作。例如，您在 Planning 模式中已確定了 API 調用的實現邏輯，然后可以切換到 Acting 模式，讓 AI 幫助您編寫具體代碼。

此外，如果您希望為 Planning 和 Acting 模式分別使用不同的 AI 模型，可以勾選 “Use different models for Plan and Act modes” 選項。啟用該選項后，您可以為 Planning 模式指定一個擅長分析和規劃的 AI 模型，同時為 Acting 模式配置一個更適合執行操作的模型。這樣，兩個模式可以各司其職，提供更靈活和高效的智能輔助體驗。

為 Plan 模式 和 Act 模式 分別配置 OpenRouter 的 API Key。例如，您可以統一使用免費的 DeepSeek 模型，但后續可以根據自己的實際需求進行調整。在寫代碼時，可以為 Act 模式 配置 Claude 模型，而為 Plan 模式 配置 ChatGPT 模型。這樣，您可以充分利用各個模型的優勢，提高 工作效率 和 智能輔助體驗。

只需配置一次 OpenRouter 的 API Key，即可讓兩個模式共享該設置。

配置完成后，請點擊 Save 以保存設置。

接下來，返回 Cline 的主界面，點擊 New Task 開始測試。

選擇 Act 模式，并勾選 Auto-append: Read, Browse。這是我之(zhi)前(qian)的配置，供(gong)大家參考(kao)。

發送(song) “你好”，查看(kan)輸出效果：

此時 Cline 的配置已完成。

接下來，我們要安裝 Node.js。

正如之前所述，MCP Server 本質上是運行在電腦上的一個 Node.js 程序，因此 Node.js 的運行環境必不可少。

安裝 Node.js 可以參(can)考 ，至此所有準備工作就完成了。

接下(xia)來(lai)我們開始正式安裝 MCP Server。

第一個 MCP

我們回到 Cline，點擊這個 MCP Server 的小圖標。

這是 Cline 新推出的 MCP Server 應用市場。

我們可以按照 星標數量（GitHub Stars） 進行排序。

在這里找到非常受歡迎的 MCP 服務器。我們的第一個 MCP 服務 以這個 GitHub 項目 為例。請點擊 “安裝”（Install） 按鈕進行安裝。

它會自動打開一個 AI 聊天窗口，您可以根據 AI 的指引 完成 MCP Server 的安裝。

第一步是創建一個 空文件夾，用于安裝的 目標位置：

mkdir E:\Document\Cline\MCP\github-server

這一步不是必需的，我將直接點擊 “繼續（Run Command）”按鈕。

在 第二步 中，它要求我們填寫一個 GitHub Token。請打開提供的 鏈接：

進入 GitHub 的設置頁面，找到 Token 生成部分，然后點擊 “創建一個新的 Token”。

為 Token 命名，我這里選擇 Cline。

在這里，我為它授予了 所有倉庫的權限，選擇了 所有倉庫（All repositories）。

接下來，詳細討論一下 Repository permissions，其中包含一些 細致的權限控制選項。

這里我為他提供了創建倉庫的權限，請將 Administration 權限設置為 Read and write。

此外，還有 編寫代碼的權限，請將 Codespaces 權限 設置為 Read and write。

另外，還有一個查看倉庫內容的權限，請將 Contents 權限設置為 Read and write。

你可以根據具體需求為其分配相應的 權限，設置完成后，點擊 Generate token 按鈕即可生成該 Token。

這樣，我們的 GitHub Token 就創建完成了。請記得為令牌設置一個合適的 過期時間，否則 GitHub 會顯示黃色警告 ??（這里我操作得太快，沒有截取對應的圖片，也就不再回退了）。接下來，我們 復制生成的 Token 即可。

回到 Cline，粘貼 Token 后，點擊 「發送（Send）」按鈕 即可。

Cline 已經為我們創建好了 配置文件，點擊 「Save」按鈕 即可保存。

Cline wants to use a tool on the GitHub MCP server，請點擊 「Approve」按鈕。

接下來，Cline 想使用 npx 命令，不過此步驟并非必需，我仍然點擊 「繼續（Run Command）」按鈕。

如果出現 「Proceed While Running（繼續運行）」 提示，請點擊 「Proceed While Running」按鈕。

若您使用的是 Mac 系統，到此 安裝步驟 便已完成。

但若您使用的是 Windows 系統，則還需額外進行一些 配置。

請注意，以下步驟非常重要(yao)，請務(wu)必仔細操作(zuo)：

1. 打開配置文件 cline_mcp_settings.json，首先，將原本位于 "command" 中的 npx 移動到 "args" 數組中：

2. 將 "command" 的值修改為 cmd

3. 在 "args" 數組中新增一行 /c

最終的 配置文件 參考如下：

{
  "mcpServers": {
    "github.com/modelcontextprotocol/servers/tree/main/src/github": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "脫敏處理",
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

保存 配置文件 后，回到 MCP Server 的 「Installed」選項卡，此時 GitHub MCP Server 已經顯示為 綠色狀態，表示安裝成功。

至此，MCP Server 的 配置 已成功完成。實際上，配置 MCP Server 最核心的就是上述的 配置文件，前面的 圖形界面步驟 并非必須，后續直接編輯 配置文件 也可以完成 MCP Server 的配置。

接下來，我們進行一次簡單的 測試：

1. 點擊界面上的 「Done」按鈕：

2. 新建一個對話，點擊 「New Task」按鈕：

3. 向 AI 提問，例如：

我的名字是 BNTang，我在(zai) GitHub 上有哪些倉庫？

回車發送問題：

我們無需手動指定 MCP 服務 或 工具，AI 會自動智能地選擇最合適的 工具 進行處理。在發送問題后，AI 請求調用名為 search_repositories 的 MCP 工具：

4. 點擊 「Approve」按鈕，允許 工具 調用：

此時，Cline 會調用 MCP 工具 并獲取數據：

5. 最終，大模型 會將獲取到的數據進行整理，并返回 最終結果：

如圖所示，AI 列舉了我的 14 個公開倉庫，說明 MCP Server 已成功(gong)配置并正常運行。

接下來，我們打開一個 Powershell 界面：

我們一起來探究一下 MCP 的本質究竟是什么。我先粘貼三行 命令：

$json = '{"jsonrpc":"2.0","id":123,"method":"tools/call","params":{"name":"search_repositories","arguments":{"query":"user:BNTang"}}}'

$env:GITHUB_PERSONAL_ACCESS_TOKEN = "脫敏處理"

echo $json | npx -y @modelcontextprotocol/server-github

• 第一行定義了一個 JSON 字符串，它正是客戶端（Cline）向 MCP Server 傳遞的參數。我們看到 JSON 中的 method 字段是 "tools/call"，表示調用工具；params 中的工具名為 "search_repositories"，即搜索倉庫；query 則是具體的搜索參數，這里是查詢 GitHub 用戶 "BNTang"。
• 第二行設置了運行時的 環境變量，即 GitHub 的 個人訪問令牌（已脫敏）。
• 第三行則通過 管道符，將剛才定義的 JSON 參數傳遞給 MCP Server（一個基于 NodeJS 的程序）執行。

現在我們 運行 一下上述 命令：

可以看到，成功獲取了 GitHub 上用戶 "BNTang" 的 倉庫信息。

通過這個例子，我們發現 MCP 本質上并沒有什么神秘之處。它的核心原理，就是客戶端通過 命令行 調用本地（或服務器上）的 NodeJS 或 Python 程序(xu)，執(zhi)行特定操作(zuo)后再返回結果(guo)。

接下來，我們再 測試 一個新的 任務：創建一個名為 "cline_test" 的 GitHub 倉庫。

我在 Cline 的 問答輸入框 中輸入：

請幫(bang)我(wo)創建一個 GitHub 倉庫(ku)，名字叫做 cline_test

此時，Cline 會詢問我是否允許它調用 MCP Server，我點擊 Approve：

隨后，Cline 顯示 倉庫創建成功，并返回了 倉庫地址：

點擊 鏈接，我們跳轉到 GitHub 查看一下：

確認 倉庫已經 成功創建：

我們注意到，單個 MCP Server 工具 提供了多達 26 項強大的功能，其中包括(kuo)但不限于(yu)：

• 創建或更新文件 （create_or_update_file）
• 搜索倉庫 （search_repositories）
• 創建倉庫 （create_repository）
• 獲取文件內容 （get_file_contents）
• 推送文件 （push_files）

這些(xie)功能幾(ji)乎(hu)涵(han)蓋了所(suo)有與 GitHub 交互(hu)的需求，一個 MCP 工具就可以輕松處理這些(xie)操(cao)作(zuo)。

更重要的是，我們只需使用 自然語言，就能直接指揮 AI 完成這些工作，全程無需離開 VSCode，極大提升了我們的 工作效率。

通過以上示例，我們清晰地感受到了 MCP 的 強大 與 便捷 之處。

Cursor + MCP

接下來，我們來看如何 配置 Cursor。需要注意的是，低版本的 Cursor 是可以支持 MCP 服務 的，我使用的版本是 0.48.7。在 Cursor 的設置中，我首先將版本切換到 Early Access（搶先體驗）版本。

然后，通過點擊 Check for Updates 來 升級 Cursor 到最新版本（版本號會隨時間變化，因(yin)此這里不再(zai)說明具(ju)體(ti)版本(ben)號）。

最新版本支持全新的 MCP 配置方式。本文將聚焦于 新的配置方法。首先，在 Cursor 設置的左側，找到 MCP 配置選項。目前的 MCP 配置是通過 文件方式實現的：

在 項目根目錄下創建一個名為 .cursor 的 文件夾：

在 .cursor 文件夾中，右擊選擇 New File，創建文件 mcp.json：

接下來，將之前在 Cline 中所配置的內容完整復制到 mcp.json 文件中：

{
  "mcpServers": {
    "github.com/modelcontextprotocol/servers/tree/main/src/github": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "脫敏處理"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

當你粘貼完成后，左下角會彈出一個 New MCP server detected（檢測到新的 MCP 服務器）提示，點擊 Enable 啟用它：

之后，打開 Cursor 的 MCP 選項卡，檢查 MCP Server 的 狀態，確認它已經變為 綠色：

?? 注意：如果彈出了 黑色窗口，請不要關閉它，只要確認 MCP Server 是 綠色 即可。

至此，Cursor 的配置已完成，說明當前的 Cursor 配置與 Cline 的設置是一致的。

接下來，我將演示如何添加 另一種 MCP Server。我們前往 MCP Servers GitHub 頁面，找到官方提供的 自定義 Server。這次我將演示 file system（文件系統） 這個 Server：

點擊 鏈接 后，向下滾動頁面，你會看到 npx 的安裝方式：

我們將 file system 的配置添加到 Cursor 的 mcp.json 文件中(zhong)。復制相應(ying)的(de)段(duan)落(luo)配置(zhi)，如下所示：

在 mcp.json 文件中添加一個 逗號，并將復制的內容粘貼到 逗號后面，確保逗號位于 最后一行的末尾：

{
  "mcpServers": {
    "github.com/modelcontextprotocol/servers/tree/main/src/github": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "脫敏處理"
      },
      "disabled": false,
      "autoApprove": []
    },
+   "filesystem": {
+     "command": "npx",
+     "args": [
+       "-y",
+       "@modelcontextprotocol/server-filesystem",
+       "/Users/username/Desktop",
+       "/path/to/other/allowed/dir"
+     ]
+   }
  }
}

對于 Mac 系統，配置到此即可；對于 Windows 系統，需要將 npx 移動到 args 數組中，同時將 command 修改為 cmd，并新增一行 /c。

完成以上步驟后，還需調整 文件系統的配置如下：

這里的配置定義了 file system 可操作的 目錄。我將 電腦桌面的目錄 添加到此列表中。Windows 系統路徑記得使用 雙反斜杠 \，例如：C:\\Users\\Public\\Desktop。

注意將 不需要的配置刪除：

完成 MCP 的添加后，保存并返回 Cursor 設置，進入 MCP 選項卡，啟用 file system 這個 MCP Server，當前顯示為 Disabled（禁用），點擊 Disable 變為 Enable（啟用）：

啟用后，點擊 Refresh（刷新） 按鈕：

這時可以看到 file system 的 MCP Server 已經變為 綠色的狀態：

如果打開了一個新的空白 命令行窗口，請不要關閉，不用理會，只需保證 MCP Server 為 綠色 即可。

最后，我們來測試 file system 這個 MCP Server。在 Cursor 的 AI 對話框中，務必將模式切換到 Agent 模式：

在(zai)此模式下(xia)，我詢問：

C:\Users\Public\Desktop 這個文件夾里面(mian)有什(shen)么？

也就是想了解桌面上都有什么文件。回車后，Cursor 將使用 MCP 工具，點擊 Run Command：

Cursor 說輸出似乎有些亂碼，建議用另一種方式查看，繼續點擊 Run Command：

最終(zhong)，成功列出了目錄中的內容：

順便提一句，如果希望 Cursor 自動使用 MCP 工具，而無需每次授權，可以在 Cursor 設置中進入 Features 選項卡，勾選 Enable auto-run mode 選項：

這樣在使用 MCP 時就無需再次確認授權。我們同樣可以將此配置文件直接復制到 Cline 中，使 Cline 也能使用 file system 這(zhe)個 MCP Server。

全量復制 Cursor 的 mcp.json 內容，切換到 Cline，進入 MCP Servers，點擊 Installed 選項卡，然后選擇 Configure MCP Server：

然后直接粘(zhan)貼復制的內(nei)容：

保存后，可以看到 file system 這個 MCP Server 也已(yi)經變(bian)為(wei)綠色狀態：

這樣，無論是在 Cursor 還是 Cline，file system 這個 MCP Server 都可以(yi)順利使用，兩個工(gong)具(ju)之間的配置是可以(yi)互通的。

總結一下(xia)，我(wo)們介紹了兩種設置 MCP 的方(fang)法：第(di)一種是(shi)讓 AI 自(zi)動幫助我(wo)們生成配置文(wen)件，第(di)二種是(shi)利(li)用 GitHub 上的示例手動粘貼配置。這兩種方(fang)法均可輕松使(shi)用，用戶可以根據(ju)需要選擇其(qi)一。

Python 版

這里我們以一個特殊的 MCP Server time 為例，展示如(ru)何安裝和配置使用 Python 編寫的 MCP Server。

第一步：訪問 MCP Server 的 GitHub 頁面，在 MCP Server 列表中找到 time：

點擊進入其 ：

第(di)二步：安(an)(an)裝 Python 環(huan)境（如(ru)已有(you)可跳過(guo)）由(you)于(yu)該(gai) MCP Server 基于(yu) Python 開發，因此(ci)需確保你(ni)的(de)電腦已安(an)(an)裝 Python 環(huan)境：

如果(guo)尚未安裝 Python，請(qing)參考：。

第(di)三(san)步(bu)：安裝(zhuang) MCP Server（time）復制如下(xia)命(ming)令：

pip install mcp-server-time

打開 Powershell 粘貼并執行：

安裝完成界面：

第四步：配置 MCP Server 到 Cline，在 GitHub 頁面找到 Configure for Claude.app 部分，展開 Using pip installation，復(fu)制以下 JSON 配置：

"time": {
  "command": "python",
  "args": ["-m", "mcp_server_time"]
}

打開 Cline 的 MCP 配置文件 cline_mcp_settings.json，將上述配置添加到 "mcpServers" 中，注意逗號：

{
  "mcpServers": {
    "github.com/modelcontextprotocol/servers/tree/main/src/github": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "脫敏處理"
      },
      "disabled": false,
      "autoApprove": []
    },
    "filesystem": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Users\\Public\\Desktop"
      ]
    },
+   "time": {
+     "command": "python",
+     "args": ["-m", "mcp_server_time"]
+   }
  }
}

第五步：配置本地時區，接下來，在剛才的 "args" 后面添加時區(qu)配置(zhi)（這里(li)以上(shang)海時區(qu)為例）：

"--local-timezone=Asia/Shanghai"

配置后效果：

保存配置文件。

第六步：驗證 MCP Server 是否成功加載，回到 Cline 的 MCP Server 面板，切換到 Installed 選項卡，確認 time 已變為綠色狀態：

第七步：測試 MCP Server 功能，新建對話框，切換到 Act 模式，輸入測試問題：

When it’s 4 PM in New York, what time is it in London?

首次使用時，Cline 將請求調用 MCP 權限。若想避免每次詢問，可在 Cline 設置 中勾選：

• Use MCP Server
• 對應 MCP 工具的 Auto Approve 選項

點擊 Approve 后，MCP Server 成功調用，并(bing)返回結(jie)果：

最終效果：

第八步：遷移配置到 Cursor（可選），同樣的配置也可直接復制到 Cursor 的 .cursor/mcp.json 文件中，保存后點擊 Refresh 即可加載：

以上(shang)即(ji)為一(yi)個特殊 MCP Server（time）的完整安裝(zhuang)、配置與使(shi)用(yong)過程。后續(xu)我們將繼續(xu)介紹其他實用(yong)的 MCP 服務。

Broswer Tool

我們來看一個前端開發必備的 MCP 工具，名為 Browser Tool。首先，在 Cline 中搜索 Browser Tool，點擊進入其 GitHub 頁面：

這個 MCP 工具可以讓 AI 直接讀取瀏覽器中的內容(rong)。要使(shi)用它，我們需要先安裝一(yi)個 Chrome 插(cha)件：

插件下載地址：

我使用的是谷歌瀏覽(lan)(lan)器(qi)，這一步的主要目(mu)的是在瀏覽(lan)(lan)器(qi)中安裝這個插(cha)件。下(xia)載完(wan)成后，進入瀏覽(lan)(lan)器(qi)的擴展程序(xu)管(guan)理頁面：

在頁面右上角打(da)開“開發者模式”：

然后，將(jiang)剛剛下載的(de)插件(jian)解(jie)壓到本地，進(jin)入解(jie)壓后的(de)文件(jian)夾，將(jiang)其中(zhong)的(de) chrome-extension 文件(jian)夾拖(tuo)拽到瀏(liu)覽器(qi)的(de)擴展程序(xu)頁面中(zhong)：

這(zhe)樣，BrowserTools MCP 插件就(jiu)成功安裝了：

插件安裝完成后，我(wo)們正式(shi)安裝 Browser Tool 這個 MCP 工具。這里我(wo)們依舊使用 npx 安裝方式(shi)。我(wo)仿照之(zhi)前的配(pei)置，在 Cline 中新(xin)建一(yi)個配(pei)置項，將之(zhi)前的 file system 配(pei)置復制(zhi)一(yi)份，并將名稱修改為 browser-tool-mcp：

接(jie)下來，我們回到 GitHub 頁面，復制(zhi)以 MCP 結尾的(de) npx 命令：

@agentdeskai/browser-tools-mcp@latest

將此(ci)命令(ling)粘貼(tie)到(dao) args 中(zhong)：

刪除不需要的內容，例如 "C:\\Users\\Public\\Desktop"，最終配置如下：

"browser-tool-mcp": {
  "command": "cmd",
  "args": [
    "/c",
    "npx",
    "-y",
    "@agentdeskai/browser-tools-mcp@latest"
  ]
}

此(ci)時，我們查看(kan) Cline 的 MCP Server 選項卡，發(fa)現 browser-tool-mcp 已經變成綠(lv)色，說(shuo)明安裝成功：

但到這里還沒有完(wan)全結束，我們(men)還需(xu)要(yao)執(zhi)行另一個(ge)命令：

npx @agentdeskai/browser-tools-server@latest

在命(ming)令行中(zhong)執行以 server 結尾的(de)命(ming)令（我是在 Powershell 中(zhong)執行的(de)）：

接著，我(wo)們打開瀏(liu)覽器，按下 F12 打開開發者(zhe)工具，此時(shi)瀏(liu)覽器會(hui)提示：“BrowserTools MCP 已經開始調試此瀏(liu)覽器”：

我(wo)們(men)再回(hui)顧一(yi)下，使用(yong)這個 MCP Server 需要啟動的三個部分：

1. 瀏覽器中安裝的插件：

2. 命令行中執行的以 server 結尾的命令：

3. Cline 中配置的以 MCP 結尾的命令：

只有同(tong)時(shi)啟(qi)動這(zhe)三個部分(fen)，我們(men)才能真正實(shi)現瀏覽器與 AI 的完(wan)全打通(tong)。

現在，我讓(rang) AI 分析一下瀏(liu)覽器(qi)的(de)網(wang)絡面板：

請分析一下瀏覽器的網絡面板，并告訴我(wo)有哪些請求？中文回答我(wo)。

AI 給出的(de)分析非(fei)常詳細，大家可以看截圖，我這(zhe)里就不再贅述。

接(jie)下(xia)來，我返回(hui)瀏覽器(qi)網頁(ye)，打開調試工具的 Element 選(xuan)項卡，鼠標選(xuan)中一個元素：

然后我再讓 AI 來(lai)解釋(shi)一(yi)下瀏覽(lan)器中(zhong)我選中(zhong)的部(bu)分：

瀏覽器我選中(zhong)部分是什么，里面有何(he)主要控件(jian)，請用中(zhong)文回答我。

AI 同樣給出了清晰詳細的解釋，大(da)家可以參考截圖(tu)。

通(tong)過(guo)以上操作，我(wo)(wo)們成(cheng)功實(shi)現了(le)前端開發與 AI 之間(jian)的高效溝通(tong)。相比于(yu)過(guo)去我(wo)(wo)們手動從瀏覽器 Element 選項卡中復制 HTML 代(dai)碼(ma)再與 AI 進行(xing)問答的方式，效率得(de)到(dao)了(le)極大的提升(sheng)。

因此(ci)，使用 Browser Tool 這(zhe)個 MCP Server 工具，可以顯著提高我們前端開發的效(xiao)率。

MCP 工具大全

Smithery.ai 是(shi)一(yi)個 MCP 工具的聚合網站，目前已收(shou)錄(lu)超(chao)過 4,219 種 MCP Server：

我們可以根據(ju)自己(ji)的需求，在這里找到最適(shi)合(he)自己(ji)的 MCP 服務，比如搜索引擎相關(guan)(guan)、命令執行相關(guan)(guan)、數據(ju)庫相關(guan)(guan)、網絡爬蟲相關(guan)(guan)等(deng)等(deng)。

下面我以 Smithery.ai 中(zhong)的一個名為 Sequential Thinking 的 MCP Server 為例(li)：

Sequential Thinking 能(neng)(neng)夠將普通的 AI 大模型(xing)轉(zhuan)化為(wei)具備推(tui)理能(neng)(neng)力(li)的模型(xing)。點擊 Sequential Thinking 鏈接進(jin)入其詳細介紹(shao)頁面，接下(xia)來我們無(wu)需關注右側的安裝方式(shi)，直(zhi)接進(jin)入其 GitHub 首頁：

按照慣(guan)例(li)，找到包含 npx 命(ming)令的那一行，將其復(fu)制下來：

然后回到(dao) Cline 中(zhong)(zhong)，在 mcpServers 中(zhong)(zhong)添加一個逗號后粘貼剛才復制的內容(rong)。如(ru)果你使用的是 MacOS，直接(jie)粘貼即可；如(ru)果你使用的是 Windows，則需要稍(shao)作修改(gai)：將 npx 移動到(dao) args 中(zhong)(zhong)，command 改(gai)為 cmd，并在 args 中(zhong)(zhong)添加 /c：

"sequential-thinking": {
  "command": "cmd",
  "args": [
    "/c",
    "npx",
    "-y",
    "@modelcontextprotocol/server-sequential-thinking"
  ]
}

這樣就完(wan)成(cheng)了(le)安裝。此時在 Cline 的(de) MCP Server 選項卡中(zhong)，sequential-thinking 會(hui)變(bian)成(cheng)綠色，表(biao)示(shi)安裝成(cheng)功(gong)：

熟練之后，安裝一(yi)個 MCP 工具只(zhi)需(xu)幾(ji)秒鐘(zhong)。同樣，我們(men)也可以將上述配置(zhi)文(wen)件復(fu)制到(dao) Cursor 中，Cursor 也能使用(yong)該 MCP Server。

在 Cursor 的 MCP Server 配置中，最后一(yi)個 MCP Server 后面添加一(yi)個逗號(hao)，將配置內容粘(zhan)貼進去，保存后點擊 Refresh 刷新一(yi)下，sequential-thinking 同樣(yang)會變成綠色：

好了，我(wo)突然意識(shi)到本文篇(pian)幅(fu)已(yi)經很長了，后(hou)續(xu)(xu)我(wo)會繼續(xu)(xu)介紹(shao)更多 MCP 工具以及組合使用的方法，感興趣的朋友可以關注我(wo)的公眾號，后(hou)續(xu)(xu)會持續(xu)(xu)更新。

最后，我(wo)分享一些(xie) MCP 聚合(he)網站給(gei)大(da)家：

名稱	描述	鏈接
Smithery.ai (推薦)	Cline 插件 MCP 市場
MCP Store	英文版（集合全球3600+個 MCP Server，每天還在增長。）
MCP Market	中文版（集合全球3600+個 MCP Server，每天還在增長。）
MCP Servers Directory	Official servers directory
MCP.run	MCP servers collection
MCP.so	MCP servers repository
PulseMCP	MCP servers collection
Glama.ai	MCP servers directory
AIMCP.info	MCP servers directory (Chinese)
Awesome MCP Servers	Curated list of MCP servers
Awesome MCP Servers (Search)	Search functionality for MCP servers
Model Context Protocol	Official MCP servers repository

值得注意的獨立 MCP 服務器

服務器	描述	鏈接
Time MCP Server	Provides current time information
Filesystem MCP Server	Provides filesystem access
Fetch MCP Server	Enables web content fetching
bioRxiv MCP Server	Specialized for bioRxiv papers

MCP 雖然功能強大，并且擁有廣泛的應用前景，但在實際使用過程中，務必注意安全問題。在允許模型操作本地文件之前，建議提前對 HOST 可訪問的(de)目錄和文件范圍(wei)進(jin)行嚴格限制，以防(fang)止敏(min)感信(xin)息(xi)泄露(lu)，避免產生開盒、信(xin)息(xi)泄密等(deng)安全風險。

另外，模型必須支持 Function Calling（允許模型調用外部工具以增強自身能力） 才能正常(chang)使用 MCP 功能。

常見問題解答（FAQ）

Q：MCP 是否只能在 Claude 模型上使用？

A：不是。 只要模(mo)型支(zhi)持 Function Calling 功(gong)能(neng)，就可以使用 MCP。

Q：Perplexity 的 API 是否支持 MCP？

A：支持。 Perplexity 的 API 本身即(ji)支持 Function Calling，因此(ci)也支持 MCP。

如果你對以(yi)下主題感興趣，推薦你閱(yue)讀(du)以(yi)下文章：

1. ??
2. ??
3. ??
4. ??