X (Twitter)

连接 Claude Code、Codex、Gemini CLI 等 MCP 客户端，用 AI 创建和编辑截图项目，通过浏览器检查效果，在网站编辑器导出。

连接 AI 工具

当前部署启用 MCP 后，可在兼容的 AI 工具中添加以下服务地址：

https://appscreenshots.net/api/mcp

选择 HTTP / Streamable HTTP 和 OAuth，在浏览器中登录 AppScreenshots，选择允许访问的项目和素材，并决定是否允许创建新项目。不需要提供数据库权限或 API 密钥。

想先看总览和示例提示词，请访问 MCP 落地页。

连接你的客户端

下面的命令会把服务地址注册到各个客户端。连接后，客户端弹出登录窗口时完成浏览器登录即可。

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

然后在 Claude Code 中运行 /mcp 并授权。如需项目级连接，改用合并 .mcp.json 的方式，不要与用户级注册同时配置，除非你有意覆盖作用域。

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

也可以在客户端的 config.toml 中合并 [mcp_servers.appscreenshots] 段，写入 url = "..."。

gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

在 Gemini CLI 内运行 /mcp auth appscreenshots。设置文件写法使用 httpUrl 表示 Streamable HTTP，并加上 "oauth": {"enabled": true}。

打开 /mcp-config，添加以服务地址为端点的 HTTP 服务器，然后执行 /mcp-config login appscreenshots。配置文件位于 ~/.kimi-code/mcp.json：

{
  "mcpServers": {
    "appscreenshots": {
      "url": "https://appscreenshots.net/api/mcp"
    }
  }
}

添加配置后重启会话。旧版 kimi-cli 发行版则使用 kimi mcp add --transport http --auth oauth。

把服务器合并进 ~/.zcode/cli/config.json 的 mcp.servers，或在 Settings → MCP 中添加名为 appscreenshots 的 HTTP 服务：

{
  "mcp": {
    "servers": {
      "appscreenshots": {
        "type": "http",
        "url": "https://appscreenshots.net/api/mcp",
        "oauth": {
          "type": "authorization_code",
          "scope": "projects:read projects:write assets:read offline_access"
        }
      }
    }
  }
}

重启会话，客户端弹出时完成 OAuth 浏览器登录。请尽快完成登录：桌面客户端约 180 秒后会取消等待中的授权。

如果已有配置包含固定的 Authorization 请求头，请移除它，并启用上面的 OAuth 配置。手动粘贴的访问令牌无法自行续期。直接编辑原服务并重新授权即可，无需删除后重新添加。

使用你的账号或工作区可用的自定义 MCP 连接入口，选择 OAuth 并填入上面的服务地址。可用性取决于账号和工作区设置——公开的 GitHub 仓库不会自动生成 ChatGPT 目录条目。

客户端接入说明基于官方文档和一次完整的协议级端到端测试（OAuth、项目创建、编辑、网站预览、导出）。单个客户端的逐一认证仍在进行中，当前状态见连接套件的验证矩阵。

连接套件

公开仓库 appscreenshots-mcp 提供上述所有客户端的现成配置文件、一个教授截图工作流的可选代理 Skill，以及一条从终端检查服务的 doctor 命令：

git clone https://github.com/horace68/appscreenshots-mcp.git
node bin/appscreenshots.mjs config claude    # 打印客户端配置片段
node bin/appscreenshots.mjs install-skill claude
node bin/appscreenshots.mjs doctor

这个辅助工具只负责打印配置和安装 Skill，它不是本地 stdio 服务器——请使用客户端原生的远程连接功能。

工具

以下九个工具通过 Streamable HTTP 暴露。客户端可能会给名称加前缀。输入模式和账号权限以托管服务器为准。

工具	类型	用途
`get_capabilities`	读取	权益、设计边界（100–5000 px）、设备、元素类型、`maxFrames`（20）、`maxElementsPerFrame`（100）、预览/导出模式
`search_templates`	读取	搜索公开模板元数据（`query`、`offset`）
`get_template`	读取	按 id 读取你有权使用的模板
`list_projects`	读取	列出已授权项目，每页 25 个
`get_project`	读取	读取当前版本与可编辑设计，含 `editorUrl`
`get_project_preview`	读取	编辑器链接、版本、帧与浏览器审查说明——是文字而非图片
`list_assets`	读取	列出共享素材与已授权项目内的素材，每页 50 个
`create_project`	写入	从模板或空白画布创建（`name`、可选 `templateId`、`width`、`height`、`idempotencyKey`）
`update_project`	写入	每次调用应用 1–100 个结构化操作，带 `expectedRevision` 与 `idempotencyKey`

编辑操作

update_project 接受以下可判别的操作列表：

set_name —— 重命名项目
add_frame / remove_frame / reorder_frames —— 管理帧
upsert_element —— 插入或替换元素；要求完整几何信息，同类型元素省略的字段会被保留
patch_element —— 按元素 id 做部分修改；不允许改变元素类型
remove_element —— 删除元素
set_background —— 设置单帧背景；共享背景会按帧固化
set_locales —— 设置 1–20 个语言和默认语言
set_canvas —— 画布尺寸（100–5000）与模式（separate 或 continuous）

元素携带排版、设备样机字段、图片 assetId 引用、形状、图标、rotation 与 stackOrder。图片只能通过已授权的 assetId 引用——不能用 URL 或本地路径；既有的图片引用由服务端保留，不要回传。

每次逻辑写入都应使用新的幂等键；仅在完全相同的重试中复用它。版本冲突后，先读取最新版本再继续。绝不要把 SQL、HTML 或脚本当作编辑指令。

错误

错误以 JSON {code, message} 并带 isError: true 返回：

错误码	含义
`REVISION_CONFLICT`	项目在 `expectedRevision` 之后被修改——重新读取后重试
`ASSET_NOT_AUTHORIZED`	素材未在授权页勾选
`FRAME_NOT_FOUND` / `ELEMENT_NOT_FOUND`	引用的帧或元素不存在
`ELEMENT_TYPE_CHANGE_NOT_ALLOWED`	`patch_element` 不能改变元素类型
`INVALID_FRAME_ORDER` / `INVALID_DEFAULT_LOCALE`	帧顺序或默认语言不合法
`DUPLICATE_ID`	id 与现有内容冲突
`PROJECT_SIZE_LIMIT`	超出帧、元素或负载限制
`RATE_LIMITED`	调用过多——HTTP 429 并附 `Retry-After`

授权与限制

服务器使用 OAuth 2.1 + PKCE 浏览器登录：

作用域：projects:read、projects:write（仅在你允许创建或编辑时）、assets:read 与 offline_access。
访问令牌有效期为一小时，刷新令牌有效期为 30 天。
访问令牌依赖有效的授权记录：撤销连接后，现有令牌立即失效。
频率限制：免费方案每分钟 60 次 MCP 调用，付费方案每分钟 120 次。超限返回 HTTP 429，Retry-After: 60。
请求体上限 2 MB；项目上限 20 帧、每帧 100 个元素。

请求 offline_access 的客户端可以在不重新打开浏览器登录的情况下续期。每次续期会返回新的刷新令牌，客户端需要保存它才能继续自动刷新。响应丢失时，可在 30 秒内重试同一个刷新请求。刷新令牌过期或连接被撤销时，在客户端对原服务重新授权即可。

套餐权益照常生效：项目数量、付费模板、自定义字体和批量导出限制不变，也没有托管 AI 费用——设计与文案由所连接的 AI 提供。

准备素材并开始制作

先在网站编辑器上传原始截图，再授权该项目或在授权页勾选单独的素材。MCP 不提供二进制上传工具；聊天里的附件不会自动变成服务可读取的文件。

可以这样提出需求：

使用我授权的素材，从可用模板创建一组英文 App Store 截图。标题简短、布局清晰。使用可用的浏览器工具打开编辑器，截图检查并修正文案和布局问题，再给我项目链接，由我在网站导出。

设计和文案由 AI 工具生成，MCP 保存可编辑项目。get_project_preview 返回项目链接和审查指引，不是图片字节。带浏览器工具的 AI 可以打开编辑器、截图检查、通过 MCP 修改并安全地重新加载复查。浏览器登录与 MCP 授权相互独立；重新加载编辑器前应保存或处理未保存的修改。你在网站编辑器完成预览和导出。

管理授权

在 设置 → 已连接的 AI 工具 中调整项目、素材范围或撤销连接。AI 工具不能访问未授权的项目。网站与 AI 同时修改项目时，请先读取最新版本再保存，避免互相覆盖。

浏览器检查流程不需要 Browserless 或后台渲染队列。MCP 只提供项目工具与浏览器审查指引，不提供云端渲染。没有浏览器/图像工具时，AI 应返回项目链接并说明视觉检查尚未完成，而不是声称已验证。

故障排查

现象	处理
`invalid_redirect_uri: web clients require https redirect URIs`	使用环回地址（`http://127.0.0.1:<端口>/callback` 或 `http://localhost:<端口>/callback`），让环回注册默认按原生客户端处理
401 并带 `WWW-Authenticate: Bearer resource_metadata=…`	这是未认证调用的正常发现响应——在客户端完成 OAuth 流程即可
授权频繁过期	启用包含 `offline_access` 的 OAuth，移除固定的 `Authorization` 请求头；刷新令牌过期或授权被撤销时，对原服务重新授权
客户端取消浏览器登录	尽快完成登录（部分客户端约 180 秒后取消），然后重新发起连接
429 `RATE_LIMITED`	等待 `Retry-After`（60 秒）后重试；升级付费方案可提升至每分钟 120 次

客户端专属说明和最新验证矩阵见连接套件故障排查指南。