codetoimage-mcp-server

@codetoimage/mcp-server

适用于 codetoimage.app 的官方 Model Context Protocol 服务——可直接通过 Claude Desktop、Claude Code、Cursor 或任何兼容 MCP 的客户端，将 HTML/CSS 渲染为 PNG/JPG/WebP。

你将获得

两个工具，只需一个 API 密钥即可使用，无需其他设置：

• render_html_to_image – 内联返回图像，让你的 Agent（或你在聊天中）立即查看。适用于“展示渲染后的卡片”、迭代 OG 预览、生成图表和徽章样稿。
• render_html_to_url – 返回一个临时托管 URL（有效期 24 小时）。适用于需要将图像放在外部位置的场景，例如 Instagram Graph API、OpenGraph 元标签、Slack 链接展开，以及文档/帖子嵌入。

安装

无需全局安装任何内容——MCP 客户端可以通过 npx 运行。前往 codetoimage.app/dashboard/keys 获取 API 密钥，然后添加以下配置。

Claude Desktop

编辑 ~/Library/Application Support/Claude/claude_desktop_config.json（macOS）或 %APPDATA%\Claude\claude_desktop_config.json（Windows）：

{
  "mcpServers": {
    "codetoimage": {
      "command": "npx",
      "args": ["-y", "@codetoimage/mcp-server"],
      "env": {
        "CODETOIMAGE_API_KEY": "cti_live_..."
      }
    }
  }
}

重启 Claude Desktop。两个工具将显示在工具选择器中。

Claude Code

claude mcp add codetoimage -s user -- npx -y @codetoimage/mcp-server

然后在 shell 配置文件中设置环境变量（或在 claude mcp add 调用中传入 -e CODETOIMAGE_API_KEY=cti_live_…）。

Cursor

编辑 ~/.cursor/mcp.json：

{
  "mcpServers": {
    "codetoimage": {
      "command": "npx",
      "args": ["-y", "@codetoimage/mcp-server"],
      "env": {
        "CODETOIMAGE_API_KEY": "cti_live_..."
      }
    }
  }
}

在 Agent 中使用

这些工具会自动说明自身用途——Agent 会根据意图选择合适的工具。以下示例提示词可直接使用：

“将此卡片渲染为 PNG：<div style='padding:40px;background:#6366f1;color:white;border-radius:16px'>Hello</div>，尺寸为 800×400。”

“为博客文章‘Why agents need pixel-perfect rendering’生成一张 Open Graph 图像，并给我一个可以粘贴到 og:image 元标签中的 URL。”

“将这张 CSS 卡片渲染为透明 PNG，这样我就能在深色背景上使用它。”

“将我保存的模板 3f2a91d0-... 渲染为 Instagram 快拍，标题为‘Launch day’。”

工具架构

render_html_to_image

字段	类型	必填	说明
html	string	✓*	完整 HTML（通常包含 <body>）。*使用 template_id 时不需要
css	string	–	可选 CSS，将作为 <style> 注入
template_id	uuid	✓*	从控制面板（Templates 页面）保存的模板；可替代 html
variables	object	–	模板中 {{placeholders}} 的取值（已进行 HTML 转义）
preset	enum	–	命名尺寸：og、twitter-card、facebook-post、linkedin-post、instagram-square、instagram-portrait、instagram-story、youtube-thumbnail、pinterest-pin
width	integer 1-2048	–	默认值为 800；覆盖 preset
height	integer 1-2048	–	默认值为 600；覆盖 preset
format	png | jpeg | webp	–	默认值为 png
quality	integer 1-100	–	仅适用于 JPEG/WebP
transparent	boolean	–	PNG/WebP，付费方案可用
background	string	–	例如 #ffffff 或 rgb(…)

返回：图像内容（内联 base64），并在聊天中渲染。

render_html_to_url

输入架构与 render_html_to_image 相同。返回一个文本块，包含：

• url – 临时托管的图像 URL
• format – 最终输出格式
• expires_at – ISO 时间戳（渲染后 24 小时）
• credits_remaining – 你的方案剩余额度

配置

变量	默认值	用途
CODETOIMAGE_API_KEY	–	必填。 前往 codetoimage.app/dashboard/keys 获取
CODETOIMAGE_API_URL	https://api.codetoimage.app	API 基础 URL（可覆盖，用于开发/代理）

套餐 + 限额

• 免费 – 每月 50 次渲染，无水印，功能完整（最高 2048×2048，支持所有格式）。
• 付费（Starter / Hobby / Pro / Scale） – 每月 9 美元起，可渲染 1,000 至 50,000 次，速率限制更高。
• 按量付费 – 预付费额度包 5 美元起，有效期 12 个月，无需订阅。

定价：codetoimage.app/#pricing

相关内容

• Web 仪表板 + REST API
• @codetoimage/cli – 终端/CI 用法

许可证

MIT