標籤: 開源框架

📌 本文重點

• open-agents 是給前端工程師用的雲端 AI Agent 腳手架
• 幫你處理好 Agent 架構、工具整合與雲端部署樣板
• 3 小時內就能做出可上線、會調 API 的 AI 小幫手

用一句話說清楚：Vercel 的開源專案 open-agents 是一套「前端工程師也能駕馭的雲端 AI Agent 腳手架」，幫你處理好架構、模型與工具整合，以及雲端部署樣板，3 小時內就能把一個可上線的 AI 小幫手跑起來。

💡 關鍵： open-agents 把「3 小時內做出可上線 Agent」變成合理門檻，適合用來做快速 MVP 驗證。

核心功能：open-agents 幫你省掉哪些麻煩？

1. 標準化的 Agent 架構：不用自己設計「大腦」骨架

在 open-agents 裡，你會碰到三個核心概念：

• Agent：像「大腦」，負責看使用者輸入、決定要不要用工具、整理最後回答。
• Tool：可以是 REST API、資料庫查詢、檔案讀寫等，Agent 可以選擇呼叫它們。
• Memory：用來記住上下文或歷史對話，讓 Agent 回答更連貫。

open-agents 做好的事：

• 幫你定義好 Agent 的 TypeScript 介面與執行流程
• 提供現成的 tool 呼叫機制（類似 OpenAI Agents SDK 的工具系統）
• Memory 設計已經整合到框架中，不用自己處理 token 管理

你可以做的行動：

• 把原本散落在專案裡的「AI 回答」「API 呼叫」邏輯收斂成一支 Agent
• 把「查 FAQ」「查內部 API」「整理結果」交給同一個 Agent 流程，而不是寫一堆 if-else

2. 工具 / 模型整合：一支 Agent 同時用多個 API

open-agents 預設支援多家模型服務（含 OpenAI，對應最新的 Agents SDK 概念），也很容易接：

• 便宜模型（例如 OpenAI 最新較低價型號）
• 你現有的 REST API / GraphQL / 內部服務

你只要：

1. 在 .env 放入 API Key（例如 OPENAI_API_KEY）
2. 在程式裡註冊工具，例如一個查訂單狀態的 REST API
3. 把工具掛在 Agent 上，Agent 自己會決定何時呼叫

你可以做的行動（兩個實用 workflow 範例）：

1. 客服 FAQ + 後端 API 查詢自動回覆 Bot
2. FAQ：丟成向量資料或直接塞 prompt
3. 工具：GET /orders/:id 查訂單，GET /user/:id 查會員

4. Agent 邏輯：先看能不能從 FAQ 回答，不行再調 API，最後回傳整理好的訊息。

5. 團隊內部文件檢索 + 任務整理助理

6. Memory：保留本週的對話與任務
7. 工具：一支「搜尋 Notion / Google Drive / 自家知識庫」的 API
8. Agent：自動整理「這週待辦」「文件連結」，丟回 Slack/前端介面

💡 關鍵： 一支 Agent 就能同時整合多個 API 和便宜模型，讓你用低成本做出實用的自動化工作流程。

3. 雲端部署樣板：Next.js + Vercel 直接起飛

open-agents 專案 本身就是一個可以部署到 Vercel 的樣板：

• 內建 API routes，可以當成你的 Agent 後端
• 前端可以用 Next.js / React 串同一支 Agent API
• 與 Vercel 部署流程打通：GitHub 綁定 → 自動 CI/CD

你可以做的行動：

• 先只改後端的 Agent + tool，保持前端 UI 簡單
• 驗證 Agent 工作流程沒問題後，再慢慢優化 UI/權限

適合誰用？幾個具體場景

1. 前端工程師：想要一個「會用 API 的聊天小幫手」

你手上可能已經有：

• 一些 REST API（訂單、會員、專案、ticket…）
• 一個 React/Next.js 專案

只要把 open-agents 當成「AI 後端模板」，你就能做出：

• 客服頁面裡的 FAQ + 訂單查詢 bot
• 專案管理頁面的「自然語言查詢資料」側邊欄

2. 團隊技術 owner：要做 MVP 的 AI 助理，但不想先上 MCP 這種大型架構

根據「MCP for Backend Engineers」那篇文章的建議：

1 app · 1 team · 1 toolset → 用簡單的 tool calling 就好，MCP 是 scaling 決策，不是起步點。

如果你目前只有：

• 一個 Web App
• 一兩個後端服務

那 open-agents 就剛好：

• 架構不重，適合 MVP
• 想擴展到多工具、多系統再慢慢抽象

3. 產品/營運團隊身邊的「懂一點前端」的人

只要會基本 TypeScript/React，照樣可以：

• 改現有範例成「文件搜尋 + 任務整理」內部助手
• 讓團隊先用起來，再決定要不要投入更多資源

怎麼開始：3 小時完成「會調 API 的 AI 小助手」

下面以「客服 FAQ + 訂單查詢 Bot」為例，走一次從 0 到可部署的流程。

前提：你會基本 Git、Node.js、TypeScript，並有一個 GitHub 帳號。

步驟 0：成本 & 免費方案心裡有底

• open-agents 本身是免費開源
• 模型費用：可使用 OpenAI 較低價模型，成本通常是每月幾美元起（視流量）
• 部署：Vercel 有免費方案，適合開發 / 小流量 MVP

💡 關鍵： 開源 + 便宜模型 + 免費部署方案，讓你可以「先上線再優化」，不必一開始就投入大量預算。

步驟 1：從 GitHub 模板拉起專案

1. 打開專案：https://github.com/vercel-labs/open-agents
2. 點右上角 Use this template → Create a new repository
3. 在自己的 GitHub 底下建立 repo
4. 本機 clone：

bash
git clone https://github.com/<你的帳號>/<你的-repo>
cd <你的-repo>
pnpm install # 或 npm install / yarn

1. 新增 .env.local，放入：

bash
OPENAI_API_KEY=sk-...

此時行動：pnpm dev 跑起來，確認預設的 Agent Demo 正常回覆。

步驟 2：配置一個模型 + 建立簡單 REST Tool

假設你要讓 Agent 查詢 GET https://api.example.com/orders/:id：

1. 在 src/tools/orderTool.ts 新增：

“`ts
import { z } from “zod”;

export const orderTool = {
name: “get_order_status”,
description: “根據訂單編號查詢訂單狀態”,
parameters: z.object({
orderId: z.string().describe(“訂單編號”)
}),
execute: async ({ orderId }: { orderId: string }) => {
const res = await fetch(https://api.example.com/orders/${orderId});
if (!res.ok) throw new Error(“查詢失敗”);
const data = await res.json();
return {
status: data.status,
items: data.items,
total: data.total,
};
},
};
“`

1. 在 Agent 定義中（例如 src/agents/supportAgent.ts），把這個 tool 加進去：

“`ts
import { createAgent } from “./baseAgent”;
import { orderTool } from “../tools/orderTool”;

export const supportAgent = createAgent({
name: “support”,
systemPrompt:
“你是客服小幫手，先用 FAQ 回答，如果使用者提到訂單編號（像是 #12345），再用工具查詢訂單狀態，最後用中文整理回答。”,
tools: [orderTool],
});
“`

1. 模型設定通常在 baseAgent 或 config 檔裡（視專案結構），選一個便宜模型，例如：

ts
model: "gpt-4.1-mini" // 範例，視官方文件更新調整

此時行動：在本機跑 server，從 Agent API 打一個 request，例如：

「我有一筆訂單 #12345 ，請幫我看目前出貨狀態」

觀察 log，確認 Agent 會：

• 自動偵測訂單編號
• 呼叫 get_order_status 工具
• 整理成可讀中文回答

步驟 3：接一個簡單前端（Next.js / React）

如果你用 Next.js：

1. 在 /app/api/chat/route.ts 建一個 API route，轉發到 supportAgent：

“`ts
import { NextResponse } from “next/server”;
import { supportAgent } from “@/agents/supportAgent”;

export async function POST(req: Request) {
const { message } = await req.json();
const reply = await supportAgent.run({ input: message });
return NextResponse.json({ reply });
}
“`

1. 在前端頁面建一個最簡聊天 UI：

“`tsx
“use client”;
import { useState } from “react”;

export default function ChatPage() {
const [input, setInput] = useState(“”);
const [messages, setMessages] = useState([]);

 const send = async () => {
   const res = await fetch("/api/chat", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ message: input }),
   });
   const data = await res.json();
   setMessages((m) => [...m, `你：${input}`, `Bot：${data.reply}`]);
   setInput("");
 };

 return (
   <div>
     <div>{messages.map((m, i) => (
       <div key={i}>{m}</div>
     ))}</div>
     <input value={input} onChange={(e) => setInput(e.target.value)} />
     <button onClick={send}>送出</button>
   </div>
 );

}
“`

此時行動：在本機 UI 輸入訂單問題，看是否能走完整流程「輸入問題 → Agent 決定要不要調 API → 回傳整理後答案」。

步驟 4：一鍵部署到 Vercel

1. 把程式 push 到 GitHub
2. 到 Vercel 登入 → New Project → 選你的 repo
3. 在 Vercel Project 的 Environment Variables 中填入：
4. OPENAI_API_KEY
5. 其他內部 API 的 token（若有）
6. 部署完成後，拿到一個網址，例如 https://your-agent.vercel.app

成本提示：

• 小流量下 Vercel 免費方案通常足夠
• 模型費主要取決於：使用人數 × 對話長度 × 模型單價
• 有預算疑慮時，可以先用小模型做 MVP，流量上來再調整

延伸玩法 & 心智模型

• 想接更多內部系統？就把每個系統包成一個 tool，掛在同一個 Agent 或拆成多個 Agent。
• 想做內部文件助理？多加一個「文件搜尋 API」，Agent 再負責整理成待辦或重點摘要。
• 覺得專案變大、團隊變多？再考慮引入 MCP / API Gateway，把目前的 tools 重構即可。

如果你今天只想要「一個會用你的 API 的雲端 AI 小幫手」，照著上面四個步驟做完，你就已經比大多數還停在概念階段的人，多了一個真正跑在雲端的 Agent。動手開一個 open-agents 專案，從一個最簡單的 tool 開始，就行了。

🚀 你現在可以做的事

• 開啟 open-agents GitHub 專案，用 Use this template 建一個自己的 repo
• 在專案裡實作一個最簡單的 REST tool（例如查訂單或查專案狀態），掛到一支自訂 Agent 上
• 用 Vercel 免費方案部署這個 Agent，丟給團隊實際試用並收集回饋