mcpField
C
Canvasbin

Canvasbin

远程服务
canvasbin.dev文件与存储24 天前更新

关于 Canvasbin

Canvasbin 可将 HTML 和 Markdown 发布为可分享页面,并提供渲染页、PDF、源内容和编辑链接。它面向需要分享生成内容的 Agent 和用户,支持托管服务或自托管。

主要功能

  1. 01发布 HTML 和 Markdown 页面
  2. 02提供渲染页、PDF、读取及写入链接
  3. 03通过原链接更新页面
  4. 04创建仅供 Agent 使用的草稿页
  5. 05可选账户、团队和风格指南

适用场景

  1. 01分享 Agent 生成的报告或仪表板
  2. 02将已发布页面导出为 PDF
  3. 03保留页面链接并持续修改内容
  4. 04在仅供 Agent 使用的草稿页保存上下文

MCP 相关

Canvasbin 通过 Streamable HTTP 向 MCP 客户端提供页面创建、读取、更新和删除功能。启用账户时,客户端通过 OAuth 进行身份验证。

配置

远程服务无需本地安装。选择你使用的客户端,复制配置或使用一键安装。

服务地址https://canvasbin.dev/mcp
一键复制安装命令
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

命令在终端中运行;JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

详细介绍

Canvasbin

面向 Agent 时代的 Pastebin。

Canvasbin 专为分享 Agent 生成的内容而打造。Agent 可以用 HTML 设计页面——图表、仪表板、报告,甚至完整的 Vue 应用——Canvasbin 会将其发布。输入 HTML 或 Markdown,输出一个链接。无需部署,无需 CMS。Agent 负责发布,人类负责分享。

使用托管服务 canvasbin.dev,登录一次后,页面就会保存在可供分享的资源库中;也可以运行自己的副本,关闭账户功能,完全无需登录。

链接就是权限。分享只读链接,保留写入链接。任何持有写入链接的人都可以编辑或删除页面,包括创建页面的 Agent。再次提出请求,同一个 URL 就会原地更新。

create_page 会向 Agent 返回写入密钥,因此该密钥会出现在聊天记录中。请从记录中分享 html_url。写入密钥会保留在记录中,方便 Agent 之后编辑页面;请像对待编辑器一样对待聊天记录。

你将获得什么

链接用户看到的内容
html_url渲染后的页面。应分享这个链接。
pdf_url同一页面的 PDF 版本。
read_url应用,只读:预览和源代码。
write_url编辑器。该链接会返回给 Agent,因此会保存在聊天记录中。

地址本身决定显示的视图:

URL含义
/{key}应用。写入密钥会打开编辑器;只读密钥只能查看。
/{key}.html渲染后的页面。HTML 脚本会在沙箱中运行。
/{key}.pdfPDF 下载。
/{key}.mdMarkdown 源码,仅适用于 Markdown 页面。
/raw/{key}已存储的源内容。

页面可以是片段,也可以是完整的 HTML 文档。Markdown 会自动渲染。更新会实时反映在同一组 URL 上,因此 Agent 可以修改页面,而无需生成新链接。

Agent 临时存储区(agentic_only)

Agent 可以创建仅供 Agent 使用的页面:作为外部临时存储区,在多个 MCP 客户端之间共享上下文,或备份聊天记录中的重要内容。在 create_page 或 update_page 中设置 agentic_only: true。除非用户启用“显示 Agent 临时存储区”,否则这些页面不会显示在网页资源库中;list_pages 则始终会包含这些页面,并设置相应标记。传入 team 且 agentic_only: true 时,会存储为个人页面,而非团队页面。请参阅跨平台共享上下文和备份 AI 聊天记录。

交给 Agent 使用

将 Claude Code、Cursor、Codex 或任何 MCP 客户端指向 https://{your-canvas-bin-host}/mcp。无需 API 密钥:关闭账户功能的自托管副本无需登录,canvasbin.dev 则会要求你通过客户端登录一次。在 Cursor 中,请改为安装 Canvasbin 插件。然后请求创建一个页面:

创建一个展示本周数据的仪表板,并发布到 Canvasbin。把链接发给我。

你会获得可转发的 html_url。Agent 也会收到 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。将其保持为此设置,即可使用私有 Pastebin。

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 文件即可运行相同的两个容器。如果 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 对端地址属于私有地址或环回地址时才会使用。

如果希望有计划地升级,请固定使用 0.1.<build number>,而不是 latest。

要从此代码检出版本构建镜像,而不是拉取镜像:

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_URLpostgres://canvasbin:canvasbin@localhost:5432/canvasbin?sslmode=disablePostgres 连接字符串。启动时会应用数据库架构。
HTTP_ADDR:8080监听地址。
PUBLIC_BASE_URL请求主机返回链接使用的源站地址。
CHROME_BINPATH 中的 Chrome/Chromium用于打印 PDF 的浏览器。
ACCOUNTSoff对于无需登录的自托管内容库,请保持为 off。设为 on 会启用电子邮件注册和资料库,并需要 MAILGUN_SENDING_KEY 和 https 格式的 PUBLIC_BASE_URL(允许使用 http://localhost)。
MAILGUN_SENDING_KEYempty仅当 ACCOUNTS=on 时必需。Mailgun EU 发送 API 密钥。
MAILGUN_DOMAINcanvasbin.devMailgun 发送域名。仅在启用账号时使用。
MAIL_FROMCanvasbin <[email protected]>验证邮件和重置邮件的发件人地址。
ADMIN_EMAILSempty允许使用管理员用户列表的电子邮件地址,以逗号分隔。仅适用于账号功能。

将 .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 示例默认关闭账号功能。

连接 Agent

Canvasbin 使用 Streamable HTTP 提供 MCP 服务。create_page 返回的写入密钥可让 Agent 之后编辑或删除该页面。

端点为 https://{your-canvas-bin-host}/mcp。在本机上,端点为 http://localhost:8080/mcp。关闭账号功能时,无需 API 密钥或登录。启用账号功能时,每个 MCP 请求都需要已登录账号(OAuth),因此客户端会在连接时提示登录。浏览器中的页面链接仍可通过密钥使用,无需登录。

从 Claude、ChatGPT 或 Cursor 登录

将连接器指向 https://canvasbin.dev/mcp(或你托管服务的源地址)。 第一个请求会返回 HTTP 401,并附带 WWW-Authenticate 挑战。 客户端会打开 Canvasbin 的 OAuth 授权页面;你批准后,它会携带 bearer token 重试。发现文档位于 /.well-known/oauth-protected-resource/mcp 和 /.well-known/oauth-authorization-server。

Cursor 插件

此仓库也是一个 Cursor 插件(.cursor-plugin/plugin.json)。从 Marketplace 安装后,Cursor 始终会连接到 https://canvasbin.dev/mcp, 并添加一个 canvasbin 技能,告知 Agent 何时发布页面,以及应返回哪个链接。 此主机上的登录采用 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 会返回四个链接以及密钥。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 也可作为别名使用。此仓库在根目录提交了 该文件,指向 https://canvasbin.dev/mcp,以便 cursor.directory 查找此服务。

其他客户端

无需设置请求头。

Cursor。 在 ~/.cursor/mcp.json(所有项目)或 .cursor/mcp.json(单个 项目)中:

{
  "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 和密钥。发布到团队时,Agent 会先被要求阅读该团队的风格指南。
  • get_page — 通过读取密钥、写入密钥或 URL 读取页面。
  • update_page — 替换内容、标题或格式。需要写入密钥。未提供的字段保持不变。content 会替换整个页面。
  • delete_page — 删除页面。需要写入密钥。
  • get_style_guide / set_style_guide — 读取、创建或更新团队的风格指南。仅在启用账户时注册。团队的任何成员都可以创建指南,或在之后替换它。create_page 会要求 Agent 在编写团队页面前调用 get_style_guide。

需要密钥的工具接受纯密钥或任意 Canvasbin URL。HTML 可以是片段,也可以是完整文档。渲染页面中的脚本会在沙盒中运行。

问题反馈

请使用问题模板,让反馈内容便于采取行动:

  • 错误报告 — 说明预期结果、实际结果、复现方法,以及图像标签或提交记录。
  • 功能请求 — 说明你要完成的任务以及期望的行为。

提交新问题前,请先搜索现有问题。 安全问题请通过私密公告 报告,不要公开提交问题。另请参阅 SECURITY.md 和 CONTRIBUTING.md。

许可证

MIT。

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。