MCP Server實戰(zhàn)：將Puppeteer瀏覽器自動化封裝為標準AI Agent工具
瀏覽器自動化還在寫腳本？一個輕量MCP Server直接把它變成標準Tool
你有沒有遇到過這種情況：想讓AI Agent自動操作網(wǎng)頁——填個表單、抓個數(shù)據(jù)、點個按鈕——結(jié)果光是配置瀏覽器驅(qū)動、處理反爬、解析DOM就折騰半天？
更頭疼的是，每個Agent框架的瀏覽器工具接口都不一樣，今天用Playwright，明天換Puppeteer，后天又要兼容Selenium。代碼寫了一堆，復用率幾乎為零。
問題的核心不是瀏覽器自動化難，而是它沒有被"標準化"。
今天聊一個思路：用一個輕量MCP Server，把Puppeteer的瀏覽器能力封裝成標準的MCP Tool，讓任何支持MCP協(xié)議的LLM都能直接調(diào)用瀏覽器，就像調(diào)用一個API一樣簡單。
什么是MCP？為什么它能解決這個問題
MCP（Model Context Protocol）是Anthropic提出的開放協(xié)議，核心目標是：讓LLM和外部工具之間的通信標準化。
打個比方：以前每個工具都像一個方言，Agent要學十種方言才能調(diào)用十個工具。MCP就是普通話——工具說MCP，Agent說MCP，大家就能對話。
所以，如果我們把瀏覽器自動化封裝成一個MCP Server，那任何支持MCP的Agent（Claude、OpenClaw、龍蝦等）都能直接"用"瀏覽器，不用關(guān)心底層是Puppeteer還是Playwright。
這個輕量MCP Server做了什么
這個項目的核心思路很清晰：用Puppeteer做底層驅(qū)動，通過MCP協(xié)議暴露結(jié)構(gòu)化的瀏覽器操作能力。
它提供的不是一堆原始API，而是幾個語義明確的工具：
tools:
- navigate: 打開指定URL
- click: 點擊頁面元素（通過可訪問性描述定位）
- type: 在輸入框填寫內(nèi)容
- screenshot: 截圖并返回base64
- get_page_content: 獲取頁面結(jié)構(gòu)化內(nèi)容關(guān)鍵設計點有兩個：
1. 結(jié)構(gòu)化可訪問性數(shù)據(jù)，不是原始DOM
傳統(tǒng)做法是把整個DOM樹丟給LLM，token爆炸不說，LLM還經(jīng)常解析出錯。這個Server的做法是：只提取可訪問性樹（Accessibility Tree）。
什么是可訪問性樹？就是瀏覽器為屏幕閱讀器生成的語義化結(jié)構(gòu)——按鈕就是按鈕，輸入框就是輸入框，鏈接就是鏈接。比原始HTML干凈得多，LLM理解起來也更準確。
// 獲取頁面可訪問性快照
const snapshot = await page.accessibility.snapshot();
// 返回的不是HTML，而是這種結(jié)構(gòu)：
// { role: "button", name: "提交", children: [...] }LLM看到的是"有一個叫'提交'的按鈕"，而不是一坨<button class="btn btn-primary" data-action="submit">提交</button>。哪個更好理解，不言自明。
2. 可選視覺模式，處理復雜場景
純文本的可訪問性數(shù)據(jù)能覆蓋80%的場景，但有些情況——比如驗證碼、圖表、Canvas繪制的內(nèi)容——文本描述不了。
這時候可以開啟視覺模式，讓Server截圖并以圖片形式返回給LLM。Claude這類支持多模態(tài)的模型可以直接"看"截圖來理解頁面狀態(tài)，然后決定下一步操作。
// 視覺模式：截圖 + 可訪問性數(shù)據(jù)雙通道
if (visualMode) {
const screenshot = await page.screenshot({ encoding: 'base64' });
const snapshot = await page.accessibility.snapshot();
return { screenshot, accessibility: snapshot };
}跨平臺兼容怎么實現(xiàn)的
這個Server的跨平臺能力來自Puppeteer本身的設計。Puppeteer支持Chrome、Firefox，甚至可以通過配置指向本地已安裝的瀏覽器，不需要額外下載Chromium。
在MCP Server層面，它把瀏覽器啟動配置做了抽象：
{
"browser": "chrome",
"headless": true,
"executablePath": "/usr/bin/google-chrome"
}不管你在macOS、Linux還是Windows上跑，只要指定好瀏覽器路徑，Server就能啟動。對于容器化部署（Docker），配合puppeteer官方鏡像基本開箱即用。
實際應用場景：一個完整的自動化案例
假設你要做一個"自動比價Agent"：用戶說"幫我看看京東和拼多多上iPhone 16的價格"，Agent自動打開兩個網(wǎng)站、搜索商品、提取價格、返回對比結(jié)果。
用這個MCP Server，Agent的工作流是這樣的：
Agent收到任務 → 調(diào)用navigate工具打開京東 → 調(diào)用type工具輸入"iPhone 16" →
調(diào)用click工具點擊搜索 → 調(diào)用get_page_content獲取商品列表 →
重復上述流程訪問拼多多 → 對比價格 → 返回結(jié)果整個過程中，Agent不需要知道Puppeteer的API長什么樣，它只需要調(diào)用MCP標準的工具接口。瀏覽器自動化變成了一個"即插即用"的能力模塊。
對AI Agent生態(tài)的意義
這個思路的價值不只是"又一個瀏覽器工具"，而是它展示了一種模式：把復雜的基礎設施能力，通過MCP協(xié)議封裝成LLM可以直接消費的標準工具。
瀏覽器只是開始。同樣的思路可以應用到：
- 數(shù)據(jù)庫操作（SQL查詢封裝成MCP Tool）
- 文件系統(tǒng)（讀寫文件封裝成MCP Tool）
- API調(diào)用（REST/GraphQL封裝成MCP Tool）
當這些能力都變成標準的MCP Tool，構(gòu)建Agent就不再是"從零寫集成代碼"，而是"像搭積木一樣組合工具"。
下一步：動手試試
- 克隆項目：
git clone [項目地址]，跑起來看看它暴露了哪些工具 - 接入你的Agent：如果你在用Claude或支持MCP的框架，在配置里加上這個Server的地址
- 改造一個自己的MCP Server：把你常用的腳本（爬蟲、數(shù)據(jù)處理、API調(diào)用）封裝成MCP Tool，體驗一下"工具標準化"的爽感
瀏覽器自動化不應該每個Agent都重寫一遍。封裝一次，到處復用——這才是MCP協(xié)議的正確打開方式。