瀏覽器 AI Agent - Kerwin AI Information

📌 本文重點

peerd 把瀏覽器變成本機 AI Agent 執行環境

純前端運作，API Key 不經過第三方伺服器

多 Agent 隔離與瀏覽器自動化，適合個人工作流與 QA 腳本

用一句話講清楚：peerd 就是把「瀏覽器」變成你的 AI Agent 執行環境，所有腳本、代理邏輯都在本機瀏覽器裡跑，不經過第三方伺服器。

連結先給你：
– GitHub / 官方介紹：https://github.com/NotASithLord/peerd
– Demo / 官網入口：https://peerd.ai

核心功能：瀏覽器就是沙盒 + 多 Agent 控制台

1. 純前端 JS，API Key 只在你機器裡

peerd 是一個瀏覽器擴充套件，用原生 JavaScript 寫成，執行邏輯都在前端：

你自己輸入 OpenAI、Anthropic、Gemini 等 API Key
請求直接從瀏覽器送出，不經過 peerd 的伺服器
不需要額外安裝「AI 瀏覽器」或開一個本地 server

💡 關鍵： API 呼叫完全在本機瀏覽器完成，你的金鑰與請求內容不會經過第三方後端服務。

你可以立刻做的事：
1. 打開 https://peerd.ai，依照說明安裝瀏覽器擴充套件（目前以 Chromium / Chrome 系列最佳）。
2. 安裝後，在擴充圖示裡找到 peerd，開啟設定頁，填入你現有的 OpenAI / Anthropic / Gemini API Key。
3. 測試呼叫一次簡單指令（例如：讓 Agent 幫你總結目前開啟頁面的內容），確認 Key 有效。

2. 多 Agent，彼此隔離在不同 sandbox / worker

peerd 的設計重點是：一個瀏覽器，多個 Agent，各自有自己的工作空間。

它利用：

多分頁 / 多視窗
Web Worker / Service Worker

來把不同 Agent 隔離，例如：

Agent A：專門抓資料，跑在一個 Worker 裡
Agent B：負責整理與寫摘要，跑在另一個 Worker
Agent C：只負責觸發 UI 操作

彼此透過訊息溝通，但記憶體與腳本隔離，減少互相干擾。

💡 關鍵： 每個 Agent 在獨立的 worker/sandbox 裡執行，降低互相干擾與權限混用風險。

你可以立刻做的事：
1. 在 peerd 的控制面板中，建立兩個 Agent：例如「資料收集 Agent」「摘要整理 Agent」。
2. 設定：「資料收集 Agent」負責打開網站、擷取內容；完成後把文字丟給「摘要整理 Agent」。
3. 觀察兩個 Agent 的 log（通常 peerd 會有 console / log 面板），確認任務是分開跑的。

3. 自動化瀏覽、跑 JS 腳本，甚至開 WebAssembly VM

peerd 不只有「叫模型寫文字」這一招，它可以：

控制瀏覽器行為：
自動打開指定網址
在頁面中執行 DOM 查詢、抓元素文字
觸發按鈕點擊、輸入框填寫
執行 JavaScript 腳本：在 sandbox 內跑程式邏輯，像一個本地化的「Agent 腳本引擎」
啟動 WebAssembly（WASM）虛擬機：甚至可在瀏覽器裡跑一個簡化版的 Linux VM + 網路堆疊

這代表：

你不用額外架 server 就能做「自動化 QA 腳本」
可以把實驗性 side project 完整關在瀏覽器裡玩，不動你的主機環境

你可以立刻做的事：
1. 用 peerd 新增一個「任務腳本」，讓它在分頁裡執行以下行為：
– 打開一個新聞網站
– 用 document.querySelectorAll('h1, h2') 抓標題
– 把標題串成一段文字
2. 把這段文字交給 LLM，請它生成摘要，顯示在 peerd 的面板中。
3. 如果你熟 JS，可以把這個流程包成一個可重複執行的腳本，日後一鍵跑。

適合誰用：三種具體場景

1. 個人資訊整理 / 研究助手

使用情境：

你每天會看固定幾個新聞網站或技術部落格
想要「早上開機 → 一鍵跑 → 自動抓標題 → 整理成一頁摘要」

可以這樣設計一個 peerd Agent：

設定一個 URL 清單（例如：三個新聞站 + 一個技術站）。
Agent 依序打開每個網站，抓取首頁標題（或特定區塊）。
把所有標題與小段落交給 LLM，產出：
一份今日重點摘要
分類（國際 / 本地 / 技術 / 商業）
把結果顯示在 peerd 面板，或存成一段 Markdown，傳回你的筆記系統。

適合：

喜歡自己控制流程、但不想寫一堆後端程式的人
不想讓瀏覽紀錄、研究內容經過第三方服務的人

2. 產品 / 網頁 QA 腳本、互動 Demo

peerd 可以把「瀏覽器自動操作 + LLM」組成 QA 工作流：

範例：

定義一組 QA 腳本：
打開測試環境網址
自動登入測試帳號
點幾個主要流程（新增、編輯、刪除），截取畫面文字
Agent 檢查：
是否有錯誤訊息
版面文字是否符合規格（例如：翻譯是否正確）
把結果整理成一份 QA 報告，直接在瀏覽器下載或複製。

適合：

前端工程師、PM、設計師，想要簡單重複測試
需要做互動 Demo，讓 Agent 自動「操作產品給觀眾看」

3. 不想碰 DevOps 的 side project / workflow 原型

如果你平常：

有很多「想做個小工具」的點子
但一想到要架 server、部署，就懶了

peerd 提供一種做法：全部寫成瀏覽器 Agent 腳本：

把流程寫在 JS 裡（在 peerd 提供的 sandbox 中）
需要呼叫 LLM，就用自己的 Key
存資料可以暫時放在 LocalStorage、下載檔案、或手動貼回 Notion / Obsidian

適合：

想先驗證「這個工作流值不值得做成正式產品」的人
想建立個人專用工作流，但不想管理伺服器的人

怎麼開始：從「自動抓新聞標題摘要」實作一路到客製 Agent

以下是一條最快速的上手路徑，你可以照做一次，確認 peerd 的使用感覺。

步驟 1：安裝 peerd 擴充 & 準備 API Key

打開 https://peerd.ai，找到瀏覽器擴充安裝連結（多為 Chrome Web Store 或手動載入）。
安裝完成後，點右上角擴充圖示 → 找到 peerd → 打開控制面板。
準備至少一個 LLM 服務：
OpenAI（或相容 API）
Anthropic
Gemini
在 peerd 設定頁，填入你的 API Key，並測試一個簡單 prompt（例如：「請用 50 字說明你是誰」）。

💡 關鍵： 先用簡單 prompt 驗證 API Key 設定無誤，可以避免後續腳本除錯時間。

步驟 2：建立一個「新聞摘要 Agent」

目標：自動打開幾個新聞站，抓首頁標題，總結成一段簡報。

可以照以下邏輯：

在 peerd 新建一個 Agent，命名為 NewsSummarizer。
設定任務腳本（概念上類似 pseudo-code）：

“`js
const sites = [
‘https://news.ycombinator.com’,
‘https://www.bbc.com/news’,
‘https://www.ft.com’
];

async function run() {
const allHeadlines = [];

 for (const url of sites) {
   const page = await openTab(url); // peerd 提供的抽象 API（實際名稱依文件）
   const titles = await page.eval(() => {
     return Array.from(document.querySelectorAll('h1, h2'))
       .map(el => el.innerText)
       .filter(Boolean);
   });
   allHeadlines.push({ url, titles });
 }

 const prompt = `請根據以下新聞標題，用繁體中文整理出今日重點摘要，分段列出：\n\n${
   JSON.stringify(allHeadlines, null, 2)
 }`;

 const summary = await callLLM(prompt); // 依照你選的 provider
 output(summary);

}

run();
“`

儲存腳本後，按「執行」：
peerd 會依序開啟那些網站
抓取標題
呼叫 LLM 總結
在側邊面板或 console 顯示結果

你可以依照自己的需求修改：

換成台灣 / 香港 / 日本新聞網站
加上「只保留包含特定關鍵字的標題」
把 summary 轉成 Markdown，方便貼到筆記

步驟 3：客製自己的 Agent 腳本

當你跑過一次「新聞摘要 Agent」後，可以開始做這幾件事：

抽出共用邏輯：例如「開頁＋抓標題」寫成一個可重用的 function，日後換站台不用重寫。
加入排程或手動檔案輸出：
每次執行後自動下載一個 .md 或 .txt
或直接在 peerd 面板顯示，手動複製
改成其他任務：
產品價格比價（抓不同電商同一商品）
技術文章整理（從多個 blog 抓標題＋摘要）

步驟 4：注意權限與安全設定

雖然 peerd 是純前端、API Key 在你機器上，但仍有幾個安全重點：

網站權限：
當瀏覽器問「是否允許此擴充存取某些網站」時，只開啟你真的需要的網域。
API Key 保護：
不要在共享電腦上使用 peerd，或至少不要留下儲存的 Key
若用公用電腦，建議使用臨時 Key，使用完立刻 revoke
腳本來源：
只執行你自己寫的，或來自可信來源的腳本
不要隨便貼「網友分享的完整腳本」就直接跑，避免讀寫你不想暴露的資料

peerd 在 AI Agent 工具裡的位置

目前市面上有不少「Agent 平台」或「AI 瀏覽器」，peerd 的定位比較特別：

名稱	核心功能	免費方案	適合誰
peerd	瀏覽器內純前端多 Agent、自動化操作	開源專案，可自架	不想碰後端，只想用瀏覽器的人
AutoGen	多 Agent `Python` 框架	開源	已有後端環境的開發者
AgentHub 類	雲端 Agent 編排平台	多提供免費額度	喜歡 `GUI`、無法自管 API Key 的人

如果你的重點是：「所有東西都在我瀏覽器裡跑，不想任何 A2A（Agent-to-Agent）中介干預」，那 peerd 很值得試一次。

結論：

想要一個「不碰後端、不開伺服器」的 AI Agent 沙盒，peerd 是目前少見的純瀏覽器方案。
它最適合拿來做：個人資訊整理、簡易 QA 腳本、side project 原型。
你可以從一個「新聞標題摘要 Agent」開始，熟悉後再把自己的工作流程慢慢搬進瀏覽器裡。

🚀 你現在可以做的事

到 peerd 官網安裝擴充，填入自己的 OpenAI / Anthropic / Gemini API Key 並跑一次測試 prompt

依照文中的範例，建立一個 NewsSummarizer Agent，實作「自動抓新聞標題＋摘要」工作流

把現有的一項重複性瀏覽器流程（例如 QA 點測、價格比價），改寫成 peerd Agent 腳本並在本機瀏覽器中試跑

標籤: 瀏覽器 AI Agent

用瀏覽器跑自己的 AI Agent：peerd 實戰