Canvasbin

Canvasbin

エージェント時代のPastebin。

Canvasbinは、エージェントが作成したものを共有するために作られました。エージェントはHTMLでページをデザインできます。チャート、ダッシュボード、レポート、あるいはVueアプリケーション全体も作成でき、Canvasbinが公開します。HTMLまたはMarkdownを入力すると、リンクが出力されます。デプロイもCMSも不要です。エージェントが公開し、人間が共有します。

ホスト型サービスはcanvasbin.devで利用できます。一度サインインすれば、ページがライブラリに保存され、共有できます。または、アカウントを無効にしてサインインなしで独自のコピーを実行できます。

リンクがアクセス権限になります。読み取りリンクを共有し、書き込みリンクは手元に保管してください。書き込みリンクを持つ人は誰でも、ページを編集または削除できます。作成したエージェントも同様です。もう一度依頼すれば、同じURLがそのまま更新されます。

create_pageは書き込みキーをエージェントに返すため、そのキーはチャット履歴に残ります。トランスクリプトからhtml_urlを共有してください。エージェントが後からページを編集できるよう、書き込みキーはそこに残ります。トランスクリプトはエディターと同じように扱ってください。

利用できる機能

リンク	表示される内容
html_url	レンダリングされたページです。共有するリンクはこちらです。
pdf_url	同じページのPDFです。
read_url	アプリです。閲覧専用で、プレビューとソースを表示します。
write_url	エディターです。エージェントに返されるため、チャット履歴に保存されます。

URLによって表示内容が決まります。

URL	内容
/{key}	アプリです。書き込みキーではエディターが開き、読み取りキーでは閲覧専用になります。
/{key}.html	レンダリングされたページです。HTMLスクリプトはサンドボックス内で実行されます。
/{key}.pdf	PDFをダウンロードします。
/{key}.md	MarkdownページのMarkdownソースです。
/raw/{key}	保存されたソースです。

ページはフラグメントでも完全なHTMLドキュメントでもかまいません。Markdownは自動的にレンダリングされます。更新は同じURLに反映されるため、新しいリンクを発行しなくてもエージェントがページを改訂できます。

エージェント用スクラッチパッド（agentic_only）

エージェントはエージェント専用ページを作成できます。これは、複数のMCPクライアント間で共有するコンテキスト用の外部スクラッチパッドや、チャットで重要な内容をバックアップするためのページです。create_pageまたはupdate_pageでagentic_only: trueを設定してください。ユーザーが「エージェント用スクラッチパッドを表示」を有効にしない限り、ウェブライブラリには表示されません。list_pagesには、フラグが設定された状態で常に含まれます。agentic_only: trueとともにteamを渡すと、チームページではなく個人ページとして保存されます。プラットフォーム間でコンテキストを共有するおよびAIチャットをバックアップするを参照してください。

エージェントに渡す

Claude Code、Cursor、Codex、または任意のMCPクライアントをhttps://{your-canvas-bin-host}/mcpに接続してください。APIキーは不要です。セルフホスト版でアカウントを無効にしている場合はサインイン不要で、canvasbin.devではクライアントを通じて一度サインインします。Cursorでは、代わりにCanvasbinプラグインをインストールしてください。次のようにページを依頼します。

今週の数値のダッシュボードを作成し、Canvasbinで公開してください。リンクを教えてください。

転送用のhtml_urlが得られます。エージェントにはwrite_urlとwrite_keyも渡され、次回の編集に備えてチャット履歴に残ります。各クライアントのセットアップ方法は以下のとおりです。

例ではhttps://{your-canvas-bin-host}を使用しています。Canvasbinを実行するオリジンに置き換えてください。自分のマシンで実行する場合はhttp://localhost:8080です。

実行する

セルフホストがデフォルトです。アカウントは無効のままです。サインインは不要で、読み取りリンクと書き込みリンクを使ってページを作成します。Dockerが必要です。ページの保存にはPostgresを使用します。CircleCIは、mainへのプッシュごとにアプリイメージstewartmckee/canvasbin（linux/amd64）を公開します。イメージにはエディターと、PDF出力用のヘッドレスChromiumが含まれています。各ビルドには0.1.<build number>のタグも付けられます。

ACCOUNTSのデフォルトはoffです。プライベートなビンとして使う場合は、そのままにしてください。

Docker Compose

実行にはこちらのサンプルを使ってください。同じファイルはexamples/compose.yamlです。docker-compose.ymlではありません。これはこのリポジトリの開発専用です。

name: canvasbin

services:
  postgres:
    image: postgres:16-alpine
    restart: unless-stopped
    environment:
      POSTGRES_USER: canvasbin
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:?set POSTGRES_PASSWORD}
      POSTGRES_DB: canvasbin
    volumes:
      - pgdata:/var/lib/postgresql/data
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U canvasbin -d canvasbin"]
      interval: 5s
      timeout: 5s
      retries: 12

  canvasbin:
    image: stewartmckee/canvasbin:latest
    restart: unless-stopped
    ports:
      - "8080:8080"
    depends_on:
      postgres:
        condition: service_healthy
    environment:
      DATABASE_URL: postgres://canvasbin:${POSTGRES_PASSWORD}@postgres:5432/canvasbin?sslmode=disable
      HTTP_ADDR: ":8080"
      PUBLIC_BASE_URL: ${PUBLIC_BASE_URL:-http://localhost:8080}
      ACCOUNTS: "off"
    # Chromium's sandbox needs namespaces Docker's default seccomp profile blocks.
    # Without this, PDF export fails instead of running the browser unsandboxed.
    security_opt:
      - seccomp:unconfined

volumes:
  pgdata: {}

export POSTGRES_PASSWORD='choose-a-password'
docker compose -f examples/compose.yaml up -d

http://localhost:8080を開いてください。

Docker Run

compose ファイルを使わずに、同じ 2 つのコンテナを実行します。初回起動時に Postgres の準備ができていない場合でも、restart によってアプリが再起動します。

docker network create canvasbin
docker volume create canvasbin-pg

docker run -d --name canvasbin-db --network canvasbin --restart unless-stopped \
  -e POSTGRES_USER=canvasbin \
  -e POSTGRES_PASSWORD=choose-a-password \
  -e POSTGRES_DB=canvasbin \
  -v canvasbin-pg:/var/lib/postgresql/data \
  postgres:16-alpine

docker run -d --name canvasbin --network canvasbin --restart unless-stopped \
  -p 8080:8080 \
  -e DATABASE_URL='postgres://canvasbin:choose-a-password@canvasbin-db:5432/canvasbin?sslmode=disable' \
  -e HTTP_ADDR=:8080 \
  -e PUBLIC_BASE_URL=http://localhost:8080 \
  -e ACCOUNTS=off \
  --security-opt seccomp=unconfined \
  stewartmckee/canvasbin:latest

http://localhost:8080 を開きます。

ローカル以外で使用する場合は、手前に TLS リバースプロキシを配置し、PUBLIC_BASE_URL に末尾のスラッシュがない https のオリジンを設定してください。パブリックインターフェースでポート 8080 を公開しないでください。アプリにアクセスできるのはプロキシだけにしてください。プロキシは呼び出し元のアドレスを X-Forwarded-For に追加する必要があります。Canvasbin は右端のアドレスを使用しますが、TCP ピアがプライベートアドレスまたはループバックアドレスの場合に限ります。

アップグレードを計画的に行うには、latest ではなく 0.1.<build number> を固定してください。

イメージを取得するのではなく、このチェックアウトからビルドするには、次のようにします。

docker build -t stewartmckee/canvasbin:local .

上記の docker run でこの名前を使用してください。リポジトリのルートで実行する docker compose up --build は開発用スタックであり、このサンプルとは異なります。

ソースから開発する

必要なもの：Go 1.27、Node.js 24、Docker。

git clone https://github.com/stewartmckee/canvasbin.git
cd canvasbin
docker compose up postgres

API（Vite 開発サーバー経由でプロキシされます）：

DATABASE_URL='postgres://canvasbin:canvasbin@localhost:5433/canvasbin?sslmode=disable' \
  HTTP_ADDR=:8090 \
  go run ./cmd/canvasbin

UI：

cd web
npm ci
npm run dev

http://localhost:5173 を開きます。PDF のエクスポートでは、PATH 上の Chrome または Chromium、あるいは CHROME_BIN で指定されたバイナリを探します。公開イメージでは CHROME_BIN=/usr/bin/chromium-browser が設定されています。

go test ./...
cd web && npm run build

設定

変数	デフォルト	用途
DATABASE_URL	postgres://canvasbin:canvasbin@localhost:5432/canvasbin?sslmode=disable	Postgres 接続文字列です。スキーマは起動時に適用されます。
HTTP_ADDR	:8080	リッスンするアドレスです。
PUBLIC_BASE_URL	リクエストホスト	返されるリンクで使用するオリジンです。
CHROME_BIN	PATH 上の Chrome/Chromium	PDF の印刷に使用するブラウザーです。
ACCOUNTS	off	サインインなしのセルフホスト可能なビンにするには off のままにします。on にすると、メール登録とライブラリが有効になり、MAILGUN_SENDING_KEY と https の PUBLIC_BASE_URL が必要になります（http://localhost は使用できます）。
MAILGUN_SENDING_KEY	empty	ACCOUNTS=on の場合にのみ必要です。Mailgun EU の送信 API キーです。
MAILGUN_DOMAIN	canvasbin.dev	Mailgun の送信ドメインです。アカウントが有効な場合にのみ使用されます。
MAIL_FROM	Canvasbin <[email protected]>	確認メールとパスワードリセットメールの送信元アドレスです。
ADMIN_EMAILS	empty	管理者ユーザー一覧の使用を許可するメールアドレスをカンマ区切りで指定します。アカウントが有効な場合のみ使用されます。

ローカル環境ファイルには .env.example をコピーしてください。実際のシークレットは絶対にコミットしないでください。

ページのコンテンツは 1 MiB に制限されています。ページの作成にはレート制限があります（クライアント IP ごとに 10 分間で 60 件）。PDF のレンダリングにも制限があります。プロキシの背後で実行する場合は、呼び出し元のアドレスを X-Forwarded-For（$proxy_add_x_forwarded_for）に追加してください。Canvasbin は、そのヘッダー内の右端のアドレスを使用しますが、接続元がプライベートアドレスまたはループバックアドレスの場合に限ります。そのため、クライアントが独自の値を送信して新しいレート制限枠を選ぶことはできません。パブリックインターフェースでアプリのポートを公開しないでください。アプリにアクセスできるのはプロキシだけにしてください。

アカウント（任意）

ACCOUNTS=off（デフォルト）の場合、Canvasbin は認証なしで利用できます。ページを作成して読み取りリンクを共有し、書き込みリンクを保管してください。

ACCOUNTS=on の場合、メールアドレスとパスワードで登録できます。確認リンクの送信には Mailgun を使用するため、MAILGUN_SENDING_KEY と PUBLIC_BASE_URL が必要です。サインインしたユーザーはライブラリを利用でき、書き込みキー付きのページを自分のものとして登録できます。ページの作成にはサインインが必要になりますが、既存のページはアカウントなしでも読み取りリンクと書き込みリンクで引き続き利用できます。Docker のサンプルではアカウントは無効になっています。

エージェントを接続する

Canvasbin は Streamable HTTP 経由で MCP を使用します。create_page から取得する書き込みキーを使うと、エージェントは後からそのページを編集または削除できます。

エンドポイントは https://{your-canvas-bin-host}/mcp です。自分のマシンでは http://localhost:8080/mcp になります。アカウントが無効の場合、API キーもログインも必要ありません。アカウントが有効の場合、すべての MCP リクエストにサインイン済みアカウント（OAuth）が必要なため、クライアントは接続時にサインインを促します。ブラウザー上のページリンクは、サインインしなくてもキーを使って引き続き機能します。

Claude、ChatGPT、Cursor からサインインする

コネクターの接続先を https://canvasbin.dev/mcp（またはご自身のホストのオリジン）に設定します。 最初のリクエストは、WWW-Authenticate チャレンジを含む HTTP 401 を返します。 クライアントが Canvasbin の OAuth 同意画面を開き、承認すると、ベアラートークンを使ってリクエストを再試行します。 ディスカバリー文書は /.well-known/oauth-protected-resource/mcp と /.well-known/oauth-authorization-server にあります。

Cursor プラグイン

このリポジトリは Cursor プラグイン（.cursor-plugin/plugin.json）でもあります。 Marketplace からインストールすると、Cursor は常に https://canvasbin.dev/mcp に接続し、ページを公開するタイミングと返すリンクをエージェントに伝える canvasbin スキルが追加されます。 このホストでのサインインには OAuth を使用します。初回は Cursor が Canvasbin の同意画面を開き、プラグインがアカウントのパスワードを見ることはありません。 代わりに独自のホストを使用するには、「その他のクライアント」の説明に従ってサーバーを手動で設定します。

Claude Code

このマシン上のすべてのプロジェクトに追加します。

claude mcp add --transport http canvasbin --scope user \
  https://{your-canvas-bin-host}/mcp

または、現在のプロジェクトだけに追加します（デフォルトのスコープ）。

claude mcp add --transport http canvasbin \
  https://{your-canvas-bin-host}/mcp

claude mcp list で確認し、セッション内で /mcp を実行します。 Claude にページの公開を依頼します。一般的なリクエストの例：

この変更を説明する Canvasbin ページを作成し、共有用のリンクを教えてください。

create_page は、キーとともに4つのリンクを返します。共有するのは html_url です。 write_url と write_key は Claude に返され、チャット履歴に残ります。そのため、後のターンでブラウザーを開かずに update_page を呼び出せます。

リポジトリをクローンしたすべての人がサーバーを使えるようにするには、そのリポジトリに .mcp.json をコミットします。

{
  "mcpServers": {
    "canvasbin": {
      "type": "http",
      "url": "https://{your-canvas-bin-host}/mcp"
    }
  }
}

Claude Code は、プロジェクトの .mcp.json を使う前に確認を求めます。 "type": "http" は必須です。streamable-http もエイリアスとして使用できます。 このリポジトリでは、cursor.directory がサーバーを見つけられるように、ルートにこのファイルをコミットしており、接続先は https://canvasbin.dev/mcp です。

その他のクライアント

ヘッダーは不要です。

Cursor。 ~/.cursor/mcp.json（すべてのプロジェクト）または .cursor/mcp.json（1つのプロジェクト）に設定します。

{
  "mcpServers": {
    "canvasbin": {
      "url": "https://{your-canvas-bin-host}/mcp"
    }
  }
}

Codex。

codex mcp add canvasbin --url https://{your-canvas-bin-host}/mcp

これにより、以下の内容が ~/.codex/config.toml に書き込まれます。

[mcp_servers.canvasbin]
url = "https://{your-canvas-bin-host}/mcp"

Claude Desktop。 カスタムコネクターを追加し、URL を https://{your-canvas-bin-host}/mcp に設定します。Desktop では、claude_desktop_config.json にリモート URL を設定できません。

VS Code。 .vscode/mcp.json に設定します。

{
  "servers": {
    "canvasbin": {
      "type": "http",
      "url": "https://{your-canvas-bin-host}/mcp"
    }
  }
}

ツール

• create_page — HTML または Markdown を公開します。html_url、pdf_url、read_url、write_url とキーを返します。チームに公開する場合、エージェントはまずそのチームのスタイルガイドを読むよう求められます。
• get_page — 読み取りキー、書き込みキー、または URL を使ってページを読み取ります。
• update_page — コンテンツ、タイトル、または形式を置き換えます。書き込みキーが必要です。省略したフィールドは変更されません。content はページ全体を置き換えます。
• delete_page — ページを削除します。書き込みキーが必要です。
• get_style_guide / set_style_guide — チームのスタイルガイドを読み取り、作成、または更新します。アカウントが有効な場合にのみ登録されます。そのチームのメンバーであれば、誰でもガイドを作成したり、後から置き換えたりできます。create_page は、チームのページを書く前に get_style_guide を呼び出すようエージェントに指示します。

キーを受け取るツールでは、キー単体または任意の Canvasbin URL を使用できます。HTML はフラグメントでも完全なドキュメントでも構いません。レンダリングされたページ内のスクリプトはサンドボックスで実行されます。

イシュー

報告内容を具体的にするため、イシューテンプレートを使用してください。

• バグ報告 — 期待した内容、実際に起きたこと、再現手順、画像タグまたはコミットを記載してください。
• 機能リクエスト — 実現しようとしている作業と、希望する動作を記載してください。

新しいイシューを作成する前に、既存のイシューを検索してください。 セキュリティに関する報告は、公開イシューではなく非公開のアドバイザリーから送信してください。 SECURITY.md と CONTRIBUTING.md も参照してください。

ライセンス

MIT。