為開發者打造的 AI 介接平台

幾分鐘，
讓你的網站
長出 AI 助手。

定義幾個 tool，平台自動產生 LLM schema 與 TypeScript 型別；嵌入一段瀏覽器 SDK，AI 就能用自然語言直接操作你的頁面——填表單、跳頁、點按鈕。

開啟 Console 看 3 步驟範例 ↓
本機開發免金鑰 · npm install 接上 SDK · 型別安全的前端程式碼
Why onagent

把 AI 接進介面，該有的都幫你準備好

從 tool 定義到型別安全的前端程式碼與安全隔離，一次到位。

一次定義，兩邊產出

一份 tool 定義，自動生成 LLM 用的 JSON schema 與型別安全的 TypeScript ToolHandlers 介面——schema 與前端型別永不漂移。

AI 直接操作你的介面

tool call 會派發到你註冊的 handler：填表單、跳頁、勾選、點按鈕——不只是回一段文字，而是真的動起來。

逐 App 隔離與白名單

每把 API key 由伺服器端解析對應的 app（前端無法偽造），並綁定單一 Origin，未設定時預設 fail-closed 拒絕連線。

Ship in 3 steps

三步驟，建立一個 AI 服務

定義能力、推送到平台、嵌入前端——點左側步驟，看每一步實際的程式碼。

↳ 完成後，AI 收到 prompt 時會挑選對應的 tool，SDK 幫你呼叫 handler、把結果回傳給模型。

tools
appId: demo-app
tools:
  - name: fill_search_form
    description: 填入頁面上的搜尋框並送出。
    parameters:
      type: object
      required: [query]
      properties:
        query:
          type: string
          description: 要搜尋的關鍵字。
# 登入（會開瀏覽器授權，網址只帶一個一次性代碼）
$ atp login --web

# 把 tool 定義推上去
$ atp save-tools demo-app tools
✓ Saved 1 tool to "demo-app"

# 隨時列出你的 app
$ atp list-apps
demo-app        1 tool, has key
import { AgentBridge } from "@onagent/agent-bridge-sdk";

const bridge = new AgentBridge({
  url: "wss://your-backend/ws",
  appId: "demo-app",
  apiKey: "YOUR_APP_API_KEY",
  tools: {
    fill_search_form: ({ query }) => setQuery(query),
  },
});

bridge.sendContext({ query, path });  // 把頁面狀態當背景
bridge.prompt("搜尋紅色運動鞋");     // 讓 AI 動起來
What you can build

用一句話，驅動真實的介面操作

這些不是示意圖——都是 repo 裡 examples/ 底下能跑的範例。

examples/react-demo · React

電商結帳助手

讓 AI 幫使用者填搜尋、跳轉頁面、甚至按下結帳按鈕——每個動作都對應一個你註冊的 handler。

幫我結帳 → click_checkout_button()
已為你送出訂單 ✓
examples/analysis · Vue 3

問卷分析助手

在一份問卷題目清單上，用自然語言讓 AI 幫你勾選相關題目，準備跑統計分析。

選擇跟年齡有關的題目 → select_question(["p2q1", …])
已勾選 3 個題目

準備好讓 AI 進駐你的介面了嗎？

建立 app、發一把 API key——就這樣。本機開發不需要任何 LLM 金鑰就能先跑起來。

開啟 Console 回顧 3 步驟