Giting.
낮의 Giting

홈 · Claude Code 플러그인 · 터미널 브라우저 · function hooks · UI 서피스 · TypeScript · MIT

terminal-browser 대표 이미지 22704b2 (2026-09-19, 전체 221커밋)
분석 리포트실측 정보사이트적용점원문 README

터미널 안에 진짜 브라우저

이름 그대로다. 터미널 안에서 도는 브라우저(★3,138, TS+React, MIT). 그런데 우리가 볼 건 본체가 아니라 딸려 있는 claude-code-plugin 이다.

Claude Code 가 /browser 로 연다

설치는 marketplace 한 줄이다.

claude plugin marketplace add zenbu-labs/terminal-browser
claude plugin install terminal-browser@terminal-browser

그러면 Claude Code 안에서 /browser 로 분할 페인에 브라우저가 뜬다. 핵심은 이게 Claude Code 의 새 함수 훅(CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1)을 써서 CLI 안에 인터랙티브 UI 서피스를 렌더한다는 점이다. hooks/register.tsx(11.6KB)·surface.tsx·bridge-protocol.ts 가 CC 와 브라우저를 잇는다. 지금까지 CC 플러그인은 대개 커맨드나 스킬이었는데, 이건 실제 '화면'을 붙인다.

원하면 agentTool: true 로 Claude 자신이 브라우저를 여는 도구를 갖게 할 수도 있다(기본은 off: 사람이 /browser 로 연다).

실험적이라는 걸 알고 쓴다

저장소가 스스로 못박는다. 실험적이고, 알려진 한계가 있다. 실측도 같은 방향이다. 21,192줄에 테스트는 2개, CI 1개고, 최신 Claude Code 와 함수 훅 플래그가 전제다. 지금 업무에 의존할 도구는 아니다.

우리 독자에게

Claude Code 사용자라면 시도 비용이 낮은 재미있는 실험이다. 창을 떠나지 않고 문서·미리보기를 본다. 그리고 플러그인을 만드는 사람에겐 더 큰 값이 있다. CC 함수 훅으로 인터랙티브 서피스를 임베드하는 초기 배선 표본. 커맨드가 아니라 '화면'을 붙이려는 사람은 register.tsx 와 bridge-protocol.ts 를 먼저 보라. 판정은 참고용이다.

실측 정보

HEAD 커밋
22704b2 (2026-09-19, 전체 221커밋)
무엇
terminal-browser = 터미널에서 도는 브라우저(TS+React, 별 3,138). claude-code-plugin = 이걸 Claude Code 안에서 `/browser` 로 여는 플러그인. 설치: `claude plugin marketplace add zenbu-labs/terminal-browser` → `claude plugin install`
핵심(왜 흥미로운가)
Claude Code 의 새 기능 **함수 훅**(`CLAUDE_CODE_ENABLE_FUNCTION_HOOKS=1`)으로 CLI 안에 **인터랙티브 UI 서피스**를 렌더한다. hooks/register.tsx(11.6KB)·surface.tsx·bridge-protocol.ts 로 CC↔브라우저를 잇는다. '터미널 브라우저'보다 'CC 가 앱을 임베드하는 초기 표본'이라는 게 값
두 가지 모드
① `/browser` 슬래시 커맨드(기본): 사용자가 분할 페인으로 연다. ② `agentTool: true`(옵션, 기본 off): Claude 가 직접 브라우저를 여는 도구를 갖는다
규모 / 실측
전체 21,192줄 · TS 8,836 + React 5,563 · 142파일 · 221커밋 · 7인. 플러그인 자체는 훅 8파일로 얇다
성숙도
⚠️ README 가 스스로 '실험적, 알려진 한계 있음'이라 명시. 테스트 2 · CI 1. 최신 Claude Code + 함수 훅 플래그가 전제
라이선스
MIT (Copyright 2026 Zenbu Labs)

사이트 실측

주소
terminal-browser.com
응답 · 첫 화면
200 · 1.2초 (데스크톱)
요청 · 전송량
16개 · 259KB
깨진 요청 · 콘솔 오류
0개 · 0개
폰(390px)
가로 넘침 없음
디자인
밝은 화면

홈페이지를 실제 크롬으로 띄워 첫 화면까지만 쟀습니다(2026-10-16 · 데스크톱 1440px · 폰 390px). 로그인 · 입력 같은 동작은 하지 않았고, 사이트 상태는 리포 품질과 따로 봅니다. 색 칸은 바탕 · 면 · 글자 · 흐린 글자 · 강조 · 선, 점선은 「못 잼」.

적용점

  • 이럴 때 유용Claude Code 로 작업하다 브라우저를 자주 오가는 사람. `/browser` 로 창을 떠나지 않고 분할 페인에서 문서·미리보기·검색을 본다. 에이전트가 결과를 눈으로 확인해야 하는 흐름이면 agentTool 옵션으로 Claude 가 직접 열게 할 수도 있다. 설치가 marketplace 한 줄이라 시도 비용이 낮다.
  • 이럴 땐 부적합안정적으로 '의존'할 도구를 찾는다면 이르다. 저장소가 스스로 실험적이라 밝히고 알려진 한계가 있다. 최신 CC + `CLAUDE_CODE_ENABLE_FUNCTION_HOOKS` 플래그가 필요하고, 테스트 2 라 회귀 방어가 얇다. 헤드리스 자동화(스크래핑)용 브라우저를 찾는 거라면 방향이 다르다. 이건 사람이 보는 UI 다.
  • 먼저 볼 것플러그인을 만드는 사람에게 값은 '터미널 브라우저'가 아니라 **CC 함수 훅으로 인터랙티브 서피스를 임베드하는 방법**이다. hooks/register.tsx 와 bridge-protocol.ts 가 CC ↔ 외부 앱을 잇는 배선의 초기 표본이다. Claude Code 플러그인에 단순 커맨드가 아니라 '화면'을 붙이려는 사람은 여기서 패턴을 훔칠 수 있다.
◈ 참고용

판정은 참고용이다. 먼저 이게 왜 눈길을 끄는지부터, 표면은 '터미널 안 브라우저'지만, 진짜 새로운 건 claude-code-plugin 이 Claude Code 의 새 함수 훅으로 CLI 안에 인터랙티브 UI 를 띄운다는 점이다. 지금까지 CC 플러그인은 대개 커맨드·스킬이었는데, 이건 register.tsx·surface.tsx·bridge-protocol.ts 로 실제 '화면'을 임베드한다. CC 로 앱을 확장하려는 사람에겐 초기 배선 표본으로 값이 있다. 접근성도 좋다. marketplace 한 줄 설치, MIT, `/browser` 한 줄 사용, agentTool 로 에이전트에 노출하는 선택지까지. 다만 실측과 저장소 자신이 성숙도를 낮춘다. README 가 대놓고 '실험적이고 알려진 한계가 있다'고 적었고, 21,192줄에 테스트가 2개뿐이며, 최신 Claude Code 와 함수 훅 플래그라는 전제가 붙는다. 즉 지금 당장 업무에 '도입'해 의존할 물건이 아니라, 지금 깔아 보고 CC 의 UI 훅이 어디까지 가능한지 감을 잡을 표본이다. 그래서 참고용: 우리 독자(Claude Code 사용자)에게는 시도 비용이 낮은 재미있는 실험이고, 플러그인 제작자에게는 임베드 서피스의 조기 참고감이다.

원문 README

아래는 zenbu-labs/terminal-browser 저장소의 README 원문입니다(GitHub 렌더, 수집 시점 기준). 저작권은 원 프로젝트에 있으며 원 저장소의 라이선스를 따릅니다. GitHub에서 보기

README 전문 펼치기

terminal-browser

A real browser that runs inside your terminal

CleanShot.2026-07-29.at.10.31.38.mp4

Installation

curl (macOS & Linux):

curl -fsSL https://terminal-browser.sh/install | bash

Note: Run terminal-browser upgrade to upgrade versions

Homebrew

brew install terminal-browser

Claude code plugin

Install instructions here

Usage

terminal-browser # launches the browser
terminal-browser open <url> # opens the browser at a url
terminal-browser --split right # opens the browser in a split pane to the right
terminal-browser open --ssh <user@host> <url> # performs all network requests through a remote server
terminal-browser ls # lists open browsers
terminal-browser action # an agent-browser compatible cli for interacting with open terminal-browsers
terminal-browser upgrade # upgrade to the latest version

Use cases:

  • You can have a coding agent and website scoped to the same terminal tab
  • Your agent has full access to interact with open terminal-browsers, which gives your agent the capability to use the web
  • You can ask an agent to make HTML plans and then open them inside terminal-browser, which will automatically open in a split pane next to your agent
  • terminal-browser works over SSH, which allows you to preview websites running on remote machines easily

Shortcuts

Action macOS Linux
Quit ctrl+q or ctrl+c ctrl+q
New tab cmd+t ctrl+t
Edit URL cmd+l ctrl+l
Command palette cmd+p ctrl+k or alt+k
Find in page cmd+shift+f ctrl+shift+f
Next / previous match enter / shift+enter enter / shift+enter
Reload cmd+r ctrl+r
Back / forward cmd+[ / cmd+] or ctrl+[ / ctrl+] ctrl+[ / ctrl+]
Zoom in / out / reset your terminal's zoom keybind your terminal's zoom keybind
Devtools cmd+shift+i or f12 ctrl+shift+i or f12
Devtools console cmd+alt+j ctrl+alt+j
Copy / paste / cut cmd+c / cmd+v / cmd+x ctrl+c / ctrl+v / ctrl+x
Record page (start/stop) ctrl+r ctrl+shift+r
Complete recording review ctrl+enter ctrl+enter
Start element selection (send to agent) ctrl+g ctrl+g
Close popup / overlay escape escape

How does it work?

Terminals that support the kitty graphics protocol, including ghostty, kitty, cmux, vscode and many more, allow a program running in a terminal to display pixels in your terminal. We use this capability to display pixels generated by chromium.

We use electrons offscreen rendering API to read pixels generated by chromium directly from the GPU. This allows terminal-browser to render smoothly without dropping any frames.

After the browser engine starts and is displaying pixels in the terminal, it needs to be able to read user input for websites to actually work. terminal-browser listens to mouse clicks, mouse position, and keyboard events from the terminal, and then sends synthetic events to chromium based on that data. For any user input events that are not retrievable from the terminal, we read directly from the operating system using a background swift app to listen for input events (non intrusively). This is what allows terminal-browser to implement smooth scrolling, and listen to trackpad events (websites with infinite canvases work great inside terminal-browser!)

The outer UI of the browser is implemented using a graphics engine built on top of rust. The actual UI is defined inside react with a custom react renderer, which allows us to build the UI for the browser using typescript. The UI of the outer browser and the browser content itself is all drawn to the same shared canvas inside the rust engine, which allows us to layer UI on top of the browser.

The underlying logic described here has been abstracted into a javascript library that you can use to build your own graphical applications in the terminal - https://github.com/zenbu-labs/pixel

SSH

The recommended way to use terminal-browser over ssh is running terminal-browser --ssh <ssh arguments>.

The alternative is running terminal-browser directly on the machine you are shh'd into. This will work, but:

  • requires every single frame drawn by the website to be sent over the network
  • all user input must be sent over the network before a website can react
  • misses out some extra optimizations

terminal-browser --ssh improves on this by running the website on your local device, and simply proxying all network requests made by the browser via the remote machine over ssh. This means you can load any website running on localhost of the remote machine on your local device.

Embedded mode

terminal-browser supports embedding inside of existing TUIs. See examples/embedded for a reference implementation

Roadmap

  • linux support ✅
  • chrome extensions
  • design mode

Contributing

  • PR descriptions must be authored by humans and explained well, otherwise we will close them
  • When making a PR, the motivation must be clearly defined in the description
  • Minimize the size of your PR for the best chance to get it landed

To get a local development setup of terminal-browser, the recommended way is to ask a coding agent.

Adding enhanced support for a new terminal

terminal-browser's cli includes sub commands that rely on terminal/multiplexer scripting features. To implement support for a terminal/multiplexer not yet supported, reference existing implementations located here https://github.com/zenbu-labs/terminal-browser/tree/main/terminals/src/terminals

Acknowledgments

  • the kitty project for developing the kitty graphics protocol
  • awrit - the first attempt to embed chromium inside a terminal

의견

판정에 대한 반론, 도입 경험, 정정 제보를 환영합니다. GitHub 계정으로 참여합니다.

이것도 재봤습니다

전체 리포트 →