iT邦幫忙

2026 iThome 鐵人賽

DAY 22
0
Vibe Coding

從 Prompt 到成品:30 天 Vibe Coding 入門與實作系列 第 22 篇

Day 22|MCP 實際玩玩看:讓 AI 操作指定資料夾

  • 分享至 

  • xImage
  •  

昨天我們認識了 MCP,知道它可以讓 AI 用比較標準化的方式連接外部工具與資料來源。不過只看概念還是有點抽象,所以今天直接實際接一個 MCP Server 看看。

為了不要第一個 MCP 就把自己搞到懷疑人生,這次選擇官方提供的 Filesystem MCP Server。它的功能很單純:讓 AI 在我們允許的資料夾範圍內讀取、建立、搜尋與管理檔案。GitHub

先準備一個測試資料夾

首先在桌面建立一個 MCP-Test 資料夾,裡面放兩個簡單的文字檔:

MCP-Test/
├── todo.txt
└── note.txt

todo.txt 可以隨便寫一些內容:

完成 Vibe Coding 鐵人賽
整理專題 README
修正登入頁面的 Bug

而 note.txt:

今天第一次測試 MCP。
希望不要把我的電腦炸掉。

等等我們就看看 AI 能不能在沒有手動上傳這兩個檔案的情況下,直接透過 MCP 找到它們。

安裝 Filesystem MCP

這次我使用 Claude Desktop 示範。官方文件提供的方式是修改 claude_desktop_config.json,Windows 可以在:

%APPDATA%\Claude\claude_desktop_config.json

找到設定檔。Filesystem MCP 需要 Node.js,因此開始前也可以先在 Terminal 確認:

node --version

接著加入 Filesystem MCP 的設定。Windows 官方目前建議透過 cmd /c 執行 npx:GitHub

{
  "mcpServers": {
    "filesystem": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "C:\\Users\\你的使用者名稱\\Desktop\\MCP-Test"
      ]
    }
  }
}

這裡最重要的是最後面的路徑。

我們不是直接把整台電腦開放給 AI,而是只允許 Filesystem MCP 存取:

Desktop\MCP-Test

Filesystem MCP 本身就有允許目錄的存取控制,因此測試時只給一個專門建立的資料夾就夠了。GitHub

設定完成並重新啟動 Claude Desktop 後,如果連線正常,就能看到 Filesystem 提供的相關工具。

第一次真的讓 AI 使用 MCP

接著直接開一個新的對話,輸入:

請查看 MCP-Test 資料夾裡有哪些檔案,讀取 todo.txt,並告訴我目前有哪些待辦事項。

這次跟以前把文字檔拖進聊天室不一樣。

Claude 可以透過 Filesystem MCP 去查看允許的目錄,再讀取 todo.txt,最後整理出:

目前有三個待辦事項:

1. 完成 Vibe Coding 鐵人賽
2. 整理專題 README
3. 修正登入頁面的 Bug

這樣昨天講的:

AI
 ↓
MCP
 ↓
外部工具 / 資料

就不再只是一張概念圖了。

我們甚至可以再下一個 Prompt:

請在 MCP-Test 裡建立一個 done.txt,內容寫「Filesystem MCP 測試成功」。

如果允許這次工具操作,資料夾最後就會變成:

MCP-Test/
├── todo.txt
├── note.txt
└── done.txt

也就是說,AI 不只是「知道我們有這些檔案」,而是真的透過 MCP 提供的工具去讀取、建立與管理檔案。官方 Filesystem Server 本身也提供讀寫檔案、建立目錄、移動與搜尋檔案等功能。GitHub

MCP 最重要的其實不是這個文字檔

今天做的事情其實非常簡單。

說到底,不就是讓 AI 讀一個 todo.txt 嗎?

但重點不是這個文字檔有多厲害,而是 AI 可以透過 MCP 使用外部提供的能力。

今天接的是 Filesystem,所以它可以操作檔案;換成其他 MCP Server,能提供的工具也會跟著不同。目前官方參考實作就包含 Filesystem、Git、Fetch、Memory、Time 等不同用途的 Server。GitHub

這也把 Day 14 開始講的 Agent 補上了最後一塊:

Prompt → 告訴 Agent 要做什麼
Context → 提供判斷需要的資訊
Agent → 決定下一步要做什麼
MCP / Tools → 真的去執行這些事情

上一篇
Day 21|MCP 是什麼?AI 為什麼需要「工具」?
下一篇
Day 23|小專案開始:先別急著寫 Code,把一句想法變成需求
系列文
從 Prompt 到成品:30 天 Vibe Coding 入門與實作 共 23 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言