Doodleworks MCP

Doodleworks MCP

ブログ投稿、記事、X の投稿など、どんなアイデアでも、要点を説明する手描きの「Tinku」イラストに変換し、AI ホスト内で表示します。

_{画像 API キー（OpenAI または Gemini）はご自身で用意してください · ローカルの stdio サーバー · ホストのチャット内でページをめくり、再生成し、ダウンロードできます。}

クイックスタート · ホストに追加 · 使い方 · パラメーター · ビューアー · 例 · 設定 · ソースからビルド · 仕組み

Doodleworks は、1つのアイデア（またはブログ投稿、記事、X の投稿全体）を、要点を説明するすっきりとした線画に変換します。1枚につき1つのアイデアを描きます。テーマをそのまま描くことはありません。代わりに、それぞれのコンセプトを取り出し、アプリ独自のキャラクターである Tinku が実際に操作する、ローテクな仕掛けとして表現し直します。真っ白な背景に自信に満ちた黒い線を描き、赤、オレンジ、青の手書きラベルを少し添えます。 AI ホストにイラスト一式を依頼すると、Doodleworks がそれらを描画し、チャット内にインタラクティブビューアーを直接開きます。画像を順に表示したり、気に入らない画像を再生成したり、PNG をダウンロードしたりできます。

_{Claude Desktop のインタラクティブビューアー：イラストを順に表示し、画像を再生成して、PNG をダウンロードできます（タイトルを任意で焼き込めます）。}

✨ 主な特徴

• 🖐️ 手描き風で、1 枚につき 1 つのアイデア： 白地にすっきりとした黒い線画と、赤／オレンジ／青のラベルを少しだけ使用します。文字どおりのグラフや図にはしません。
• 🧩 クリップアートではなく、概念を表現： 重要なアイデアをそれぞれ、アプリの定番キャラクターである Tinku が実際に操作する、ローテクな仕掛けとして描きます。
• 🖼️ チャット内のインタラクティブビューアー： 対応ホストでは、チャット内でイラストを表示したり、ズームしたり、画像を 1 枚ずつ再生成したり、PNG をダウンロードしたりできます。
• 🔑 自分のキーを使用： OpenAI または Gemini に対応しています。キーはサーバー側に保持され、ビューアーや iframe に送信されることはありません。
• ⚡ インフラ不要： npx の 1 行で起動するローカル stdio サーバーです。クローンも、ビルドも、データベースも不要です。

🚀 クイックスタート

クローンもビルドも不要です。npx が公開済みの doodleworks-mcp パッケージを npm から取得して実行します。描画には画像 API キーが必要ですが、インストールだけなら不要です。

1. 画像キーを取得します。 次のいずれか 1 つを使用します。

• OPENAI_API_KEY：OpenAI GPT Image（デフォルトのプロバイダー）
• GEMINI_API_KEY（または GOOGLE_API_KEY）：Gemini 3 Pro Image（「Nano Banana Pro」）

初めての方は、OPENAI_API_KEY から始めてください。デフォルトであり、以下のすべての例もこれを使って生成しています。設定するキーは 1 つだけでよく、両方は必要ありません。

2. AI ホストに追加します。 次の内容をホストの MCP 設定に追加します（ここでは Claude Desktop の claude_desktop_config.json を示しています。その他のホストについては、AI ホストに追加するをご覧ください）。

{
  "mcpServers": {
    "doodleworks-mcp": {
      "command": "npx",
      "args": ["-y", "doodleworks-mcp"],
      "env": { "OPENAI_API_KEY": "sk-..." }
    }
  }
}

3. 普通の言葉で依頼します。 ホストを再起動してから、次のように入力します。

doodleworks を使って、住宅所有者向けに、ヒートポンプが家を暖める仕組みを説明するイラストを、1 枚につき 1 つのアイデアで 6 枚作成してください。

ヒント

各イラストのプロンプトはモデルが作成します。トピックを説明するだけでかまいません。グラフィカルホストではギャラリーとともにビューアーが開きます。ターミナルホストではツールの出力のみが表示されます（描画済み画像ではなく、テキストの概要です）。

🔌 AI ホストに追加する

Doodleworks は MCP App で、ツールとインタラクティブ UI の両方を提供します。以下のすべてのホストでツールを実行できますが、インラインビューアー（このアプリの主な機能）が表示されるのは、MCP Apps UI に対応したホストのみです。

ヒント

インラインビューアーを使いたい場合は、 Cursor、VS Code、Claude Desktop、または Goose を使用してください。Claude Code と Windsurf ではツールを実行できますが、ビューアーは表示できません（ツールの出力が表示されます）。

メモ

以下のすべての設定では公開済みパッケージ（npx -y doodleworks-mcp）を使用するため、クローンもビルドも不要です。手元にチェックアウトしたコードを編集する場合は、コマンドを npx -y tsx /ABSOLUTE/PATH/doodleworks-mcp/main.ts --stdio に置き換えてください（ソースからビルドするを参照）。エクスポートした画像キーを使用してください。

{
  "mcpServers": {
    "doodleworks-mcp": {
      "command": "npx",
      "args": ["-y", "doodleworks-mcp"],
      "env": { "OPENAI_API_KEY": "${env:OPENAI_API_KEY}" }
    }
  }
}

{
  "inputs": [
    { "type": "promptString", "id": "openai-api-key", "description": "OpenAI API key", "password": true }
  ],
  "servers": {
    "doodleworks-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "doodleworks-mcp"],
      "env": { "OPENAI_API_KEY": "${input:openai-api-key}" }
    }
  }
}

extensions:
  doodleworks-mcp:
    type: stdio
    name: doodleworks-mcp
    enabled: true
    cmd: npx
    args: ["-y", "doodleworks-mcp"]
    envs:
      OPENAI_API_KEY: "sk-..."
    timeout: 300

{
  "mcpServers": {
    "doodleworks-mcp": {
      "command": "npx",
      "args": ["-y", "doodleworks-mcp"],
      "env": { "OPENAI_API_KEY": "sk-..." }
    }
  }
}

claude mcp add --scope project --transport stdio --env OPENAI_API_KEY=sk-... \
  doodleworks -- npx -y doodleworks-mcp

{
  "mcpServers": {
    "doodleworks-mcp": {
      "command": "npx",
      "args": ["-y", "doodleworks-mcp"],
      "env": { "OPENAI_API_KEY": "sk-..." }
    }
  }
}

pnpm start    # watch-build the viewer + serve on http://localhost:3001/mcp

サーバーを接続したら、ホストに普通の言葉で頼むだけです。モデルがツールを呼び出して、各イラストの prompt も作成するので、自分で書く必要はありません。

プロンプトの例（接続済みの任意のホストに貼り付けます）：

doodleworks を使って、ヒートポンプが家を暖める仕組みを説明するイラストを6枚作成してください。対象は住宅所有者で、画像1枚につきアイデアを1つにしてください。

まず計画を立てたい場合：同梱のプロンプトを呼び出します（MCP プロンプトを /mcp__doodleworks-mcp__plan_illustrations として表示するホストで利用できます）。

トピック「ヒートポンプが家を暖める仕組み」（対象：住宅所有者、枚数：6）について、doodleworks の plan_illustrations プロンプトを実行し、その後、計画を使って create_illustrations を呼び出してください。

グラフィカルホスト（Cursor、VS Code、Claude Desktop、Goose）では、ギャラリーとともにビューアーが開きます。Claude Code（ターミナル）にはビューアーがないため、ツールの出力（レンダリングされた画像ではなくテキストの概要）のみが表示されます。

通常の使い方では、モデルがリクエストからこれらの値を設定します。JSON を手書きする必要はありません。ただし、自然な言葉で指定して調整できます（「21:9 のヒーロー画像にして」「高品質にして」「glp-00 スタイルを使って」「2k で描画して」など）。呼び出しごとの値は、環境のデフォルト値より優先されます。

create_illustrations（セット全体）

イラストごとの設定（illustrations[] 内の各項目）

plan_illustrations（計画プロンプト）

メモ

styleReference は次の順序で解決されます。イラストごとの設定 → セット全体の設定 → DOODLEWORKS_STYLE_REF env → なし。quality は セット全体の設定 → DOODLEWORKS_QUALITY env → low の順に解決されます。スタイル参照をどこにも指定しない場合、Doodleworks は組み込みのテキストのみのスタイルガイダンスに基づいて描画します。ツールから指定された styleReference には制限が適用され、ライブラリ ID、データ URI、または assets/style-references/ 内のファイルを指定する必要があります。ディスク上の別の場所を指定できるのは、オペレーターが設定した DOODLEWORKS_STYLE_REF env のみです。ビューアーの Regenerate ボタンは 1 枚のイラストを再描画し、プロンプトを変更しない限り、セットの解像度、品質、スタイルを再利用します。

🖼️ ビューアー

セットのレンダリングが完了すると、チャット内でビューアーが開きます。すべての操作が可能です。

• 閲覧： 前へ／次へボタンまたはサムネイル一覧で切り替えます。オプションの21:9のヒーロー画像が先頭に表示され、16:9のヒント画像が続きます。
• レンダリングしながら表示： 各イラストは完成した時点で表示されるため、セット全体が完成するまで待つ必要はありません。
• 拡大： イラストをクリックすると拡大できます。
• 再生成： 画像モデルの出力は非決定的なため、クリックひとつでイラストを1枚だけその場で再生成できます（セット全体をやり直す必要はありません）。
• ダウンロード： PNGを1枚、またはセット全体を保存できます。Title on PNGにチェックを入れると、作品の下にタイトルをきれいなキャプション帯として埋め込みます。
• ホストに合わせて表示： ホストのライト／ダークテーマとフォントが適用されます。

_{拡大表示：イラストをクリックすると拡大できます。}

🎨 例

以下の各セットは、ひとつのトピックからDoodleworksで生成されました。各パネルにひとつのアイデアを取り上げ、それぞれをTinkuが操作する仕掛けとして描き直しています。（セット全体はassets/style-references/にあります。）

Mounjaro / GLP‑1：患者向けガイド

チルゼパチド（GLP‑1/GIP薬）の仕組みを、初回の注射から用量や副作用まで解説し、難解な薬の説明書を平易な英語の9枚のイラストにしています。描画スタイルの参考例であり、医療上の助言ではありません。

ひと目でわかる概要：2型糖尿病と減量のための週1回の注射薬。

減量：食欲を抑えて満腹感を高め、食べる量を減らします。

服用を忘れた場合：分岐器のように、4日以内ならすぐに注射し、それを過ぎていたら1回分を飛ばします。

深刻な兆候：助けを求めるべきことを知らせる警報です。

ニコチン代替療法

ニコチンそのものが有害なのではない理由、NRTの剤形、そして渇望を抑える仕組みを解説します。

誤解と害の真相：ニコチンは毒ではなく、有害なのはタールや毒素です。

剤形：パッチ、ガム、トローチ、スプレー、吸入器。

渇望を抑える：ゲージを安定させます。

自動で手入れされるナレッジWiki

雑然とした情報源を、モデルが整理して管理する、相互にリンクされたWikiに変換します。大規模なRAGを使わずに、質問と回答を実現します。

コードを減らし、知識を増やす：生のソースを整理された Wiki にまとめます。

自動で手入れ：モデルが自ら内容を整理するため、手間がかかりません。

蓄積されます：時間とともに出力が蓄積していきます。

.NET AI スタック

.NET AI ライブラリを解説します。苦労の多かった初期の時代、多数のインターフェースを支える単一の基盤、そしてツールを呼び出すエージェントについて紹介します。

苦労の多かった始まり：手作業で組み立てた脆い実装に、約200行が必要でした。

1つの基盤：1つのソケットパネルから多数のインターフェースが生まれます。

ツールを使うエージェント：ロボットが有孔ボードからツールを選びます。

⚙️ 設定

すべての設定は環境変数で行います（ホストの env ブロックで設定してください）。必要なのは画像キーのみです。

重要

画像キーはサーバーの環境変数から読み込まれ、サーバー側でのみ使用されます。ツールの結果に含めたり、ビューアーに送信したり、iframe に公開したりすることはありません。ホストの env ブロックまたはシェルに設定し、コミットするファイルには記載しないでください（.env は gitignore 対象で、自動的には読み込まれません。サーバーは process.env を直接読み取ります）。

🛠️ ソースからビルド

コントリビューション、Tinku の開発、または開発用ビューアーのインスペクターを実行する場合に使用します。Node.js 22+ と pnpm が必要です。ビルドやテストに API キーは不要ですが、レンダリングには必要です。

git clone https://github.com/SalZaki/doodleworks-mcp.git
cd doodleworks-mcp
pnpm install
pnpm build      # type-checks + bundles the viewer into dist/mcp-app.html
pnpm test       # offline test suite (~1s, no API calls)

公開済みパッケージではなく、チェックアウトしたソースをホストで使用するには、ホスト設定のコマンドを次のように置き換えます。

"command": "npx",
"args": ["-y", "tsx", "/ABSOLUTE/PATH/doodleworks-mcp/main.ts", "--stdio"]

/ABSOLUTE/PATH/doodleworks-mcp をクローン先の実際のパスに置き換えてください（リポジトリ内で pwd を実行して確認できます。Windows ではバックスラッシュを2つ重ねた C:\\path\\to\\doodleworks-mcp を使用してください）。

警告

ホストでローカルのチェックアウトを指定する前に、必ず pnpm build を実行してください。ホストはビルド済みのビューアー（dist/mcp-app.html）を配信します。バンドルがない、または古いことが、ビューアーが表示されない最大の原因です。変更をすぐに反映しながら開発するには、pnpm start を使用してください（変更時に監視ビルドして再起動します）。

テストファーストのワークフロー、Tinku の同期ゲート、ブランチとコミットの規約については、CONTRIBUTING.md を参照してください。

🧩 仕組み

host LLM ── create_illustrations(illustrations[]) ─▶ server: render × N  (OpenAI / Gemini, your key)
   model sees: 1-line summary ◀── content (no bytes)         cache.set(setId, …)
   viewer sees: { setId, metadata } ◀── _meta["doodleworks/set"]
   viewer ── get_illustration({ setId, index }) ─▶ one image per result ─▶ iframe gallery

✅ ステータスと検証

個人向けの実験的なティアですが、動作します。pnpm install && pnpm build && pnpm test は正常に完了します（オフラインのテストスイートで、API 呼び出しはありません）。CI では Node 22 および 24 と pnpm 10.34.3 で、ビルドとテストが再実行されます。実際の openai / @google/genai による画像生成はテストの対象外です。SDK をアップグレードした後は、一度実際に生成して確認してください。

🤝 コントリビューションとセキュリティ

• CONTRIBUTING.md：開発環境のセットアップ、テストファーストのワークフロー、Tinku の同期チェックについて説明します。
• SECURITY.md：脆弱性を非公開で報告する方法を説明します。
• CHANGELOG.md：主な変更点を記載しています。

☕ プロジェクトを支援する

Doodleworks は無料で、私の空き時間にメンテナンスしています。役に立った場合、コーヒーを差し入れていただけると、画像 API とホスティングの費用を賄い、更新を続ける助けになります。ありがとうございます。

📄 ライセンス

MIT © Salahuddin Zaki。同梱されているスタイル参照画像は、プロジェクト独自の作品です。MIT の コード ライセンスは、アートワークには適用されません。ライブラリの README をご覧ください。