关于 Canvasbin
Canvasbin 可将 HTML 和 Markdown 发布为可分享页面,并提供渲染页、PDF、源内容和编辑链接。它面向需要分享生成内容的 Agent 和用户,支持托管服务或自托管。
主要功能
- 01发布 HTML 和 Markdown 页面
- 02提供渲染页、PDF、读取及写入链接
- 03通过原链接更新页面
- 04创建仅供 Agent 使用的草稿页
- 05可选账户、团队和风格指南
适用场景
- 01分享 Agent 生成的报告或仪表板
- 02将已发布页面导出为 PDF
- 03保留页面链接并持续修改内容
- 04在仅供 Agent 使用的草稿页保存上下文
MCP 相关
Canvasbin 通过 Streamable HTTP 向 MCP 客户端提供页面创建、读取、更新和删除功能。启用账户时,客户端通过 OAuth 进行身份验证。
配置
远程服务无需本地安装。选择你使用的客户端,复制配置或使用一键安装。
https://canvasbin.dev/mcpclaude mcp add --transport http stewartmckee-canvasbin https://canvasbin.dev/mcp{"mcpServers":{"stewartmckee-canvasbin":{"type":"http","url":"https://canvasbin.dev/mcp"}}}在 Cursor 中打开{"servers":{"stewartmckee-canvasbin":{"type":"http","url":"https://canvasbin.dev/mcp"}}}在 VS Code 中打开{"mcpServers":{"stewartmckee-canvasbin":{"type":"http","url":"https://canvasbin.dev/mcp"}}}{"mcpServers":{"stewartmckee-canvasbin":{"serverUrl":"https://canvasbin.dev/mcp"}}}命令在终端中运行;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}.pdf | PDF 下载。 |
/{key}.md | Markdown 源码,仅适用于 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
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
除本地使用外,请在前面配置 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_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 示例默认关闭账号功能。
连接 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。
评论
一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。