📌 本文重點
- 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 / 內部服務
你只要：
- 在
.env放入 API Key（例如OPENAI_API_KEY） - 在程式裡註冊工具，例如一個查訂單狀態的 REST API
- 把工具掛在 Agent 上，Agent 自己會決定何時呼叫
你可以做的行動（兩個實用 workflow 範例）：
- 客服 FAQ + 後端 API 查詢自動回覆 Bot
- FAQ：丟成向量資料或直接塞 prompt
- 工具：
GET /orders/:id查訂單，GET /user/:id查會員 -
Agent 邏輯：先看能不能從 FAQ 回答，不行再調 API，最後回傳整理好的訊息。
-
團隊內部文件檢索 + 任務整理助理
Memory：保留本週的對話與任務- 工具：一支「搜尋 Notion / Google Drive / 自家知識庫」的 API
- 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 模板拉起專案
- 打開專案：https://github.com/vercel-labs/open-agents
- 點右上角 Use this template → Create a new repository
- 在自己的 GitHub 底下建立 repo
- 本機 clone：
bash
git clone https://github.com/<你的帳號>/<你的-repo>
cd <你的-repo>
pnpm install # 或 npm install / yarn
- 新增
.env.local，放入：
bash
OPENAI_API_KEY=sk-...
此時行動：pnpm dev 跑起來，確認預設的 Agent Demo 正常回覆。
步驟 2：配置一個模型 + 建立簡單 REST Tool
假設你要讓 Agent 查詢 GET https://api.example.com/orders/:id：
- 在
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,
};
},
};
“`
- 在 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],
});
“`
- 模型設定通常在
baseAgent或 config 檔裡（視專案結構），選一個便宜模型，例如：
ts
model: "gpt-4.1-mini" // 範例，視官方文件更新調整
此時行動：在本機跑 server，從 Agent API 打一個 request，例如：
「我有一筆訂單 #12345 ，請幫我看目前出貨狀態」
觀察 log，確認 Agent 會：
- 自動偵測訂單編號
- 呼叫
get_order_status工具 - 整理成可讀中文回答
步驟 3：接一個簡單前端（Next.js / React）
如果你用 Next.js：
- 在
/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 });
}
“`
- 在前端頁面建一個最簡聊天 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
- 把程式 push 到 GitHub
- 到 Vercel 登入 → New Project → 選你的 repo
- 在 Vercel Project 的 Environment Variables 中填入：
OPENAI_API_KEY- 其他內部 API 的 token（若有）
- 部署完成後，拿到一個網址，例如
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，丟給團隊實際試用並收集回饋
發佈留言