標籤: 多代理工作流

  • OmniRoute:一個 Endpoint 玩遍 200+ 模型

    OmniRoute:一個 Endpoint 玩遍 200+ 模型

    📌 本文重點

    • OmniRoute 用一個 Endpoint 串接 200+ 模型供應商
    • 內建 RTK + Caveman 壓縮,可節省 15–95% token 成本
    • 支援 MCP / A2A、多代理、多模態 Workflow
    • 適合多模型整合與成本優化的開發者

    用一句話先說清楚:OmniRoute 是一個多雲、多模型的一站式 AI 總機,讓你用同一個 API Endpoint,同時接上 Claude、GPT、Cursor、Copilot 等 200+ 家模型供應商,還順手幫你壓縮 token、自動跳備援模型。

    官方開源庫:https://github.com/diegosouzapw/OmniRoute


    核心功能 1:一個 Endpoint 管理多供應商+自動備援

    傳統做法是:每接一個模型,就要再接一個 SDK / API Key / Base URL。結果是:

    • 前端要切換模型,就得改環境變數
    • 後端要做 fallback,要自己寫 retry + 陣痛的錯誤處理

    OmniRoute 的做法是:所有模型統一走一個 OmniRoute Endpoint,後面怎麼分流、切換供應商、失敗改用誰,全都在 OmniRoute 的設定檔完成。

    💡 關鍵: 把所有模型統一進一個 Endpoint,可以一次解決多家供應商整合與備援問題,前後端只維護單一接點。

    你可以怎麼用

    以「同一個 Code Agent,要能在 Claude / GPT / 本地模型之間切換」為例:

    1. 在 OmniRoute 設定三個 provider:
    2. anthropic/claude-3.5(主力)
    3. openai/gpt-4.1(備援)
    4. local/deepseek(成本最低版)
    5. 設定路由策略:
    6. 主 Endpoint:先走 Claude
    7. 當 Claude timeout 或額度用完,自動 fallback 到 GPT
    8. 夜間批量任務改走本地模型
    9. 在你的程式碼中,只保留一個 OMNIROUTE_API_URL

    ts
    const response = await fetch(process.env.OMNIROUTE_API_URL, {
    method: "POST",
    headers: {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${process.env.OMNIROUTE_API_KEY}`,
    },
    body: JSON.stringify({
    model: "code-agent", // 這是 OmniRoute 裡定義的邏輯模型名
    messages,
    }),
    });

    可行動建議

    • 手上的專案如果同時接了 Anthropic + OpenAI + 本地模型,可以先挑一個 API Call 練手,把三個 Base URL 改成一個 OmniRoute URL,測試 auto-fallback 是否生效。

    核心功能 2:RTK + Caveman 壓縮,節省 15–95% token 成本

    OmniRoute 內建兩種壓縮:

    • RTK(Reversible Tokenization Kernel):對常見 prompt 做結構化壓縮,適合長系統提示、多輪聊天歷史
    • Caveman 壓縮:偏「野蠻」但更激進,會重寫聊天記錄,把冗長表述變成精簡語句

    效果:

    • 系統長 prompt:省 15–40% token
    • 帶大量上下文(如文檔 QA):最高可到 95% token 減少

    💡 關鍵: 啟用 RTK 與 Caveman 壓縮後,長上下文任務可大幅降低 15–95% token 成本,直接反映在帳單與模型限額上。

    你可以怎麼用

    以「把整份 API 文檔塞給模型當『長期記憶』」為例:

    1. 在 OmniRoute 後台或設定檔,為 doc-assistant 這條路由開啟壓縮:

    yaml
    routes:
    - id: doc-assistant
    model: anthropic/claude-3.5
    compression:
    rtk: true
    caveman: true

    1. 程式端依然用原本的 messages 結構呼叫,不用自己壓縮:

    jsonc
    {
    "model": "doc-assistant",
    "messages": [
    {"role": "system", "content": "你是某某專案的文檔助手..."},
    {"role": "user", "content": "請根據附件 API 文檔..."}
    ]
    }

    1. OmniRoute 會在轉給底層模型前自動壓縮,再在輸出時解壓(對你來說是透明的)。

    可行動建議

    • 先挑「最長」的那支 API(例如:聊天歷史超長、帶多篇 PDF 的 QA),在 OmniRoute 上開 RTK+獵人模式(Caveman),觀察一次請求的 token 使用量與帳單變化。

    核心功能 3:MCP / A2A、多代理、多模態 Workflow

    OmniRoute 支援:

    • MCP(Model Context Protocol):讓不同工具 / 代理共享同一套上下文與工具列表
    • A2A(Agent-to-Agent):代理之間可互相呼叫,形成多步驟協作
    • 多模態 API:文字 + 圖片(甚至影音)混合輸入

    這讓你可以把原本散落在不同工具的能力,集中到一條 Workflow 裡。例如:

    • Code Agent 負責寫程式
    • Doc Agent 負責查文件、對比版本
    • Vision Agent 負責讀錯誤截圖

    💡 關鍵: 利用 MCP 與 A2A,可以把多個專職 Agent 串成一條 Workflow,讓 Code、Doc、Vision 等能力在同一上下文中協作。

    你可以怎麼用

    以「Side Project 的 Code Agent + 文檔助手」為例:

    • Code Agent:
    • 模型:Claude 3.5 Sonnet
    • 任務:生成程式碼、重構
    • 文檔助手:
    • 模型:GPT-4.1 / Gemini
    • 任務:閱讀 API 文檔、產生說明
    • 多模態:
    • 模型:如 Gemini / GPT-4o
    • 任務:讀錯誤截圖

    在 OmniRoute 裡定義三條路由,讓 Code Agent 能直接「轉接」給 Doc Agent:

    routes:
      - id: code-agent
        model: anthropic/claude-3.5
        a2a:
          doc-agent: true
          vision-agent: true
      - id: doc-agent
        model: openai/gpt-4.1
      - id: vision-agent
        model: google/gemini-1.5
    

    可行動建議

    • 先只做兩個代理(Code + Doc),在 OmniRoute 設定 A2A,讓 Code Agent 遇到「不知道 API 用法」時,把問題轉給 Doc Agent,再把結果回傳給使用者。

    實作示範:Side Project 串三家模型的 Code Agent + 文檔助手

    來做一個具體場景:

    需求:在同一個 Side Project 裡,整合三家模型,做一個簡單的「程式碼助理 + 文檔助手」,前端只有一個 Chat UI,後端只有一個 OmniRoute Endpoint。

    架構示意

    • 前端(Next.js / React):
    • 單一聊天框
    • 輸入模式按鈕:寫程式 / 問文檔
    • 後端:
    • 全部請求送到 OMNIROUTE_URL
    • model 欄位用來指定走哪個 logical route(code-agent or doc-assistant
    • OmniRoute:
    • code-agent → Claude(主)+ GPT(備)
    • doc-assistant → GPT + Caveman 壓縮
    • vision-agentGemini,多模態

    前端呼叫範例(TypeScript):

    async function callAgent(mode: "code" | "doc", messages) {
      const model = mode === "code" ? "code-agent" : "doc-assistant";
    
      const resp = await fetch(process.env.NEXT_PUBLIC_OMNIROUTE_URL!, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_OMNIROUTE_KEY}`,
        },
        body: JSON.stringify({ model, messages }),
      });
    
      return resp.json();
    }
    

    後端與前端都不用知道「底下到底是 Claude 還是 GPT」,只認 model: "code-agent"model: "doc-assistant" 兩種邏輯角色即可。


    10 分鐘開箱:從零到第一條 OmniRoute

    以下是一條「最短路徑」,讓你在 10 分鐘內把現有專案換成 OmniRoute。

    1. 註冊與安裝(3 分鐘)

    1. 打開 GitHub 專案:https://github.com/diegosouzapw/OmniRoute
    2. repo 拉下來:

    bash
    git clone https://github.com/diegosouzapw/OmniRoute
    cd OmniRoute
    pnpm install # 或 yarn / npm

    1. README 建一個 .env,填入你現有的 OpenAI / AnthropicAPI Key

    2. 啟動 OmniRoute Server(2 分鐘)

    pnpm dev # 或對應的 start 指令
    

    啟動後會有一個本地 URL,例如:http://localhost:8787/v1/chat/completions,這就是你的「總機 Endpoint」。

    3. 設定第一個路由 + 壓縮策略(3 分鐘)

    config/routes.yaml(實際以專案為準)中:

    routes:
      - id: code-agent
        model: anthropic/claude-3.5
        fallback:
          - openai/gpt-4.1
        compression:
          rtk: true
          caveman: false
    
      - id: doc-assistant
        model: openai/gpt-4.1
        compression:
          rtk: true
          caveman: true
    

    完成後重新啟動 OmniRoute(若需要)。

    4. 把前端 / 後端改成單一 OmniRoute URL(2 分鐘)

    無論你原本用什麼 SDKOpenAI, Anthropic, Cursor plugin):

    • baseURL 改成你的 OMNIROUTE_URL
    • model 改成 OmniRoute 裡定義的 id(例如 code-agent

    以 OpenAI SDK 為例:

    import OpenAI from "openai";
    
    const client = new OpenAI({
      baseURL: process.env.OMNIROUTE_URL,
      apiKey: process.env.OMNIROUTE_KEY,
    });
    
    await client.chat.completions.create({
      model: "code-agent",
      messages,
    });
    

    到這一步,你已經:

    • 用一個 Endpoint 串起至少兩家模型
    • 開啟 basic 的 token 壓縮
    • 為之後加上更多 provider / 代理 / 模態預留位置

    適合誰用?

    使用者類型 具體場景
    獨立開發者 Side Project 同時想用 Claude + GPT + 免費模型,又懶得寫一堆整合
    小團隊 / Startups 想 A/B 測試不同供應商,控制成本,還要有 auto-fallback 防止掛點
    AI Agent Builder 需要多代理協作(Code + Doc + Vision),又希望前端只接一個 Endpoint
    教學 / 實驗環境 需要一鍵切換教學用模型、控制學生 token 使用量

    如果你符合其中一項,可以先把 OmniRoute 當成:

    「把所有 AI 模型集中管理的一支 API Gateway」,再視需要逐步開啟壓縮、A2A、多模態。


    OmniRoute 與其他多模型工具比較

    名稱 核心功能 免費方案 適合誰
    OmniRoute 多供應商整合、auto-fallback、RTK/Caveman 壓縮、MCP/A2A、多模態 開源,支援 50+ 免費供應商 想統一管理多家模型、做複雜 Workflow 的開發者
    直接用 OpenAI 單供應商模型 API 有免費試用額度 只用 GPT 系列、需求簡單的專案
    直接用 Anthropic 單供應商 Claude 模型 有免費試用額度 只想專注 Claude Code / Sonnet

    如果你只接一個模型供應商,OmniRoute 可以先當「統一壓縮 + 路由層」;當你的模型越來越多,它就自然變成你的多雲總機。


    🚀 你現在可以做的事

    • 打開 OmniRoute GitHub 專案,依照 README 在本地啟動一個測試伺服器
    • 挑一支現有的 API 呼叫,將 baseURL 改成 OMNIROUTE_URL,並在 routes.yaml 設好對應的 model id
    • 在同一條路由上開啟 RTKCaveman 壓縮,對比啟用前後的 token 使用量與費用差異
  • 用瀏覽器跑自己的 AI Agent:peerd 實戰

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

    📌 本文重點

    • 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 寫成,執行邏輯都在前端:

    • 你自己輸入 OpenAIAnthropicGemini 等 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 腳本引擎」
    • 啟動 WebAssemblyWASM)虛擬機:甚至可在瀏覽器裡跑一個簡化版的 Linux VM + 網路堆疊

    這代表:

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

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


    適合誰用:三種具體場景

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

    使用情境:

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

    可以這樣設計一個 peerd Agent:

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

    適合:

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

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

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

    範例:

    1. 定義一組 QA 腳本:
    2. 打開測試環境網址
    3. 自動登入測試帳號
    4. 點幾個主要流程(新增、編輯、刪除),截取畫面文字
    5. Agent 檢查:
    6. 是否有錯誤訊息
    7. 版面文字是否符合規格(例如:翻譯是否正確)
    8. 把結果整理成一份 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

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

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

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

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

    可以照以下邏輯:

    1. 在 peerd 新建一個 Agent,命名為 NewsSummarizer
    2. 設定任務腳本(概念上類似 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();
    “`

    1. 儲存腳本後,按「執行」:
    2. peerd 會依序開啟那些網站
    3. 抓取標題
    4. 呼叫 LLM 總結
    5. 在側邊面板或 console 顯示結果

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

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

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

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

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

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

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

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

    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 腳本並在本機瀏覽器中試跑