MCP on recca0120 技術筆記

claude-view：Claude Code 的 Mission Control，即時監控 session、成本、token 用量

Tue, 07 Apr 2026 17:30:00 +0800

用 Claude Code 一段時間之後，最常被問的問題是「你這個月花了多少錢？」。老實說我答不出來。Claude Code 的 terminal 介面不會告訴你累計花了多少 token，跑了幾個 sub-agent，哪個 session 最燒錢。

claude-view 就是來補這個缺口的。一行指令打開一個 dashboard，即時監控你機器上所有的 Claude Code session。

1

npx claude-view

它能看到什麼

Session 即時監控

打開 dashboard 之後，你會看到所有正在跑的 Claude Code session，每張卡片顯示：

最後一條訊息
使用的模型（Opus、Sonnet、Haiku）
當前花費和 token 數
Context window 使用率（即時百分比）
Prompt cache 倒數計時

卡片有多種排列方式：Grid、List、Kanban、Monitor。Kanban 模式會按 project/branch 分 swimlane，很適合同時跑多個專案的時候。

對話瀏覽

點進任何一個 session，可以看到完整的對話記錄。跟在 terminal 裡看不一樣的是，claude-view 會把 tool call 視覺化——檔案讀取、編輯、bash 指令、MCP 呼叫都有獨立的卡片。

有個 Developer Mode 開關，打開之後會顯示 hook metadata、event 卡片、raw JSON。debug 的時候很有用。

對話可以匯出成 Markdown，方便貼到文件或丟回去讓 Claude 繼續。

Sub-agent 樹狀圖

Claude Code 會 spawn sub-agent 來處理子任務。在 terminal 裡你只看到一層，claude-view 會畫出完整的樹狀結構，每個 sub-agent 各自的 cost/token 一目了然。

全文搜尋

搜尋引擎用的是 Tantivy，Rust 寫的，Lucene 等級的全文索引。搜尋 1,500 個 session 的回應時間在 50ms 以內。

Cmd+K 打開 command palette，可以快速跳轉 session 或切換 view。

Analytics：錢花到哪裡去了

這是我覺得最有價值的部分。

Dashboard 指標

週對週的 session 數、token 用量、花費比較
90 天 GitHub 風格的活動 heatmap
最常用的 skills、commands、MCP tools 排行
最活躍的 project 長條圖
跨 session 的總 edits、reads、bash commands 統計

AI 貢獻追蹤

這個功能把 Claude Code 的產出量化了：

新增/刪除行數、修改檔案數、commit 數
每個 commit 的成本、每個 session 的成本、每行程式碼的 ROI
Opus vs Sonnet vs Haiku 的比較
Re-edit rate：你下的 prompt 品質有沒有在進步

還有一個實驗性的 AI Fluency Score（0-100），根據你的 session 歷史算出你用 AI 的熟練程度。

85 個 MCP Tools

claude-view 有一個 plugin（@claude-view/plugin），裝了之後 Claude Code 每次啟動都會自動載入。

1

claude plugin add @claude-view/plugin

這個 plugin 提供 85 個 MCP tools：8 個手寫的核心工具加上 77 個從 OpenAPI spec 自動生成的工具。

核心的 8 個：

list_sessions、get_session、search_sessions
get_stats、get_fluency_score、get_token_stats
list_live_sessions、get_live_summary

裝了之後，你可以在 Claude Code 裡直接問「今天花了多少錢」「上週最花時間的 session 是哪個」，它會透過 MCP 去 claude-view 查。

9 個 Skills

除了 MCP tools，還有 9 個內建 skill：

Skill	用途
`/session-recap`	摘要 commit、指標、時間
`/daily-cost`	今天的花費和 token
`/standup`	多 session 工作日誌
`/coaching`	AI 使用建議
`/insights`	行為模式分析
`/project-overview`	跨 session 專案摘要
`/search`	自然語言搜尋
`/export-data`	CSV/JSON 匯出
`/team-status`	團隊活動概覽

技術架構

claude-view 用 Rust 寫後端，React 寫前端。

層	技術
Web 框架	Axum
資料庫	SQLite
搜尋引擎	Tantivy
檔案 I/O	Memory-mapped I/O
即時通訊	SSE + WebSocket
前端	React + Vite + Dockview
Monorepo	Turbo + Bun

效能數據（M 系列 Mac，1,493 sessions）：

指標	claude-view	一般 Electron Dashboard
下載大小	~10 MB	150-300 MB
磁碟佔用	~27 MB	300-500 MB
啟動時間	<500 ms	3-8 s
記憶體	~50 MB	300-800 MB
索引 1,500 sessions	<1 s	N/A

Rust 的 mmap + SIMD 加速 JSONL 解析，從 parse 到 response 全程 zero-copy。跟 Electron 做的 dashboard 比，體積差 10 倍以上，記憶體差 6 倍。

安裝

三種方式：

1
2
3
4
5
6
7
8


# 推薦
curl -fsSL https://get.claudeview.ai/install.sh | sh

# 或用 npx
npx claude-view

# 裝 plugin（自動跟 Claude Code 一起啟動）
claude plugin add @claude-view/plugin

唯一的前提是你已經裝了 Claude Code。開了之後 dashboard 在 http://localhost:47892。

所有資料存在本地，零 telemetry，不需要帳號。

跟其他工具比

同類的工具不少，但定位不太一樣：

ccusage：CLI 工具，只看 token 統計，沒有 GUI，沒有即時監控
opcode：Tauri 做的 GUI，有 session 管理但沒有多 session 對話瀏覽和搜尋
CodePilot：Electron 做的 chat UI，是用來「跟」Claude Code 對話的，不是監控

claude-view 的定位是監控和分析。如果你已經習慣在 terminal 跑 Claude Code，它不會改變你的工作流，只是幫你看到更多資訊。

之前介紹的 AionUi 是把多個 agent 統一到一個 GUI 裡跑，claude-view 則是讓你繼續在 terminal 跑，但多一個 dashboard 來追蹤。兩個可以同時用。

誰適合用

如果你用 Claude Code 的頻率不高，偶爾跑一下，其實不需要這個工具。

但如果你每天都在用，同時開好幾個 session，想知道錢花去哪裡、哪個模型 CP 值最高、prompt 品質有沒有進步，claude-view 給的資訊密度是 terminal 做不到的。

參考資源

bb-browser：不寫爬蟲、不用 API key，你的瀏覽器就是 API

Tue, 07 Apr 2026 11:34:00 +0800

想拿 Twitter 的搜尋結果，傳統做法有三條路：申請 API key（限制一堆）、寫爬蟲（被封 IP）、用 Playwright 開 headless browser（被偵測到不是真人）。

bb-browser 走第四條路：直接用你已經開著的 Chrome。你登入過 Twitter，cookie 已經在那邊了，bb-browser 就在那個標籤裡跑 fetch()，從網站的角度看，這就是你本人在瀏覽。

跟爬蟲和 Playwright 差在哪

先把差異講清楚。

	bb-browser	Playwright / Selenium	爬蟲（requests、Scrapy）
瀏覽器	你真實的 Chrome	隔離的無頭瀏覽器	沒有瀏覽器
登入狀態	已經登入，直接用	要重新登入或注入 cookie	要手動帶 cookie
反爬偵測	隱形（就是真人）	容易被偵測	容易被封
指紋	你的真實指紋	無頭瀏覽器指紋	沒有指紋

關鍵在於 bb-browser 不啟動新的瀏覽器實例。它透過 CDP（Chrome DevTools Protocol）連到你正在用的 Chrome，在標籤裡注入程式碼。網站看到的 User-Agent、cookie、TLS 指紋全部都是真的，因為本來就是你的瀏覽器。

架構

1
2
3
4
5
6
7
8
9


AI Agent (Claude Code, Codex, Cursor)
 │ CLI 或 MCP (stdio)
 ▼
bb-browser CLI ──HTTP──▶ Daemon ──CDP WebSocket──▶ 真實瀏覽器
 │
 ┌──────┴──────┐
 │ 每標籤事件快取│
 │ (網路、控制台)│
 └─────────────┘

bb-browser 會起一個 daemon（預設 127.0.0.1:19824），透過 CDP WebSocket 跟 Chrome 溝通。CLI 指令送到 daemon，daemon 在對應的標籤裡執行。

安裝和基本用法

1

npm install -g bb-browser

拉取社群適配器：

1

bb-browser site update

跑一條命令試試：

1

bb-browser site zhihu/hot

這會打開知乎的標籤（如果你已經登入），用你的 cookie 去撈熱門問題列表。

結構化輸出

所有命令都支援 --json 和 --jq：

1
2
3


bb-browser site xueqiu/hot-stock 5 --jq '.items[] | {name, changePercent}'
# {"name":"云天化","changePercent":"2.08%"}
# {"name":"东芯股份","changePercent":"-7.60%"}

瀏覽器操作

除了跑適配器，也能直接操作瀏覽器：

1
2
3
4
5
6
7


bb-browser open https://example.com # 開啟 URL
bb-browser snapshot -i # 無障礙樹快照
bb-browser click @3 # 點擊元素
bb-browser fill @5 "hello" # 填入文字
bb-browser eval "document.title" # 執行 JavaScript
bb-browser fetch URL --json # 帶認證的 fetch
bb-browser screenshot # 截圖

36 個平台、103 條命令

bb-browser 的適配器涵蓋的平台很廣：

搜尋：Google、百度、Bing、DuckDuckGo
社交：Twitter/X、Reddit、微博、小紅書、LinkedIn
開發：GitHub、StackOverflow、Hacker News、npm、PyPI、arXiv、V2EX、Dev.to
新聞：BBC、Reuters、36kr、今日頭條
影片：YouTube、Bilibili
金融：雪球、Yahoo Finance、東方財富
知識：Wikipedia、知乎

每個適配器就是一個 JavaScript 檔案，社群驅動。要加新平台，寫一個 JS 檔丟到 bb-sites repo 就好。

適配器的三種複雜度

不是每個網站都一樣好搞。bb-browser 把適配器分成三層：

層級	做法	範例	開發時間
Level 1	直接用 cookie 發 fetch	Reddit、GitHub	~1 分鐘
Level 2	需要抓 Bearer token + CSRF	Twitter、知乎	~3 分鐘
Level 3	注入 Webpack 模組或讀 Pinia store	Twitter 搜尋	~10 分鐘

Level 1 最簡單，有些網站的 API 只要帶 cookie 就能用。Level 3 最複雜，要反向工程前端打包的模組，從 Webpack 的 __webpack_require__ 或 Vue 的 Pinia store 裡撈資料。

當 MCP Server 給 AI Agent 用

這是 bb-browser 最有意思的用法。設定成 MCP server 之後，Claude Code 或 Cursor 就能直接存取你的瀏覽器能看到的所有網站。

1
2
3
4
5
6
7
8


{
 "mcpServers": {
 "bb-browser": {
 "command": "npx",
 "args": ["-y", "bb-browser", "--mcp"]
 }
 }
}

設好之後，你可以跟 Claude Code 說「幫我查一下 arXiv 上最近的 RAG 論文」，它就會透過 bb-browser 去 arXiv 搜尋，用你的真實瀏覽器。

沒有 bb-browser 的 AI agent 只能操作檔案和終端。有了 bb-browser，它能存取整個網際網路——用你的身份。

之前寫的 CLI-Anything 是把桌面軟體包成 CLI 給 agent 呼叫，AionUi 是統一管理多個 agent 的介面。bb-browser 則是從另一個角度擴展 agent 能力：讓它直接用你的瀏覽器上網。

注意事項

幾件事要想清楚再用：

用的是你的真實帳號。bb-browser 代你操作，如果操作頻率太高，帳號可能被平台標記。它不是隱形的爬蟲，它就是你
安全性。daemon 預設只綁 localhost，但如果開到 0.0.0.0，任何能連到你機器的人都能操作你的瀏覽器。搭配 Tailscale 或 ZeroTier 用比較安全
適配器品質不一。社群驅動的好處是覆蓋廣，壞處是有些適配器可能跟不上網站改版
macOS 用戶注意 IPv6 問題，daemon 要加 --host 127.0.0.1

適合什麼場景

bb-browser 不是拿來大規模爬資料的。如果你要爬百萬筆資料，還是用 Scrapy。

它適合的場景是：

讓 AI agent 能查網路資料，不需要一個一個申請 API key
快速從某個已登入的平台撈結構化資料
跨平台研究——一分鐘內同時查 arXiv、Twitter、GitHub、知乎、StackOverflow

一條指令就能完成以前要寫爬蟲才能做的事，而且不會被擋。

參考資源

AionUi：一個介面管 12 種 AI Agent，免費開源的 Cowork 桌面應用

Tue, 07 Apr 2026 11:03:00 +0800

手上裝了 Claude Code，又裝了 Codex，偶爾還會切 Qwen Code 跑中文任務。每個工具各開一個 terminal，切來切去，MCP 設定各自一份，對話記錄散落各處。

AionUi 想解決的就是這個問題：一個桌面應用，把所有 AI agent 收進同一個介面。免費、開源、Apache 2.0 授權。

它做了什麼

AionUi 是用 Electron + React 做的跨平台桌面應用，支援 macOS、Windows、Linux。核心功能是統一管理多種 AI coding agent。

支援的 Agent

AionUi 會自動偵測你機器上已安裝的 CLI 工具，目前支援：

Claude Code、Codex、Qwen Code、Goose AI、OpenClaw、Augment Code
iFlow CLI、CodeBuddy、Kimi CLI、OpenCode、Factory Droid、GitHub Copilot

總共 12 種以上。你不需要額外設定，裝好 CLI 就能在 AionUi 裡面用。沒裝任何 CLI 也沒關係，AionUi 內建了自己的 agent，支援 Google 登入或 API key 認證，開箱即用。

20+ 模型平台

模型選擇很寬：

主流平台：Gemini、Claude、OpenAI
雲端：AWS Bedrock
中文平台：通義千問（Dashscope）、智譜、Moonshot（Kimi）、百度千帆、騰訊混元、ModelScope
本地模型：Ollama、LM Studio

如果你在中國大陸，不方便用 OpenAI 或 Claude 的 API，直接切到通義或智譜就好。如果想完全離線，跑 Ollama 本地模型也行。

MCP 設定一次同步全部

這是我覺得最實用的設計。在 AionUi 裡設定一次 MCP（Model Context Protocol）工具，所有 agent 自動同步。不用每個 agent 各設一份 mcp.json，改一個地方全部生效。

內建 12 個專業助手

AionUi 不只是 agent 的啟動器，它還預裝了 12 個專業助手：

助手	用途
Cowork	自動任務執行
PPTX Generator	簡報生成
PDF to PPT	格式轉換
3D Game	單檔遊戲原型
UI/UX Pro Max	57 種樣式、95 色盤
Beautiful Mermaid	流程圖、序列圖
Planning with Files	檔案型專案規劃

其中 Office 相關的功能（PPT、Word、Excel）底層用 OfficeCLI 驅動，生成的是可編輯的 .pptx、.docx、.xlsx，不是 PDF 截圖。PPT 還支援 Morph 動畫過場。

排程任務：24/7 自動跑

這個功能比較少見。你可以用自然語言設定排程任務，例如「每天早上 9 點整理昨天的 Git commit log」，AionUi 會轉成 cron 表達式自動執行。

每個排程任務綁定一個對話，維持上下文。跑完之後結果直接送回對話視窗，也可以推到 Telegram、飛書、釘釘。

預覽面板

AionUi 內建了檔案預覽，支援的格式很多：

文件：PDF、Word、Excel、PowerPoint
程式碼：30+ 語言，語法高亮
圖片：PNG、JPG、SVG、WebP 等
標記語言：Markdown、HTML，支援即時編輯

還能追蹤檔案變更、查看 Git 版本歷史、一鍵復原。

WebUI 遠端存取

桌面應用不一定要坐在電腦前面用。AionUi 可以開一個 WebUI，用 QR code 或密碼登入，從手機或其他電腦操作。支援 LAN 和跨網路存取。

搭配 Telegram、飛書、釘釘的 bot 整合，可以在手機上對 AI agent 下指令，結果推播回聊天群組。

技術棧

層	技術
框架	Electron
UI	React
CSS	UnoCSS
建置	Vite
測試	Vitest + Playwright
資料庫	SQLite（本地）
語言	TypeScript

所有資料存在本地 SQLite，不會上傳到任何伺服器。想用本地模型（Ollama）的話，整個流程可以完全離線。

安裝

從 GitHub Releases 下載對應平台的安裝檔。macOS 也支援 Homebrew。

裝好之後，開啟應用就能用。如果你機器上已經有 Claude Code 或 Codex，AionUi 會自動偵測到。沒有的話，用內建 agent 搭配 API key 或 Google 登入也可以直接開始。

跟單獨用 Claude Code 比

Claude Code 本身很強，但它就是一個 terminal 工具。AionUi 的定位不是取代它，而是把它跟其他 agent 放在同一個地方管理。

幾個明顯的差異：

多 agent：Claude Code 只能跑 Claude，AionUi 可以同時跑多種 agent
GUI：有完整的桌面介面，檔案預覽、Office 生成、圖片處理都在裡面
排程：Claude Code 沒有內建排程，AionUi 可以 24/7 自動執行任務
價格：Claude Code 需要 API 費用或 $100/月訂閱，AionUi 本身免費
模型選擇：不綁定單一模型提供商，20+ 平台隨切

如果你對 AI Agent 工具生態有興趣，之前寫過一篇 CLI-Anything：讓 AI Agent 操作任何軟體的通用橋樑，是從另一個角度切入——把既有軟體包成 CLI 讓 agent 呼叫。AionUi 則是反過來，從 agent 管理的角度出發。

目前的狀態

AionUi 還在快速迭代，GitHub 上有 4,400+ 次 commit。社群主要在 Discord（英文）和微信群（中文）。

要注意的是，雖然星數不少，但這類 Electron 應用的記憶體佔用通常不低。如果你只用一種 agent，開個 terminal 跑 CLI 可能更輕量。AionUi 的價值在於你真的同時需要多種 agent、想要 GUI 管理、或者需要排程和 Office 生成這些額外功能的時候。