anochan

annotation channel — Browser annotations for coding agents

ブラウザ上のUIへの「ここ直して」を、そのままCoding Agentの作業単位にするサービスです。 Chrome拡張で画面上の要素にコメントを付けると、Claude CodeなどのAgentがMCP経由で取得し、 あなたのローカルにあるコードを修正してresolveします。

Browser → annotation → anochan → MCP → Coding Agent → Source Code

使い方

1. Chrome拡張を入れてログイン

リポジトリをcloneしてビルドします（mise が必要です）。

git clone https://github.com/funwarioisii/anochan
cd anochan && mise install && mise build:ext

chrome://extensions → 開発者モードON → 「パッケージ化されていない拡張機能を読み込む」でリポジトリ直下の out/ を選択。

拡張のオプションを開き「GitHubでログイン」。接続先はデフォルトでこのサーバを向いています。

2. Coding Agentを接続

Claude Code:

claude mcp add --transport http anochan https://anochan.wakos.cc/mcp

初回は対話型セッションで /mcp → anochan → Authenticate でブラウザログインします。

claude.ai: Settings → Connectors に https://anochan.wakos.cc/mcp を追加（ブラウザ内でログインまで完結します）。

3. 赤入れ → 修正

Agentに「anochanを開始して」と頼むとchannel（ch_xxx）が作られます。 拡張のpopupから対象タブをそのchannelへ接続し、注釈モードで画面の気になる箇所をクリックしてコメント。

Agentに「anochanのコメント直して」と頼むと、annotationを取得してコードを修正し、resolveします。 ブラウザ側のバッジも数秒でresolvedに変わります。

Endpoints

用途URL
MCP（Coding Agent向け）https://anochan.wakos.cc/mcp
REST API（Chrome拡張向け）https://anochan.wakos.cc/api/*

認証はOAuth（GitHubログイン）。anochanはあなたのソースコードを保存しません。保存されるのはannotationとDOM contextだけで、アカウント削除でいつでも全消去できます。