Codetoimage Mcp Server

io.github.beznazwiska由 GitHub 账号 beznazwiska 发布v0.2.0更新于 Oct 24, 2026

Pixel-perfect HTML/CSS to PNG/JPG/WebP for AI agents — inline image or 24h hosted URL.

已验证STDIO仅桌面开发者工具媒体与设计

概览

AI 生成的概览

将 HTML/CSS 渲染为 PNG、JPEG 或 WebP 图片，可内联返回或给出临时托管链接。

可以做什么
这个本地 MCP 服务器提供两个工具，把 HTML 和 CSS 转成图片。render_html_to_image 直接内联返回渲染结果，方便助手或用户立即查看；render_html_to_url 返回有效期 24 小时的临时托管链接。两者都支持完整 HTML、可选 CSS、社交媒体预设尺寸或最大 2048x2048 的自定义尺寸，以及 PNG、JPEG、WebP 输出。也可以使用仪表盘中保存的模板代替原始 HTML，并填充占位变量。
适用场景
适合需要生成视觉内容的场景，例如 Open Graph 预览图、社交卡片、徽章、图表或效果图，并希望在对话中直接展示图片，或拿到可嵌入 meta 标签、文章和消息预览的链接。
运行要求
通过 stdio 在本地运行，通常用 npx 启动，因此需要 Node.js。需要来自服务商仪表盘的 CODETOIMAGE_API_KEY；可选的 CODETOIMAGE_API_URL 用于覆盖 API 基础地址。需要能访问渲染 API 的网络。仅支持桌面端 MCP 客户端。
安装前请注意
API 密钥通过 CODETOIMAGE_API_KEY 环境变量传入，属于机密信息，不要写入共享配置文件。渲染的 HTML 和模板变量会发送到第三方渲染服务。托管链接 24 小时后失效。免费额度为每月 50 次渲染；付费方案和预付费额度包需要花钱，透明背景输出需要付费方案。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Codetoimage Mcp Server，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Desktop only，通过 STDIO。 STDIO 服务会启动本地进程，因此需要 SourceWeft 桌面宿主。

其他 MCP 客户端

参照 仓库 中的启动说明。

README

@codetoimage/mcp-server

Official Model Context Protocol server for codetoimage.app – render HTML/CSS to PNG/JPG/WebP directly from Claude Desktop, Claude Code, Cursor, or any MCP-compatible client.

What you get

Two tools, no setup beyond an API key:

  • render_html_to_image – returns the image inline so your agent (or you, in chat) can see it immediately. Best for "show me the rendered card", OG preview iteration, chart generation, badge mockups.
  • render_html_to_url – returns a temporary hosted URL (24h TTL). Best when the image needs to live somewhere external – Instagram Graph API, OpenGraph meta tags, Slack unfurls, docs/posts embeds.

Install

You don't need to install anything globally – MCP clients can run it via npx. Get an API key at codetoimage.app/dashboard/keys, then add the config below.

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

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

Restart Claude Desktop. The two tools appear in the tool picker.

Claude Code

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

Then set the env var in your shell profile (or pass -e CODETOIMAGE_API_KEY=cti_live_… in the claude mcp add call).

Cursor

Edit ~/.cursor/mcp.json:

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

Usage from an agent

The tools are self-documenting – your agent will pick the right one based on intent. Example prompts that just work:

"Render this card as a PNG: <div style='padding:40px;background:#6366f1;color:white;border-radius:16px'>Hello</div> at 800×400."

"Generate an Open Graph image for the blog post 'Why agents need pixel-perfect rendering' and give me a URL I can paste into the og:image meta tag."

"Take this CSS card and render it as a transparent PNG so I can use it on a dark background."

"Render my saved template 3f2a91d0-... with title 'Launch day' as an Instagram story."

Tool schemas

render_html_to_image

FieldTypeRequiredNotes
htmlstring✓*Full HTML (typically with <body>). *Not needed with template_id
cssstring–Optional CSS injected as <style>
template_iduuid✓*Saved template from the dashboard (Templates page); alternative to html
variablesobject–Values for {{placeholders}} in the template (HTML-escaped)
presetenum–Named size: og, twitter-card, facebook-post, linkedin-post, instagram-square, instagram-portrait, instagram-story, youtube-thumbnail, pinterest-pin
widthinteger 1-2048–Default 800; overrides preset
heightinteger 1-2048–Default 600; overrides preset
formatpng | jpeg | webp–Default png
qualityinteger 1-100–JPEG/WebP only
transparentboolean–PNG/WebP, paid plans
backgroundstring–e.g. #ffffff or rgb(…)

Returns: image content (base64 inline), rendered in the chat.

render_html_to_url

Same input schema as render_html_to_image. Returns a text block with:

  • url – temporary hosted image URL
  • format – final output format
  • expires_at – ISO timestamp (24h from render)
  • credits_remaining – your plan's quota state

Configuration

VariableDefaultPurpose
CODETOIMAGE_API_KEY–Required. Get one at codetoimage.app/dashboard/keys
CODETOIMAGE_API_URLhttps://api.codetoimage.appAPI base URL (override for dev/proxy)

Plans + limits

  • Free – 50 renders/month, no watermark, full features (up to 2048×2048, all formats).
  • Paid (Starter / Hobby / Pro / Scale) – from $9/mo for 1,000 renders up to 50,000/month, higher rate limits.
  • Pay as you go – prepaid credit packs from $5, valid 12 months, no subscription.

Pricing: codetoimage.app/#pricing

Related

License

MIT

来源：README.md，提交 ea00517

工具

0
SourceWeft 尚未在沙箱中启动过该软件包，因此其工具未知。

版本历史

1
  1. v0.2.0最新Sep 16, 2026

评分

已满足适用检查项的 50%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通25 分

    请保持端点能够响应 MCP 握手；SourceWeft 每 30 天探测一次。

  • 已声明认证方式10 分

    请在注册中心条目中声明凭据请求头，或保持端点能够响应探测，以便判定其认证方式。

  • 已列出工具15 分

    请让服务器在无凭据时响应 tools/list，或发布可在沙箱中无凭据启动的软件包。

  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分