ClaudeModsClaude Code mod ディレクトリ
☰
● 0 人がオンライン ・閲覧 0 回
+ 作品を投稿
← 作品一覧へ
GitHub リポジトリ · Git・コードレビュー

terminal-browser — Claude Code プラグイン · ClaudeMods

この作品を報告あなたの作品ですか?所有者確認へ

ClaudeMods でこの Claude Code プラグインのソースと必要な権限を確認できます。 terminal-browser:Claude Code内で直接実行されるブラウザ。ウェブサイトのプレビュー、HTMLドキュメントの表示が可能。

zzenbu-labs@zenbu-labs
翻訳済み

この mod について

terminal-browser:Claude Code内で直接実行されるブラウザ。ウェブサイトのプレビュー、HTMLドキュメントの表示が可能。

インストール

terminal-browserをインストール

curl -fsSL https://terminal-browser.sh/install | bash # または brew install terminal-browser

Claude Codeの最新バージョンであることを確認

claude update

~/.claude/settings.jsonに以下を追加してClaude Code UIプラグインを有効化:

{
  "env": { "CLAUDE_CODE_ENABLE_FUNCTION_HOOKS": "1" }
}

terminal-browserプラグインをインストール

# マーケットプレイスを設定
claude plugin marketplace add zenbu-labs/terminal-browser

# プラグインをインストール
claude plugin install terminal-browser@terminal-browser

これでClaude Code内で"/browser"を実行してブラウザを開けます

更新

Claude Codeプラグインを更新

claude plugin update terminal-browser@terminal-browser

terminal-browserを更新

terminal-browser upgrade

設定

terminal-browserプラグインを設定して、Claudeがブラウザを開くために使用できるツールを含めることができます。Claudeはすでにterminal-browser CLIを使用してスプリットペイン経由でターミナル内でブラウザを開くことができるため、これはデフォルトでオフになっています。~/.claude/settings.jsonに以下を追加してツールを有効にできます:

{
  "pluginConfigs": {
    "terminal-browser@terminal-browser": {
      "options": {
        "agentTool": true
      }
    }
  }
}

terminal-browserプラグインAPI

terminal-browserプラグインには、別のClaude Codeプラグイン内でプログラム的にブラウザを開き、URLを読み込むために使用できるAPIが付属しています。これを使用して構築できる便利なプラグインの例:

  • /tldraw スラッシュコマンド:Claude Codeのスプリットペインでtldrawを開く
  • /open-pr スラッシュコマンド:作業中のブランチに関連するPRを開く
export type BrowserOpenInput = { url?: string }

export type BrowserOpenResult =
  | { ok: true; url: string }
  | { ok: false; error: string }

export type Browser = {
  open: (input: BrowserOpenInput) => Promise<BrowserOpenResult>
  close: (input?: Record<string, never>) => Promise<boolean>
}

// 使用法:プラグインのhooksモジュール内
on('command.run', { command: 'tldraw' }, async ($) => {
  const result = await $.browser.open({ url: 'https://www.tldraw.com/' })
  return { text: result.ok ? 'tldrawを開きました' : result.error }
})

どのように動作しますか?

terminal-browserはtを使用します

インストール

まず作者の README で marketplace とプラグイン名を確認してください。コマンドはリポジトリの構成によって変わる場合があります。

claude plugin marketplace add zenbu-labs/terminal-browser
claude plugin install terminal-browser
原文 / README

terminal-browser claude code plugin

This plugin is experimental and does have some known limitations

https://github.com/user-attachments/assets/a79e7667-6fcb-49a4-9967-44d0f942102c

Installation

Install terminal-browser

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

Ensure you are on the latest version of claude code

claude update

Enable claude code UI plugins by adding this to ~/.claude/settings.json:

{
  "env": { "CLAUDE_CODE_ENABLE_FUNCTION_HOOKS": "1" }
}

Install the terminal-browser plugin

# set the marketplace
claude plugin marketplace add zenbu-labs/terminal-browser

# install the plugin
claude plugin install terminal-browser@terminal-browser

Now you can run "/browser" inside claude code to open the browser

Updating

Update the claude code plugin

claude plugin update terminal-browser@terminal-browser

Update terminal-browser

terminal-browser upgrade

Configuration

You can configure the terminal-browser plugin to include a tool that claude can use to open the browser. This is by default off, since claude can already use the terminal-browser CLI to open the browser inside the terminal through a split pane. You can enable the tool by adding the following to your ~/.claude/settings.json:

{
  "pluginConfigs": {
    "terminal-browser@terminal-browser": {
      "options": {
        "agentTool": true
      }
    }
  }
}

terminal-browser plugin API

The terminal-browser plugin comes with an API you can use within another claude code plugin to programatically open the browser and load a URL. Some examples of useful plugins you can build with this are:

  • /tldraw slash command that opens tldraw in the claude code split pane
  • /open-pr slash command that opens the PR associated with the branch you are working on
export type BrowserOpenInput = { url?: string }

export type BrowserOpenResult =
  | { ok: true; url: string }
  | { ok: false; error: string }

export type Browser = {
  open: (input: BrowserOpenInput) => Promise<BrowserOpenResult>
  close: (input?: Record<string, never>) => Promise<boolean>
}

// usage: in your plugin's hooks module
on('command.run', { command: 'tldraw' }, async ($) => {
  const result = await $.browser.open({ url: 'https://www.tldraw.com/' })
  return { text: result.ok ? 'Opened tldraw' : result.error }
})

How does it work?

terminal-browser uses the kitty graphics protocol to display pixels generated by a real browser inside the terminal. To display the browser inside claude code, we use claude codes new function hooks API.

terminal-browser's internals have been extracted to a javascript library - https://github.com/zenbu-labs/terminal-browser/tree/main/pixel - if you would like to build your own graphical application inside claude code/the terminal

Supported terminals

The terminal-browser claude code plugin will only work in terminals that support the kitty graphics protocol, and implement kitty unicode placeholders. The most popular terminals that support this feature are:

If your terminal does not support the required features, trying to open the browser inside claude code may garble the TUI

In addition any terminals that are built on libghostty will support this feature, some examples are:

You can find more libghostty based terminals here: awesome-libghostty

Even if your terminal supports the required graphics feature, if you are running a multiplexer, the plugin may not work. This is because multiplexers rewrite the output of terminal programs and breaks terminal graphics commands. tmux support will be arriving soon (terminal-browser currently works in tmux, just not through the claude code plugin yet), and within herdr performance is very bad when running through the claude code plugin, but will likely improve soon. Other multiplexers I have not tested, so if it does not work please file an issue and I will see if we can support this.

Caveats:

  • depends on your terminal supporting the kitty graphics protocol
  • the mouse position will sometimes be slightly off, since claude code does not enable pixel coordinate mouse reporting
  • the plugin needs to make fetch requests to a local http server to communicate with the terminal-browser CLI, which may cause a prompt to show in your OS that your terminal wants to access the local network
  • claude code sets a very high min width for the chat area, so its sometimes not possible to resize the browser to the size you want
  • the plugin depends on the experimental function hooks claude code API, which is unstable, so the plugin may break between releases
元のソースを見る ↗

関連作品