vscode insiders with google-map mcp 小記
OS: MacOS 14.3
VScode Insiders: 1.99.0
最近 MCP 很火熱, 也覺得這樣的協定真的很棒, 可以增加很多應用以及擴展大家的領域
今天來寫看了 Youtube 影片, 也一併動手做的小記
MCP (Model Context Protocol) 介紹
MCP is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect your devices to various peripherals and accessories, MCP provides a standardized way to connect AI models to different data sources and tools.
目前 MCP Server 常見支援兩種方式
Docker
NPX
我這邊採取的是 NPX 方式
首先 NPX 方式要使用 npm 指令進行安裝, 要有 npm 指令就要安裝 Node.js
因為我的 OS 是 Mac 所以我就使用 homebrew 方式安裝 Node.js
指令如下
%brew install node
可以驗證一下是否安裝成功
% node -v
v23.10.0
% npm -v
10.9.2
然後 MCP 目前在 vscode insiders 已經開始支援, 設定 MCP Server in vscode 大概目前也看到兩種做法
==== 使用 vscode 內建的功能來建立 ====
開啟功能選單 (Command + Shift + P)
搜尋 MCP Add Server 功能
選取要安裝的方式
進行相關設定
另外可以觀察 Settings
搜尋 mcp , 可以看到 settings.json
==== 在 .vscode 目錄內建立 mcp.json ====
我是採取另外一種方式, 在 .vscode 目錄內建立 mcp.json 檔案
我喜歡這樣的方式是因為設定獨立起來, 也比較有彈性
今天要測試的 是 Google MAP MCP
要找目前有哪些 MCP Server 可以測試與使用, 我可能會用下列兩個
間單的方式就是找到你要測試的 MCP Server, 然後看他的設定檔如何設定, 以 Google Map 來說
https://github.com/modelcontextprotocol/servers/tree/main/src/google-maps
取得 Google Maps API Key - https://developers.google.com/maps/documentation/javascript/get-api-key#create-api-keys
決定你要的 MCP Server 方式, 選取剛方式的設定檔
我用的是 NPX 方式, 所以只要在 .vsocde 目錄內建立 mcp.json
內容如下
{
"mcpServers": {
"google-maps": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-google-maps"
],
"env": {
"GOOGLE_MAPS_API_KEY": "<YOUR_API_KEY>"
}
}
}
}
將啟用的 Google Maps API Key 替代上方的 <YOUR_API_KEY>
重新啟動 vscode Insiders
將 vscode chat 開啟, 切換到 Agent 模式
點選 Select Tools 圖示
這個時候就看到 MCP Server: google-maps 選項可以勾選
勾選 MCP Server: google-maps
左邊那個 伺服器圖示是用來啟動 server 或是檢視相關輸出的
這個時候有些人可能會再啟動 vscode insiders 一次 (都市傳說,呂布治百病)
然後就可以開始詢問 AI 問題
這個時候就會發現會執行相關 google map 功能
會提示你是否允許執行, 可以選擇 session / workspace / 總是允許
會整理提示的相關資料, 也可以透過對話的方式請他製作網頁
簡單的成品大概如下
只能說 AI 真的是越來越方便了
~ enjoy it
References
