# 策展 · X (Twitter) 🔥🔥

> 作者：OpenRouter (@OpenRouter) · 平台：X (Twitter) · 日期：2026-04-24

> 原始來源：https://x.com/OpenRouter/status/2047701992798392484

## 中文摘要

OpenRouter推出「create-agent-tui」技能，協助AI程式開發Agent快速建置TypeScript終端TUI。

這項技能類似「create-react-app」，但專為終端Agent設計，讓使用者告訴AI程式開發Agent（如Claude Code、Cursor）想要的Agent類型，即自動生成可執行專案，支援任意模型，並提供完全自訂的終端介面、工具與設定。

**自訂化UI樣式**

技能提供多種工具顯示風格，透過config中的display.toolDisplay或啟動時--tool-display參數選擇：
- Emoji：每個工具呼叫標記工具名稱、參數與時間戳。
- Grouped（預設）：粗體動作標籤與樹狀分支輸出，連續相同類型呼叫合併。
- Minimal：聚合單行摘要，文字恢復時才刷新。
- Custom：直接描述需求。
另有隱藏模式，完全抑制工具輸出。

輸入樣式透過display.inputStyle或--input選擇三種：
- Block（預設）：全寬背景輸入框，使用OSC 11偵測終端配色，自動適配深淺主題。
- Bordered：上下橫線框架，任何終端皆相容。
- Plain：簡單> readline提示，無raw模式或轉義序列。
- Custom：直接描述需求。

**載入動畫與橫幅**

載入動畫等待模型回應時顯示，透過display.loader.style與display.loader.text自訂三種：
- Gradient（預設）：文字上滾動顏色閃光。
- Spinner：左側布萊葉點動畫。
- Minimal：尾隨點點。
- Custom：直接描述需求。

啟用showBanner顯示自訂ASCII藝術logo，使用█字元生成區塊字母藝術，適合60欄寬終端，並有純文字後備橫幅顯示Agent名稱與模型。

**適用情境**

建置自訂Agent TUI適合以下情況：
- 自訂外觀：打造有趣UI或專案/團隊專屬介面。
- 自訂工具：Agent需互動自家API、資料庫或領域特定系統，通用Agent無法觸及。
- 控制迴圈：需自訂停止條件、審核流程、成本限制或模型選擇，託管Agent不提供。
- 出貨產品：Agent為應用程式一部分，而非開發工具，需掌控入口（如CLI、API伺服器、嵌入式）。
- 學習：理解工具執行層級運作，提升使用與除錯能力。

**自訂功能清單**

技能啟動時呈現互動檢查清單，使用者選擇所需功能。

伺服器工具（由OpenRouter執行，無客戶端程式碼）：
- Web Search：開啟，透過openrouter:web_search即時網路搜尋。
- Datetime：開啟，透過openrouter:datetime提供當前日期/時間。
- Image Generation：關閉，透過openrouter:image_generation生成圖像。

使用者定義工具（本地執行，自家程式碼）：
- File Read：開啟，讀取檔案（支援偏移/限制，偵測圖像）。
- File Write：開啟，建立/覆寫檔案，自動建立資料夾。
- File Edit：開啟，搜尋替換並輸出diff。
- Glob/Find：開啟，按模式尋找檔案。
- Grep/Search：開啟，按regex搜尋檔案內容。
- Directory List：開啟，列出資料夾項目。
- Shell/Bash：開啟，執行命令（有逾時）。
- JS REPL：關閉，持久Node.js環境。
- Sub-agent Spawn：關閉，委派任務給子Agent。
- Plan/Todo：關閉，追蹤多步驟任務進度。
- Request User Input：關閉，向使用者提結構化問題。
- Web Fetch：關閉，從URL擷取並提取文字。
- View Image：關閉，將本地圖像讀為base64。
- Custom Tool Template：開啟，領域專屬空架構。

harness模組（架構元件）：
- Session Persistence：開啟，JSONL附加式對話記錄。
- Context Compaction：關閉，上下文過長時摘要舊訊息。
- System Prompt Composition：關閉，從靜態+動態上下文檔案建置指示。
- Tool Permissions：關閉，高危工具需使用者審核。
- Structured Logging：關閉，發出工具呼叫、API請求、錯誤事件。

**底層SDK支援**

生成TUI不重製Agent迴圈，由@openrouter/agent處理核心邏輯：
- 模型呼叫：client.callModel()，單次呼叫，支援OpenRouter任意模型。
- 工具執行：自動，使用tool()與Zod schema定義，SDK驗證輸入並呼叫execute函式。
- 多輪互動：自動迴圈（呼叫模型→執行工具→呼叫模型），直到停止條件觸發。
- 停止條件：stepCountIs(n)、maxCost(amount)、hasToolCall(name)或自訂函式。
- 串流：result.getTextStream()文字增量，result.getToolCallsStream()工具呼叫。
- 成本追蹤：result.getResponse().usage，含輸入/輸出token計數。
- 動態參數：模型、溫度等依對話上下文為函式。
- 共享上下文：經type-safe sharedContextSchema跨工具共享狀態。
- 輪次生命週期：onTurnStart/onTurnEnd回呼，用於記錄、壓縮觸發等。

TUI僅提供迴圈周邊：設定、工具定義、會話持久化、入口（CLI或API伺服器）及清單選模組。

**專案結構與快速啟動**

全預設生成結構：
```
my-agent/
  package.json              @openrouter/agent, zod, tsx
  tsconfig.json             ES2022, Node16, strict
  .env.example              OPENROUTER_API_KEY=
  src/
    config.ts               分層設定（預設→檔案→環境變數）
    agent.ts                核心執行器帶重試
    cli.ts                  互動REPL
    session.ts              JSONL會話持久化
    terminal-bg.ts          適配背景偵測
    renderer.ts             工具顯示渲染器
    tools/
      index.ts              工具註冊+伺服器工具
      file-read.ts          讀檔
      file-write.ts         寫檔
      file-edit.ts          搜尋替換diff
      glob.ts               模式尋檔
      grep.ts               regex搜內容
      list-dir.ts           列資料夾
      shell.ts              執行命令
```

安裝方式：
- Claude Code：/plugin marketplace add OpenRouterTeam/skills；/plugin install openrouter@openrouter。
- Skills CLI（任意支援Agent）：npx skills add OpenRouterTeam/skills。
告訴Agent建置Agent TUI，即自動使用技能。

範例在sample/資料夾，全預設TUI含串流輸出、token計數、會話持久化：
```
cd sample
npm install
OPENROUTER_API_KEY=your-key-here npm start
```
啟動自訂：npm start -- --banner "Acme Bot" --model anthropic/claude-sonnet-4.6 --input bordered --tool-display emoji。

**技能來源與SDK**

基於OpenRouter Agent SDK，提供乾淨多模型推論與工具呼叫邏輯：http://openrouter.ai/sdk。  
GitHub：https://github.com/OpenRouterTeam/skills/tree/main/skills/create-agent-tui。

## 標籤

Skills, Agent, CLI, 開源專案, OpenRouter
