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 預覽圖、社群卡片、徽章、圖表或 mockup，並希望在對話中直接顯示圖片，或取得可嵌入 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 分