Community写作与编辑github.com

Canvas

Canvas 是一个通过 HTTP 代理 API 创建、读取和更新交互式 Markdown 画布的工具,支持实时预览和共享。

Canvas 是什么?

Canvas 技能允许 AI 代理通过与 `canvas.n3wth.com` 的 HTTP API 交互,创建和管理交互式 Markdown 画布。每个画布通过唯一的公开 slug 标识,支持实时渲染预览,当源内容更新时,已打开的页面会自动刷新而无需手动重新加载。该技能适用于需要为人类或其他代理创建协作工作区的场景,尤其适合快速分享 Markdown 内容并提供稳定的访问链接。它支持在 Cursor、Claude Code 等代理环境中使用,用户需配置 `CANVAS_SITE_URL` 和 `CANVAS_AGENT_TOKEN` 环境变量以通过认证调用 API。主要操作包括创建画布、写入源内容、读取当前源和列出所有画布,所有数据变更均通过安全的 bearer token 保护。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add n3wth/skills

Installed? Explore more 写作与编辑 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Canvas 是做什么的?

canvas.n3wth.com 承载交互式 Markdown 及其渲染预览,通过公开的 slug 进行访问。当源内容被写入时,已打开的共享链接视图会自动更新。

此技能与经过身份验证的 HTTP 代理 API 通信。无需浏览器。本文件中不包含任何秘密——调用方需从其自身环境提供 CANVAS_AGENT_TOKEN 和 Convex 站点基础 URL。

使用时机

  • 创建一个他人或代理可以打开的协作工作区
  • 推送 Markdown 并返回一个稳定的共享链接
  • 原地更新现有画布,使已打开的页面重新渲染
  • 在编辑前读取当前源内容

调用方必须设置的环境变量

变量含义
CANVAS_SITE_URLConvex HTTP 基础地址,例如 https://.convex.site(末尾不带斜杠)
CANVAS_AGENT_TOKEN共享的 Bearer 令牌,当部署环境中配置了该令牌时使用

公开共享链接始终使用 https://canvas.n3wth.com/c/{slug}(而非 Convex 站点主机地址)。

认证: 如果 Convex 部署中设置了 CANVAS_AGENT_TOKEN,则以下每个代理路由都需要 Authorization: Bearer $CANVAS_AGENT_TOKEN。如果未设置令牌(本地/开发环境),则这些路由无需头部即可工作——但在生产环境中请确保设置令牌。

API

每个变更/读取代理路由的认证:

Authorization: Bearer $CANVAS_AGENT_TOKEN
Content-Type: application/json

发现(无需认证):

curl -sS "$CANVAS_SITE_URL/agent/v1"

1. 创建

curl -sS -X POST "$CANVAS_SITE_URL/agent/v1/canvases" \
  -H "Authorization: Bearer $CANVAS_AGENT_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "我的画布",
    "source": "# 你好\n\n这是 **Markdown**。"
  }'

响应中包含 slug、url、version。将 url 返回给用户——这是可以在 https://canvas.n3wth.com/c/{slug} 打开的画布。

2. 写入源内容

curl -sS -X PUT "$CANVAS_SITE_URL/agent/v1/canvases/$SLUG/source" \
  -H "Authorization: Bearer $CANVAS_AGENT_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"source":"# 已更新\n\n此处为新内容。"}'

打开 https://canvas.n3wth.com/c/$SLUG 的选项卡会自动重新渲染,无需手动刷新。

3. 读取当前源内容

curl -sS "$CANVAS_SITE_URL/agent/v1/canvases/$SLUG" \
  -H "Authorization: Bearer $CANVAS_AGENT_TOKEN"

4. 列出所有画布

curl -sS "$CANVAS_SITE_URL/agent/v1/canvases" \
  -H "Authorization: Bearer $CANVAS_AGENT_TOKEN"

仅返回元数据(不含源正文)。

代理工作流程

  1. 确认你的环境中已设置 CANVAS_SITE_URL 和 CANVAS_AGENT_TOKEN(切勿提交它们)。
  2. POST /agent/v1/canvases,可选提供 title/source。
  3. 将响应中的 url(https://canvas.n3wth.com/c/{slug})告知人类或其他代理。
  4. 在优化内容时,使用 PUT .../source 进行迭代更新。
  5. 如果需要编辑前的当前源内容,使用 GET .../canvases/{slug}。

错误处理

状态码含义
401缺少或错误的 Bearer 令牌(仅当部署中设置了 CANVAS_AGENT_TOKEN 时)
404未知的 slug
400验证失败(源内容大小、JSON 格式)

源内容硬限制:512 KiB 字符。

不包含的功能

没有绘图白板,也不涉及第三方画布产品。此 API 仅限于创建/写入源/读取/列出操作。

便携安装

将此文件夹复制到 skills.n3wth.com 或任何家庭代理技能根目录下的 canvas/SKILL.md。通过 AGENTS.md 让代理指向它。联系方式:[email protected]。GitHub:https://github.com/n3wth。

相关技能