Harie

@harie/mcp

English | 日本語

Harie ファイルを読み書きするためのローカル MCP サーバー（stdio）です。スクリーンショットは通常の JPEG／PNG 画像として保存され、注釈（ボックス、矢印、吹き出し、テキスト）は保存後も編集できます。 Claude などの MCP クライアントから、「保存ボタンを赤いボックスで囲んで」や「この吹き出しの文言を修正して」といったリクエストを処理できます。

Harie は、SaaS のユーザーガイド用スクリーンショットに注釈を付けるツールです。Harie ファイルはどの画像ビューアーでも通常の画像として開くことができ、Harie で再度開いて注釈を何度でも編集できます。

サーバーが LLM を呼び出すことはありません。クライアントの LLM が画像を見て注釈を決定し、サーバーはファイルの読み取り、書き込み、レンダリングのみを行います。

ツール

ツール	機能
harie_open	ファイルを開き、注釈（吹き出しのテキストを含む JSON）と画像を返します。通常の画像の場合は status: plain を返します
harie_create	通常の JPEG／PNG から Harie ファイルを作成します（デフォルトは <name>.harie.<ext>。元のファイルは保持されます）。format（jpeg／png）で出力形式を選択します
harie_preview	注釈の変更（ops）を適用した画像を返します。ファイルは変更されません
harie_edit	注釈の変更を適用し、再レンダリングしてファイルを上書きします。expectedRevision による楽観的ロックが利用できます
harie_list	ディレクトリ内の Harie ファイルを一覧表示します
harie_mask	個人情報をベース画像に焼き付けて隠します（元に戻せません）。confirm: true の場合にのみ保存し、それ以外の場合はマスク処理した画像だけを返します
harie_replace_base	注釈を保持したまま、新しいスクリーンショットで画像を置き換えます（画面が変わった場合に使用します）。サイズが異なる場合は、注釈を拡大・縮小して合わせます。古い画像のマスクは引き継がず、その範囲を previousPii として返します

harie_open、harie_edit、harie_replace_base では image: false を指定して、画像を省略し JSON のみを返すことができます。画像はクライアントのコンテキストを大きく消費するため、テキストの読み取りや書き換えだけを行う場合に使用してください。

サーバーがアクセスできるのは、--root で指定したディレクトリ内のファイルのみです（デフォルトは現在のディレクトリ）。harie_mask はベース画像を書き換えるため、保存後は変更を元に戻せません。元のファイルを保持するには、別のファイルに outPath で保存してください。

セットアップ

Node.js 22 以降が必要です。npx を使って npm から @harie/mcp を起動します。

Claude Code

claude mcp add harie -- npx -y @harie/mcp --root ~/Pictures/guides

Claude Desktop（claude_desktop_config.json）

{
  "mcpServers": {
    "harie": {
      "command": "npx",
      "args": ["-y", "@harie/mcp", "--root", "/Users/you/Pictures/guides"]
    }
  }
}

リポジトリから実行（開発用）

pnpm install
pnpm build   # produces apps/mcp/dist/index.mjs and dist/fonts/
claude mcp add harie -- node /path/to/harie/apps/mcp/dist/index.mjs --root ~/Pictures/guides

ガイドプロンプト（harie_guide）

サーバーには、harie_guide というプロンプトが付属しています（引数：path、省略可能な intent）。ウェブエディターの AI 提案と同じルールが適用されます。強調表示する UI 要素（説明に必要なものだけ、最大 8 個、操作順）、各吹き出しの書き方（読者が何をするかを伝える 1～2 文。機能を捏造したり、個人情報をコピーしたりしない）、レイアウトルール（各ステップにボックス、番号バッジ、矢印がボックスを指す吹き出しを配置する。バッジは常にボックスの左上の外側に置き、UI 要素に重ねない。ボックスへの anchor を持つバッジは自動的にその位置に配置される）、およびこれらのツールを使った手順（開く → 個人情報をマスクする → ボックスと番号バッジ、アンカー付き吹き出しを追加する → プレビューする → 保存する）が含まれます。Claude Code では /mcp__harie__harie_guide として表示されます。同じルールの簡易版もサーバーの instructions として送信されるため、プロンプトがなくても、これを読み取るクライアントはルールに従います。

プロンプトの例

• 「settings.png を Harie ファイルに変換し、保存ボタンを赤いボックスで囲んで、『ここをクリックして保存』という吹き出しを追加してください。」
• 「guides/ 内の Harie ファイルを一覧表示し、タイトルがないファイルにタイトルを追加してください。」

ツールの説明は現在、日本語を優先しています。注釈テキストには、日本語、英語、韓国語、中国語（簡体字・繁体字）、および同梱フォントが対応するその他の言語を使用できます。

開発

• src/tools.ts：ツールの実装。src/server.ts：MCP の登録と入力の検証。src/paths.ts：ルート外へのアクセスを防止します。
• テスト（pnpm test）では、SDK の InMemoryTransport を介してクライアントを接続し、実際にツールを呼び出します。
• このパッケージには、Noto Sans JP の Regular／Bold ウェイトに加えて、注釈で使用された場合にのみ読み込まれる Noto Sans KR（ハングル）と Noto Sans SC（Noto Sans JP に含まれない文字）のサブセットが含まれています（scripts/copy-assets.mjs。ライセンスは dist/fonts/OFL.txt にあります）。

ライセンス

MIT。バンドルされているフォント（Noto Sans JP／KR／SC、Regular／Bold）は、SIL Open Font License 1.1（dist/fonts/OFL.txt）に基づいてライセンスされています。