Browser-Native · Agentic AI

AgentGoRound

純瀏覽器環境的 Agentic AI 平台

在前端賦予任意 LLM 完整的 Agent 能力
Doc · MCP · Built-in Tools · Skill · Test Cases — 零後端、一鍵部署

Browser-First

Prompt-Based Tool Use

Any LLM

導覽地圖

點擊節點跳轉至對應章節

核心理念

純前端的 Agentic 平台

AgentGoRound 在瀏覽器中直接與 LLM API 溝通，零後端依賴。所有狀態存於 localStorage / IndexedDB，可部署至 GitHub Pages。

👤

使用者

→

🌐

Browser Runtime

React + Vite + TS

→

🤖

LLM API (CORS)

OpenAI / Groq / ...

📄

Doc

上下文注入

🔌

MCP Tools

外部工具整合

⚡

Built-in Tools

JS 執行 + 渲染

🧩

Skills

自動化工作流

🧪

Test Cases

可靠性驗證

所有 agentic 能力都透過 Prompt 設計實現 — 不依賴 LLM 原生的 function calling，任何能回傳 JSON 的模型都能使用。

功能一

Doc — 知識注入

類似 AGENTS.md 的概念 — 為 Agent 注入專業知識、角色設定、團隊慣例。

🔄 運作機制

1

創建 Doc

在 DocsPanel 中撰寫 Markdown 文件
存於 IndexedDB（agr_docs_db）

2

綁定 Agent

Agent 啟用 enableDocs + 指定 allowedDocIds

3

System Prompt 注入

每次對話時直接將 Doc 內容注入到 system prompt 中
直接注入 MVP，非 RAG 方案

💡 類比與用途

📋

AGENTS.md 的瀏覽器版本

把 Coding Agent 用的 AGENTS.md 概念搬到瀏覽器裡 — 用自然語言為 AI 定義行為模式。

• 角色設定：「你是個說話結尾都會喵喵叫的助手」

• 團隊規範：程式碼風格、PR 審查清單

• 專業知識：產品文檔、API 規格

• 工作流程：部署 SOP、故障排除指南

儲存：每份 Doc 有 id、title、content、updatedAt。
支援 listDocs()、upsertDoc()、deleteDoc() 完整 CRUD。

功能二

MCP & Built-in Tools — Prompt 驅動的 Tool Use

🧠 Prompt-Based Tool Decision

不依賴 LLM 原生 function calling — 任何能回傳 JSON 的模型都能使用工具。

Step 1：構建 Tool Decision Prompt

系統將所有可用工具打包成 JSON 描述，附帶中英雙語模板

Step 2：LLM 回傳判斷

                  {"type":"no_tool"}

                  {"type":"mcp_call","serverId":"...","tool":"...","input":{...}}

                  {"type":"builtin_tool_call","tool":"tool_name","input":{...}}

Step 3：執行並注入結果

工具結果經過摘要處理後注入下一輪 prompt

💡 這是核心創新：無需 native function-calling 支援，只要模型能輸出 JSON 即可使用工具。

🔌 MCP (Model Context Protocol)

SSE Client

EventSource 連接 MCP Server
POST RPC 呼叫工具

Tool Registry

tools/list 取得工具列表
tools/call 執行工具

支援 timeout 設定 · 心跳探測 · 健康檢查

⚡ Built-in Tools

🛠️

自訂 JS 工具

new Function() 執行 — 完整存取 window / document / DOM

🔧

系統內建工具

get_user_profile · pick_best_agent · request_user_confirmation

功能三

Built-in Tools — 即時前端渲染

跳脫沙箱限制，用 new Function() 在瀏覽器中直接操作 DOM — LLM 可以即時渲染 UI。

⚙️ 執行模型

// runBuiltInScriptTool.ts

const fn = new Function(

  'helpers', 'input',

  tool.code // 使用者自訂的 JS 代碼

);

const result = await fn(helpers, parsedInput);

// helpers 物件提供：

helpers.system → userProfile, agentDir, confirm

helpers.ui → dashboard (浮動面板系統)

✓ 完整存取 window / document

✓ 可操作 DOM、觸發 alert()

✓ 非沙箱 — 與主頁面同執行環境

🖥️ Tool Dashboard 即時渲染

🎨

createToolDashboardHelpers()

建立浮動 DOM 面板系統，工具可以即時渲染 UI 到畫面上

// 工具代碼範例（動態時鐘）

const { container } = helpers.ui.dashboard

  .show({ key: 'clock', title: '時鐘' });

// 直接操作 DOM 渲染 SVG 時鐘

container.innerHTML = `<svg>...</svg>`;

setInterval(() => updateClock(), 1000);

關鍵繞過 React 虛擬 DOM — 工具直接操作真實 DOM

單例 window.__agrToolDashboardRegistry 管理面板生命週期

功能四 · 單輪

Skill — 單輪模式（Single-Turn）

輕量級技能執行：載入 Skill → 注入 system prompt → 取得答案 → 可選驗證/修正。

📦 Skill 套件格式

my-skill/

├── SKILL.md (必需)

│   ├── YAML 前置元數據

│   │   ├── name, description (觸發匹配)

│   │   └── skill-config JSON (workflow, input)

│   └── Markdown 指令

├── references/ 按需載入的參考文檔

├── scripts/ （v1 僅儲存）

└── assets/ 文字模板，按需載入

🔍 Skill 自動觸發

1

buildSkillSessionSnapshot() — 從 agent 設定取得可用 Skill 列表

2

buildSkillDecisionPrompt() — 詢問 LLM：該載入哪個 Skill？

3

loadSkillRuntime() — 解析 refs/assets → 構建 system prompt

🔄 單輪執行流程

📥

載入 Skill

SKILL.md + references + assets → system prompt

🛠️

Tool Decision（可選）

在 Skill 範圍內檢查是否需要工具

💬

LLM 回答

使用 Skill 上下文生成回答

✅

Verify & Refine（可選）

buildSkillVerifyPrompt() → 驗證器 → 若需修正 → 重寫

SkillWorkflowPolicy 控制

useSkillDocs · useAgentDocs · allowMcp · allowBuiltInTools · bootstrapAction

功能四 · 多輪

Skill — 多輪模式（Multi-Turn）

核心創新 — 基於狀態機的自主 Agent 執行迴圈，具備計畫、觀察、行動、完成閘門。

🔄 Phase State Machine

skill_load

bootstrap_plan

observe

plan_next_step

act

↓ 循環 (toolLoopMax) ↓

sync_state

completion_gate

manual_gate

final_answer

🧠 Planner 判斷

👁️

observe

觀察環境
（瀏覽器快照）

⚡

act

執行工具
（MCP / Built-in）

❓

ask_user

暫停並
請求用戶輸入

🏁

finish

進入
完成閘門

🛡️ 約束系統

▸ act → 必須 observe
行動後強制觀察結果

▸ 重複觀察 → 必須 act
連續相同觀察強制行動

▸ 迴圈偵測
追蹤 observation + action signature

▸ 阻擋偵測
CAPTCHA / 登入 / 不可用

📊 SkillRunState

phase, stepIndex

goal, todo[]

manualGate

completionStatus

recentObservationSigs[]

recentActionSigs[]

lastBrowserObservation

preferredMcpServerId

純函式管理狀態 — 不可變轉換

功能五

Tutorial / Test Cases — 雙重用途

同一份 YAML 定義同時服務 人類引導教學 與 自動化測試 — 教學即測試，測試即案例。

📚 6 個教學 / 測試案例

1

First Agent Chat

建立 Agent、Load Balancer、第一次對話

2

Docs Persona Chat

Doc 注入 → 角色行為驗證

3

Built-in Tools Chat

JS 工具建立、執行測試、Dashboard 渲染

4

Sequential Skill Chat

單輪 Skill（含 references & assets）

5

Agent Browser MCP

MCP 瀏覽器 Agent 讀取 GitHub Trending

6

ChatGPT Browser Skill

多輪 Skill + 瀏覽器自動化

🧪 自動化測試機制

# YAML Tutorial Step

- behavior: first_chat_skill_references

  automation:

    composerSeed: "用這份客製化報告..."

    skillExecutionMode: single_turn

  expect:

    assistantContentIncludes:

      - "投資組合"

    skillTraceIncludes:

      - "references"

    requireSkillTodo: true

▸ evaluateTutorialStep()
比對真實 app 狀態與 YAML 預期

▸ expect 斷言
assistantContentIncludes · skillTraceIncludes · requireSkillTodo · requireSkillTodoProgress

▸ Snapshot 管理
captureTutorialWorkspaceSnapshot → restoreTutorialWorkspaceSnapshot

💡 教學即測試：同一份 YAML 驅動 UI 引導教學 + npm 自動化煙霧測試 — 一魚兩吃。

架構

架構全景 & Adapter 系統

🔌 Adapter 適配器

OpenAICompatAdapter

標準 /chat/completions SSE
支援 429 自動重試

ChromePromptAdapter

Chrome window.ai API
無需 API Key

CustomAdapter

Mustache bodyTemplate
JSONPath 萃取回應

AgentAdapter 介面：detect() + chat() → AsyncGenerator<ChatEvent>

💾 Storage Layer

agentStore — agents (localStorage)

builtInToolStore — JS tools (localStorage)

settingsStore — MCP / creds (localStorage)

chatStore — messages (IndexedDB)

docStore — documents (IndexedDB)

skillStore — skills (IndexedDB×3)

⚖️ Load Balancer

Agent 綁定 LoadBalancerConfig

多個 Instance → 有序 failover

credential × key pool 輪轉

failure → skip → resumeMinute 後重試

🔄 資料流

User → App.tsx

  → Skill Decision (LLM)

  → Load Skill Runtime

  → Tool Decision (LLM)

  → MCP / Built-in Execute

  → Result Summary

  → Final Answer (LLM)

  → ChatPanel (stream)

Conclusion

瀏覽器即是
Agent 平台

AgentGoRound 證明了一件事：不需要後端、不需要原生 function-calling —
純前端 + Prompt 設計就能為任意 LLM 帶來完整的 Agentic 能力。

📄

Doc

知識 ≈ AGENTS.md

🔌