MCP VSCode Cline MCP Server

用 Cline 在 VSCode or Claude 玩轉 Model Context Protocol (MCP) 🚀

MCP 的全名是 Model Context Protocol。簡單說，它就像是 AI 界的 USB Type-C 🔌 ✨

MCP 也是類似的概念，它想給 AI 一個通用的溝通方式，讓 AI 可以很方便地去發現、搞懂、然後使用外部的工具或服務。

你可能聽過 Function Calling( N8N 的 AI Agent 比較類似這個)，那也能讓 AI 去叫外面的功能。

Function Calling 通常是你得先告訴 AI 有哪些功能可以用，像個菜單一樣。

但 MCP 更像是讓 AI 自己主動去看看周圍 (Context) 有哪些工具可以用，然後自己決定要怎麼用。

下面這張圖，大約就是你在 VSCode 用 Cline 跟 AI 聊天時，背後 MCP 在忙什麼：

graph LR A[使用者在 VSCode 中 <br> 透過 Cline 輸入指令] --> B[大型語言模型<br>接收指令] B --> C{AI 需要外部工具<br>或資訊？} C -- 是 --> D["AI 透過 MCP<br>找可用的工具"] D --> E[AI 選擇合適的工具<br>並透過 MCP 呼叫] E --> F[外部工具/伺服器<br>執行任務] F --> G[AI 接收工具<br>回傳的結果] C -- 否 --> G G --> H[AI 整合資訊<br>產生最終回覆] H --> I[結果顯示在<br>VSCode Cline 介面中] style A fill:#f9f,stroke:#333,stroke-width:2px style I fill:#ccf,stroke:#333,stroke-width:2px style C fill:#f9d,stroke:#333,stroke-width:2px,shape:diamond style D fill:#9cf,stroke:#333,stroke-width:2px style E fill:#9cf,stroke:#333,stroke-width:2px style F fill:#9cf,stroke:#333,stroke-width:2px

很多 MCP 的工具或伺服器都是用 Python 或 Node.js 寫的, 所以建議大家可以先安裝.

Cline 取得「大語言模型決定」後，用這個決定作為依據，再去呼叫 MCP Server.

如果你想加入, sse 的遠端 server, 直接將 URL 貼到 Remote Servers 即可.

# 下載並安裝 nvm: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash # 下載並安裝 Node.js: nvm install 22 # 核對 Node.js 版本: node -v # 應會印出 "v22.14.0"。 nvm current # 應會印出 "v22.14.0"。 # 核對 npm 版本： npm -v # 應會印出 "10.9.2"。

請到~/.config/Claude/claude_desktop_config.json設定

{ "mcpServers": { "n8n mcp": { "command": "npx", "args": [ "-y", "supergateway", "--sse", "https://xxxxxxx/mcp/xxxxxxxxx/sse" ] } } }

Sequential Thinking MCP Server- 拆解問題, 分析, 推理, 思考.

Basic Memory- 長期記憶 (紀錄對話歷史, 會去讀取你之前問過得內容).

Firecrawl MCP Server- 透過 Firecrawl 抓取網路上的資訊.

Playwright MCP- 呼叫瀏覽器複雜爬蟲掰掰！Playwright MCP + AI 輕鬆實現 PTT 圖片自由！

chrome-devtools MCP-Chrome DevTools MCP 實測 Claude AI 自動化：Odoo 打單 + PTT 爬蟲圖片下載！ Sonnet 4.5

- Youtube Tutorial - 告別 AI 瞎猜！Context7 MCP + clinerules 精準生成 Odoo 18 Addon

告別 AI 瞎猜！ Context7 MCP 搭配.clinerules優化 Prompt，精準生成 Odoo 18 Addon 實戰

大型語言模型 (LLM) 在回答程式碼相關問題時，常常依賴過時或通用的訓練資料，導致：

❌ 程式碼範例過時，基於一年前的舊資料。 ❌ 產生出根本不存在的幻想 API。 ❌ 針對舊的軟體包版本，給出通用或不適用的答案。

Context7 MCP 能直接從原始來源抓取最新、針對特定版本的文件和程式碼範例，並將這些最新資訊直接放入你提供給 AI 的 Prompt (提示語) 的上下文中。

{ "servers": { "Context7": { "type": "stdio", "command": "npx", "args": ["-y", "@upstash/context7-mcp@latest"] } } }

使用 Cline + Odoo 18 +gemini-2.0-flash-001來實戰一下,

這邊除了用 Context7 之外, 還會使用 Filesystem MCP Server.

直接把我們的需求全部給 Cline 不切實際, 效果也不好, 透過.clinerules來改善這個問題

.clinerules/00-doc.md- 請它用 Context7 先閱讀文件, 避免幻覺.

如果在執行中, 你想要讓 Cline 自動一直執行下去, 不要每次都一直和你要求允許,

點擊打勾這個圖示, 右邊的 autoApprove 就會填入對應的事件 type, 之後遇到相同的就會跳過去了

文章都是我自己研究內化後原創，如果有幫助到您，也想鼓勵我的話，歡迎請我喝一杯咖啡 :laughing:

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Create crafted UI components inspired by the best 21st.dev design engineers.

Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server

An MCP server to help AI assistants to answer questions and generate AccelByte Extend SDK code more effectively .

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

ALAPI MCP Tools,Call hundreds of API interfaces via MCP

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.

APIMatic MCP Server is used to validate OpenAPI specifications using APIMatic. The server processes OpenAPI files and returns validation summaries by leveraging APIMatic’s API.

One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.

Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB

MCP VSCode Cline

About

Details

Jump to

Setup

用 Cline 在 VSCode or Claude 玩轉 Model Context Protocol (MCP) 🚀

About

Details

Jump to

Setup

用 Cline 在 VSCode or Claude 玩轉 Model Context Protocol (MCP) 🚀

More like this

Sentry

Github

Git

GitLab

Context 7

Playwright