MCP on recca0120 Tech Notes

claude-view: Mission Control for Claude Code — Live Session Monitoring, Cost Tracking, and Analytics

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

After using Claude Code for a while, the most common question I get is “how much are you spending per month?” Honestly, I can’t answer that. Claude Code’s terminal interface doesn’t show cumulative token costs, how many sub-agents ran, or which session burned the most money.

claude-view fills that gap. One command opens a dashboard that monitors every Claude Code session on your machine in real-time.

1

npx claude-view

What It Shows You

Live Session Monitoring

Open the dashboard and you see all running Claude Code sessions, each card showing:

Last message
Model in use (Opus, Sonnet, Haiku)
Current cost and token count
Context window utilization (live percentage)
Prompt cache countdown timer

Cards can be arranged in multiple layouts: Grid, List, Kanban, Monitor. Kanban mode groups sessions by project/branch in swimlanes — great when running multiple projects simultaneously.

Conversation Browser

Click into any session for the full conversation history. Unlike the terminal view, claude-view visualizes tool calls — file reads, edits, bash commands, and MCP calls each get their own cards.

A Developer Mode toggle reveals hook metadata, event cards, and raw JSON. Invaluable for debugging.

Conversations can be exported as Markdown for documentation or feeding back to Claude for continuation.

Sub-agent Tree View

Claude Code spawns sub-agents for subtasks. In the terminal you only see one level. claude-view renders the full tree structure with per-agent cost and token breakdowns at a glance.

Full-Text Search

The search engine is Tantivy, a Rust-native Lucene-class full-text indexer. Search response times across 1,500 sessions stay under 50ms.

Cmd+K opens a command palette for quick session jumping and view switching.

Analytics: Where Did the Money Go

This is where I see the most value.

Dashboard Metrics

Week-over-week session count, token usage, and cost comparison
90-day GitHub-style activity heatmap
Most-used skills, commands, and MCP tools leaderboards
Most active projects bar chart
Cross-session totals for edits, reads, and bash commands

AI Contributions Tracking

This feature quantifies Claude Code’s output:

Lines added/removed, files touched, commit counts
Cost per commit, cost per session, cost per line ROI
Opus vs Sonnet vs Haiku side-by-side comparison
Re-edit rate: tracking whether your prompt quality is improving

There’s also an experimental AI Fluency Score (0-100), calculated from your session history to measure how effectively you use AI.

85 MCP Tools

claude-view ships a plugin (@claude-view/plugin) that auto-loads with every Claude Code session.

1

claude plugin add @claude-view/plugin

The plugin provides 85 MCP tools: 8 hand-crafted core tools plus 77 auto-generated from the OpenAPI spec.

The core 8:

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

Once installed, you can ask Claude Code “how much did I spend today” or “which session took the longest last week” — it queries claude-view via MCP.

9 Built-in Skills

Beyond MCP tools, there are 9 built-in skills:

Skill	Purpose
`/session-recap`	Summarize commits, metrics, duration
`/daily-cost`	Today’s spending and tokens
`/standup`	Multi-session work log
`/coaching`	AI usage tips
`/insights`	Behavioral pattern analysis
`/project-overview`	Cross-session project summary
`/search`	Natural language search
`/export-data`	CSV/JSON exports
`/team-status`	Team activity overview

Technical Architecture

claude-view uses Rust for the backend and React for the frontend.

Layer	Technology
Web framework	Axum
Database	SQLite
Search engine	Tantivy
File I/O	Memory-mapped I/O
Real-time	SSE + WebSocket
Frontend	React + Vite + Dockview
Monorepo	Turbo + Bun

Performance benchmarks (M-series Mac, 1,493 sessions):

Metric	claude-view	Typical Electron Dashboard
Download	~10 MB	150-300 MB
On disk	~27 MB	300-500 MB
Startup	<500 ms	3-8 s
RAM	~50 MB	300-800 MB
Index 1,500 sessions	<1 s	N/A

Rust’s mmap + SIMD-accelerated JSONL parsing enables zero-copy from parse to response. Compared to Electron dashboards, it’s 10x smaller and uses 6x less memory.

Installation

Three options:

1
2
3
4
5
6
7
8


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

# Or via npx
npx claude-view

# Install plugin (auto-starts with Claude Code)
claude plugin add @claude-view/plugin

Only prerequisite: Claude Code installed. Dashboard runs at http://localhost:47892.

All data stays local, zero telemetry, no account required.

Compared to Other Tools

There are similar tools, but with different positioning:

ccusage: CLI tool, token stats only, no GUI, no live monitoring
opcode: Tauri-based GUI with session management but no multi-session chat browsing or search
CodePilot: Electron chat UI for interacting with Claude Code, not monitoring it

claude-view is positioned as monitoring and analytics. If you already work in the terminal with Claude Code, it doesn’t change your workflow — it just shows you more information.

I previously covered AionUi, which unifies multiple agents into one GUI. claude-view takes a different approach: keep working in the terminal, but add a dashboard for tracking. The two can work together.

Who Needs This

If you use Claude Code occasionally, you probably don’t need this tool.

But if you use it daily, run multiple sessions simultaneously, and want to know where the money goes, which model gives the best ROI, and whether your prompt quality is improving — claude-view provides information density that the terminal simply can’t match.

References

bb-browser: No Scraping, No API Keys — Your Browser Is the API

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

Want Twitter search results? Traditional approaches give you three paths: apply for an API key (rate-limited), write a scraper (get IP-banned), or use Playwright with a headless browser (detected as non-human).

bb-browser takes a fourth path: use the Chrome you already have open. You’re logged into Twitter, the cookies are right there, and bb-browser runs fetch() inside that tab. From the website’s perspective, it’s just you browsing.

How It Differs from Scrapers and Playwright

Let’s get the differences clear.

	bb-browser	Playwright / Selenium	Scrapers (requests, Scrapy)
Browser	Your real Chrome	Isolated headless browser	No browser
Login state	Already logged in	Must re-login or inject cookies	Manual cookie handling
Anti-bot detection	Invisible (it IS the real user)	Easily detected	Easily blocked
Fingerprint	Your real fingerprint	Headless browser fingerprint	No fingerprint

The key insight: bb-browser doesn’t launch a new browser instance. It connects to your running Chrome via CDP (Chrome DevTools Protocol) and injects code into tabs. The User-Agent, cookies, and TLS fingerprint the website sees are all real — because it is your actual browser.

Architecture

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


AI Agent (Claude Code, Codex, Cursor)
 │ CLI or MCP (stdio)
 ▼
bb-browser CLI ──HTTP──▶ Daemon ──CDP WebSocket──▶ Real Browser
 │
 ┌──────┴──────┐
 │ Per-tab event│
 │ cache (net, │
 │ console) │
 └─────────────┘

bb-browser runs a daemon (default 127.0.0.1:19824) that communicates with Chrome via CDP WebSocket. CLI commands go to the daemon, which executes them in the corresponding tab.

Installation and Basic Usage

1

npm install -g bb-browser

Pull community adapters:

1

bb-browser site update

Try a command:

1

bb-browser site zhihu/hot

This opens a Zhihu tab (if you’re already logged in), uses your cookies to fetch the trending questions list.

Structured Output

All commands support --json and --jq:

1
2
3


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

Browser Operations

Beyond running adapters, you can directly control the browser:

1
2
3
4
5
6
7


bb-browser open https://example.com # Open URL
bb-browser snapshot -i # Accessibility tree snapshot
bb-browser click @3 # Click element
bb-browser fill @5 "hello" # Fill input
bb-browser eval "document.title" # Execute JavaScript
bb-browser fetch URL --json # Authenticated fetch
bb-browser screenshot # Take screenshot

36 Platforms, 103 Commands

bb-browser’s adapters cover a wide range:

Search: Google, Baidu, Bing, DuckDuckGo
Social: Twitter/X, Reddit, Weibo, Xiaohongshu, LinkedIn
Dev: GitHub, StackOverflow, Hacker News, npm, PyPI, arXiv, V2EX, Dev.to
News: BBC, Reuters, 36kr, Toutiao
Video: YouTube, Bilibili
Finance: Xueqiu, Yahoo Finance, Eastmoney
Knowledge: Wikipedia, Zhihu

Each adapter is a single JavaScript file, community-driven. To add a new platform, write a JS file and submit it to the bb-sites repo.

Three Levels of Adapter Complexity

Not every website is equally straightforward. bb-browser categorizes adapters into three levels:

Level	Approach	Examples	Dev Time
Level 1	Direct fetch with cookies	Reddit, GitHub	~1 min
Level 2	Bearer token + CSRF extraction	Twitter, Zhihu	~3 min
Level 3	Webpack injection or Pinia store	Twitter search	~10 min

Level 1 is simplest — some sites’ APIs work with just cookies. Level 3 is most complex, requiring reverse engineering of frontend bundles, extracting data from Webpack’s __webpack_require__ or Vue’s Pinia store.

MCP Server for AI Agents

This is bb-browser’s most compelling use case. Configure it as an MCP server, and Claude Code or Cursor can directly access any website your browser can see.

1
2
3
4
5
6
7
8


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

Once configured, you can tell Claude Code “search arXiv for recent RAG papers” and it will search through bb-browser using your real browser.

Without bb-browser, an AI agent can only work with files and the terminal. With bb-browser, it can access the entire internet — as you.

I previously wrote about CLI-Anything, which wraps desktop software as CLIs for agents to call, and AionUi, which provides a unified interface for managing multiple agents. bb-browser extends agent capability from yet another angle: letting it browse the web using your real browser.

Things to Consider

A few things to think through before using it:

It uses your real account. bb-browser acts on your behalf. If the operation frequency is too high, your account might get flagged. It’s not an invisible scraper — it IS you
Security. The daemon binds to localhost by default, but if you open it to 0.0.0.0, anyone who can reach your machine can control your browser. Use Tailscale or ZeroTier for safer remote access
Adapter quality varies. Community-driven means broad coverage, but some adapters may lag behind website redesigns
macOS users: watch for IPv6 issues — add --host 127.0.0.1 to the daemon command

When to Use It

bb-browser isn’t for scraping millions of records. Use Scrapy for that.

It’s ideal for:

Giving AI agents web access without applying for API keys one by one
Quickly pulling structured data from platforms you’re already logged into
Cross-platform research — query arXiv, Twitter, GitHub, Zhihu, and StackOverflow in under a minute

One command does what used to require writing a scraper, and it won’t get blocked.

References

AionUi: One Interface for 12+ AI Agents — A Free, Open-Source Cowork Desktop App

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

You’ve got Claude Code installed. Also Codex. Maybe Qwen Code for Chinese-language tasks. Each tool gets its own terminal window, MCP configs are duplicated across tools, and conversation history is scattered everywhere.

AionUi tackles exactly this: one desktop app that brings all your AI agents under a single interface. Free, open-source, Apache 2.0 licensed.

What It Does

AionUi is a cross-platform desktop app built with Electron + React, supporting macOS, Windows, and Linux. Its core purpose is unified management of multiple AI coding agents.

Supported Agents

AionUi auto-detects CLI tools installed on your machine. Currently supported:

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

Over 12 agents total. No extra configuration needed — install the CLI and it shows up in AionUi. If you don’t have any CLI tools installed, AionUi has its own built-in agent that works with Google login or API key authentication.

20+ Model Platforms

Wide model selection:

Major platforms: Gemini, Claude, OpenAI
Cloud: AWS Bedrock
Chinese platforms: Dashscope (Qwen), Zhipu, Moonshot (Kimi), Baidu Qianfan, Tencent Hunyuan, ModelScope
Local models: Ollama, LM Studio

If you’re in mainland China and can’t easily access OpenAI or Claude APIs, just switch to Dashscope or Zhipu. For fully offline work, run Ollama with local models.

Configure MCP Once, Sync Everywhere

This is the most practical design choice. Configure MCP (Model Context Protocol) tools once in AionUi, and all agents sync automatically. No more maintaining separate mcp.json files for each agent — change it in one place, it applies everywhere.

12 Built-in Professional Assistants

AionUi isn’t just an agent launcher. It comes with 12 pre-built assistants:

Assistant	Purpose
Cowork	Automated task execution
PPTX Generator	Presentation creation
PDF to PPT	Format conversion
3D Game	Single-file game prototyping
UI/UX Pro Max	57 styles, 95 color palettes
Beautiful Mermaid	Flowcharts, sequence diagrams
Planning with Files	File-based project planning

The Office features (PPT, Word, Excel) are powered by OfficeCLI, producing editable .pptx, .docx, and .xlsx files — not PDF screenshots. PPT output even supports Morph transition animations.

Scheduled Tasks: 24/7 Automation

This feature is uncommon in agent tools. You can set up scheduled tasks using natural language, like “every morning at 9am, summarize yesterday’s Git commit log.” AionUi converts it to a cron expression and runs it automatically.

Each scheduled task is bound to a conversation, maintaining context. Results are sent back to the conversation window, and can also be pushed to Telegram, Lark (Feishu), or DingTalk.

Preview Panel

AionUi has a built-in file preview supporting many formats:

Documents: PDF, Word, Excel, PowerPoint
Code: 30+ languages with syntax highlighting
Images: PNG, JPG, SVG, WebP, and more
Markup: Markdown and HTML with live editing

It also tracks file changes, shows Git version history, and supports one-click rollback.

WebUI Remote Access

You don’t have to sit in front of your computer to use a desktop app. AionUi can serve a WebUI, accessible via QR code or password login from your phone or another computer. Supports both LAN and cross-network access.

Combined with Telegram, Lark, and DingTalk bot integration, you can send commands to AI agents from your phone and receive results in your chat groups.

Tech Stack

Layer	Technology
Framework	Electron
UI	React
CSS	UnoCSS
Build	Vite
Testing	Vitest + Playwright
Database	SQLite (local)
Language	TypeScript

All data is stored locally in SQLite — nothing gets uploaded to any server. With local models (Ollama), the entire workflow can run completely offline.

Installation

Download the installer for your platform from GitHub Releases. Homebrew is also supported on macOS.

Once installed, just open the app. If Claude Code or Codex is already on your machine, AionUi detects them automatically. Otherwise, use the built-in agent with an API key or Google login to get started.

Compared to Using Claude Code Alone

Claude Code is powerful, but it’s a terminal tool. AionUi doesn’t aim to replace it — it puts Claude Code alongside other agents in one managed workspace.

Key differences:

Multi-agent: Claude Code only runs Claude; AionUi runs multiple agents simultaneously
GUI: Full desktop interface with file preview, Office generation, and image processing built in
Scheduling: Claude Code has no built-in scheduling; AionUi runs tasks 24/7 automatically
Price: Claude Code requires API costs or a $100/month subscription; AionUi itself is free
Model choice: Not locked to one provider — 20+ platforms available

If you’re interested in the AI agent tool ecosystem, I previously wrote about CLI-Anything: A Universal Bridge for AI Agents to Operate Any Software, which approaches the problem from the opposite angle — wrapping existing software as CLIs for agents to call. AionUi takes the agent management perspective instead.

Current State

AionUi is iterating rapidly, with 4,400+ commits on GitHub. The community is active on Discord (English) and WeChat groups (Chinese).

One caveat: while the star count is impressive, Electron apps typically have significant memory overhead. If you only use one agent, running the CLI in a terminal is lighter weight. AionUi’s value shows when you genuinely need multiple agents, want GUI management, or require scheduling and Office generation features.