Think Proof, Count Two

はじめに

職場では Cacoo というオンライン作図ツールを使っています。 システム構成図を書いたり、ちょっとした処理フロー図を書いたり、といった用途に使っています。 あとたまに KPT を使った振り返り用のホワイトボードの代わりに使ったりもします。

さて、同じ Nulab 社のサービスの Backlog には公式の MCP サーバが提供されているのですが、Cacoo の方には提供がありません。 システム構成図など AI コーディングエージェントに参照させたいことがあるのですが、さっと参照させる方法がなかったので MCP サーバ作成の素振りも兼ねて作ってみました。

MCP サーバを作ってみたい人の参考になればと思い、簡単ですが記録を残しておきます。

作ったものはこちら: @mahito1594/cacoo-mcp

Claude Code であれば次のコマンドでインストールできます。

claude mcp add --env CACOO_API_KEY=your-api-key cacoo-mcp -- npx -y @mahito1594/cacoo-mcp@latest

@mahito1594/cacoo-mcp について

提供しているツールは次の4つです:

• list_organizations — 所属している Cacoo 組織の一覧を取得する
• list_diagrams — 図の一覧をキーワード検索できる
• get_diagram_sheets — 図のシート一覧を取得する
• get_diagram_image — 図を PNG で取得してエージェントに渡す

基本的な流れは「図を探す → シートを確認する → 画像を取得する」という流れです。 シートを指定しなければ全シートをまとめて取得してくれるので、小さな図ならそのまま取得してしまっても良いでしょう。 すべて読み取り専用のツールなので、何かを壊す心配はありません。

作業ログ・感想

ここからは MCP サーバを作っていた時の作業ログやその感想です。

準備運動・素振り

まずは What is the Model Context Protocol (MCP)? を読んで、ざっくり MCP の概要を押さえました。 何となく MCP とはこういうもの、という感覚はあったのですが細かいところはちゃんと知らなかったので斜め読みでも読んでよかったです。 とはいえ Architecture あたりは今も理解が曖昧なので、また読み返したいと思います。

次に Build an MCP server を読みながら手を動かして MCP server を作りました。 このときデバッグ周りを読んでいなかったのですが MCP Inspector は Cacoo MCP サーバを作る際もお世話になったのでここで触っておけばよかったかもしれません。

仕様決め

開発で使うツールだから npx などで起動できれば良い（リモートサーバーである必要はない）、ツールは図の読み取りができれば良い、という条件だったので Cacoo API の仕様を眺めていたら自然に決まりました。

画像データを MCP サーバで LLM に渡すにはどうすればいいのか少し悩みましたが、Base64 エンコードして渡せば良いとわかったのでそうしました^[1]。 これは ChatGPT との会話の中で知りました。

MCP の仕様では tool の結果として image タイプのコンテンツを返せるようになっており、次のように Base64 エンコードした画像データを data フィールドに、MIME タイプを mimeType フィールドに指定するだけで LLM 側に画像として認識させることができます。

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "content": [
      {
        "type": "image",
        "data": "<Base64 エンコードした画像データ>",
        "mimeType": "image/png"
      }
    ]
  }
}

実装

Codex App を使ってみたかったので Codex App に丸投げしました。

npx や npm install -g で実行可能なスクリプトを公開するためには package.json の bin フィールドを適切に設定すれば良いです^[2]。 今回は TypeScript で作成したため、prepare スクリプトで .ts をビルドして dist/index.mjs として吐き出すようにしました。

公開

npmjs.com のアカウントを持っていなかったのでアカウント取得から始めました。 スコープなしの cacoo-mcp をとる勇気はなかったのでアカウント名付きの @mahito1594/cacoo-mcp として一度手動で公開しました。

リリースを自動化したかったので trusted publishing について調べました。 詳しいことは理解できていないのですが、GitHub Actions の中で OIDC を使って公開できるようなので書いてあるようにポチポチ設定しました。 GitHub Actions の workflow 未作成でも npmjs.com 側の設定ができたような気がするのですが、ちょっと記憶が定かではないです。

バージョンアップやタグ付けも自動にしたかったので release-please-action を設定して、動作確認、v0.2.0 が無事 npmjs.com に公開されました。