oJo — HTML to image and PDF

@ojodotso/mcp-server

oJo は HTML テンプレートと JSON データから、REST API、任意の MCP クライアント、またはエディターを通じて、ホストされたリンクから PDF または PNG を生成します。このパッケージは oJo の Model Context Protocol サーバーです。ライブプレビューは無料で、アカウントも必要ありません。oJo API キーを使うと、ユーザー自身のアカウントを通じて、ホストされた PNG と PDF のリンク、および再利用可能なテンプレートを利用できます。トランスポートはローカルの stdio で、API との通信境界は https://api.ojo.so/v1 への HTTP のみです。

ほとんどのクライアントは、何もインストールせずに https://mcp.ojo.so/mcp に直接接続してサインインできます。詳しくは https://ojo.so/docs/mcp-server をご覧ください。このパッケージはローカル版です。

クイックスタート — アカウント不要

MCP クライアントをこのパッケージに接続します。API キーがない場合、サーバーは プレビュー専用モード で起動します。create_preview_link は HTML をライブのフル解像度画像プレビューに変換します。無料で無制限に利用でき、oJo アカウントも必要ありません。

{
  "mcpServers": {
    "ojo": {
      "command": "npx",
      "args": ["-y", "@ojodotso/mcp-server"]
    }
  }
}

claude mcp add ojo -- npx -y @ojodotso/mcp-server

キーの追加

キーを使うと、メールやソーシャルカード、API レスポンスに追加できる永続的な PNG または PDF の URLに加えて、再利用可能なテンプレートも利用できます。https://ojo.so/dashboard/api でキーを作成し、OJO_API_KEY として渡してください。

{
  "mcpServers": {
    "ojo": {
      "command": "npx",
      "args": ["-y", "@ojodotso/mcp-server"],
      "env": { "OJO_API_KEY": "sk_..." }
    }
  }
}

claude mcp add ojo -e OJO_API_KEY=sk_... -- npx -y @ojodotso/mcp-server

Claude Desktop、Cursor、Claude Code でも同様に使用できます。

ツール

API キーなしで登録されるのは create_preview_link のみです。その他のツールは oJo API と通信するため、キーがなくても利用できるようにすると、実行できないツールを提供することになります。

ツール	用途	クレジット	キーが必要
create_preview_link	HTML／Handlebars の下書き用に、無料のフル解像度 /preview リンクを作成します。	—	いいえ
generate_image_from_html	プレーンな HTML（インライン CSS を含む）を PNG に変換し、公開 URL を返します。	1	はい
generate_image_from_template	既存のテンプレートを変換します。modify を使って変数を上書きすることもできます。	1	はい
generate_pdf_from_html	プレーンな HTML（インライン CSS を含む）を最大 100 ページの PDF に変換します。CSS の @page ルールでサイズを指定しない場合は A4 になります。公開 URL、ページ数、消費クレジットを返します。これより長いドキュメントは拒否され、料金はかかりません。	20 ページごとに 1	はい
generate_pdf_from_template	既存のテンプレートを PDF に変換します。modify で変数を上書きすることも、pages を使って複数のテンプレートと HTML から最大 100 ページの PDF を 1 つ作成することもできます。	20 ページごとに 1	はい
list_templates	アカウントで利用できるテンプレートを一覧表示します。	—	はい
get_template	1 つのテンプレートの HTML と変数のデフォルト値を取得します。	—	はい
create_template	プレーンな HTML／Handlebars から再利用可能なテンプレートを作成します。	—	はい
update_template	同じ ID のテンプレートの HTML を置き換え、指定されている場合は変数のデフォルト値も更新します。上書きされるため、API によるレンダリングにはすぐに新しいバージョンが使われます。	—	はい

デザインの反復

create_preview_link で調整を繰り返してから、レンダリングします。このツールは https://ojo.so/preview#draft=… の URL を返します。この URL では、最終的な PNG と 同じエンジン を使い、ブラウザー上で下書きをフル解像度でライブ表示します。下書きは URL の ハッシュ に gzip 圧縮して格納されるため、サーバーには送信されず、保存もされません。リンクは自己完結型で、人間のレビュアーと共有できます。PDF のプレビューにはページ区切りではなく、画面上の表示が示されます。

どちらの画像ツールも inspect: true を受け付けます。この場合、URL とともに幅 512px に縮小したサムネイルを返します。これはレンダリングが成功したことを確認するためのもので、デザイン確認用ではありません。レイアウトやタイポグラフィを評価するには小さすぎます。

ガイダンス用プロンプト

author_ojo_template — Handlebars ヘルパーカタログ、Template Variables（スキーマ／デフォルト値）と Modify Payload（レンダリングごとのデータ）のモデル、ビューポートの規約、プレビューを優先するデザインの反復手順について説明します。

設定

• OJO_API_KEY（任意） — oJo API キーです。設定しない場合、サーバーはプレビューモードのみで動作します。設定すると、すべてのツールが登録されます。
• OJO_API_BASE_URL（任意） — デフォルトは https://api.ojo.so/v1 です。
• OJO_WEB_BASE_URL（任意） — create_preview_link の /preview を提供する Web アプリです。デフォルトは https://ojo.so です。セルフホスト可能な Web アプリを使って開発する場合は、http://localhost:3000 を指定してください。

開発

pnpm install
pnpm build
pnpm test
pnpm check