Skip to main content
Glama
beznazwiska

@codetoimage/mcp-server

by beznazwiska
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Remote

@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.

Related MCP server: SnapAPI MCP Server

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):

{
  "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

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:

{
  "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

Field

Type

Required

Notes

html

string

✓*

Full HTML (typically with <body>). *Not needed with template_id

css

string

–

Optional CSS injected as <style>

template_id

uuid

✓*

Saved template from the dashboard (Templates page); alternative to html

variables

object

–

Values for {{placeholders}} in the template (HTML-escaped)

preset

enum

–

Named size: og, twitter-card, facebook-post, linkedin-post, instagram-square, instagram-portrait, instagram-story, youtube-thumbnail, pinterest-pin

width

integer 1-2048

–

Default 800; overrides preset

height

integer 1-2048

–

Default 600; overrides preset

format

png | jpeg | webp

–

Default png

quality

integer 1-100

–

JPEG/WebP only

transparent

boolean

–

PNG/WebP, paid plans

background

string

–

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

Variable

Default

Purpose

CODETOIMAGE_API_KEY

–

Required. Get one at codetoimage.app/dashboard/keys

CODETOIMAGE_API_URL

https://api.codetoimage.app

API 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

Available Tools

2 tools
render_html_to_imageA

Render HTML (and optional CSS) into a PNG/JPEG/WebP image using codetoimage.app. Instead of raw HTML you can pass template_id (a template saved in the dashboard) plus variables to fill its {{placeholders}}, and preset for named platform sizes (og, instagram-story, ...). Returns the image inline so the conversation can display it directly. Use this when you need to see or hand back a finished image (cards, OG previews, charts, badges). If the caller needs a URL to embed elsewhere (Instagram Graph API, OpenGraph meta, Slack unfurl), use render_html_to_url instead.

ParametersJSON Schema
NameRequiredDescriptionDefault
cssNoOptional CSS injected as a <style> block.
htmlNoFull HTML (typically including <body>…</body>). Inline styles work; for larger CSS use the `css` field. Required unless `template_id` is provided.
widthNoViewport width in pixels (default 800).
formatNoOutput format. Default: png.
heightNoViewport height in pixels (default 600).
presetNoNamed viewport size: og 1200×630, twitter-card 1200×628, facebook-post 1200×630, linkedin-post 1200×627, instagram-square 1080×1080, instagram-portrait 1080×1350, instagram-story 1080×1920, youtube-thumbnail 1280×720, pinterest-pin 1000×1500. One template, many sizes. Explicit width/height override the preset.
qualityNoEncoder quality (JPEG/WebP only, 1-100).
variablesNoValues for {{placeholders}} in the template (or in `html` if provided). Values are HTML-escaped server-side. Missing placeholders render as empty.
backgroundNoBackground color, e.g. '#ffffff' or 'rgb(10,10,10)'.
template_idNoID of a template saved in the codetoimage dashboard (Templates page). Use INSTEAD of `html` – the saved HTML/CSS renders with {{placeholders}} filled from `variables`.
transparentNoTransparent background (PNG/WebP only; paid plans).

TDQS

A4.6/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description carries full burden. It explains return format (inline image), mentions paid plans for transparency, and describes placeholder behavior. Lacks details on rate limits or performance, but generally transparent for a rendering tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single dense paragraph, front-loaded with main purpose. Every sentence adds new information without redundancy. Could be slightly more structured (e.g., bullet points), but highly efficient.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite no output schema, the description explains what happens with the rendered image. Covers all major features: inline return, template usage, presets, variables, background, transparency (paid). Complete enough for correct tool invocation.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, baseline 3. Description adds value by explaining the two input modes (html vs template_id+variables), preset dimensions, and how variables fill placeholders. Provides more context than schema alone.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Clearly states it renders HTML/CSS to image formats. Describes alternative input modes (template_id with variables) and preset sizes. Explicitly distinguishes from sibling tool render_html_to_url by specifying when to use each.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides explicit guidance: 'Use this when you need to see or hand back a finished image... If the caller needs a URL... use render_html_to_url instead.' Clearly defines context and alternative.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

render_html_to_urlA

Render HTML (and optional CSS) to an image and return a temporary hosted URL (instead of inline bytes). Supports the same template_id + variables + preset inputs as render_html_to_image. Use this when the caller needs to reference the image elsewhere – Instagram Graph API, OpenGraph meta tags, Slack unfurls, embedding in docs/posts. URL is valid for 24 hours.

ParametersJSON Schema
NameRequiredDescriptionDefault
cssNo
htmlNo
widthNo
formatNo
heightNo
presetNoNamed viewport size: og 1200×630, twitter-card 1200×628, facebook-post 1200×630, linkedin-post 1200×627, instagram-square 1080×1080, instagram-portrait 1080×1350, instagram-story 1080×1920, youtube-thumbnail 1280×720, pinterest-pin 1000×1500. One template, many sizes. Explicit width/height override the preset.
qualityNo
variablesNoValues for {{placeholders}} in the template (or in `html` if provided). Values are HTML-escaped server-side. Missing placeholders render as empty.
backgroundNo
template_idNoID of a template saved in the codetoimage dashboard (Templates page). Use INSTEAD of `html` – the saved HTML/CSS renders with {{placeholders}} filled from `variables`.
transparentNo

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Discloses key behavioral aspects: returns a URL valid for 24 hours, supports template_id/variables/preset inputs. No annotations are present, so description carries full burden. Could mention idempotency or side effects, but generally transparent.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences that are dense with information: first sentence defines purpose, second provides usage context and constraints (24-hour validity). No unnecessary words, front-loaded with key action.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given 11 parameters (0 required), nested objects, and no output schema, the description covers core functionality and use cases. It explains URL lifecycle and sibling relationship. Could be improved by mentioning optional width/height override of preset and output format, but overall adequate.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is low (27%). Description only highlights template_id, variables, and preset, ignoring other parameters like css, html, width, format, transparent. The schema provides some descriptions (e.g., for preset), but the tool description adds minimal value beyond that.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's action: render HTML/CSS to an image and return a temporary hosted URL. It distinguishes from sibling by noting 'instead of inline bytes', providing a specific verb-resource pair.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly states when to use the tool: when the caller needs to reference the image elsewhere (e.g., Instagram Graph API, OpenGraph, Slack). Also mentions that it supports the same inputs as the sibling tool render_html_to_image, aiding decision.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 2 tool updatesv0.2.0
    • First observedrender_html_to_image
    • First observedrender_html_to_url
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A4.6/5.0
Disambiguation5/5

The two tools have clearly distinct purposes: one returns inline image data, the other a temporary URL. Their descriptions explicitly contrast when to use each, leaving no ambiguity.

Naming Consistency5/5

Both tool names follow the exact pattern 'render_html_to_X', where X is the output type (image vs url). The naming is perfectly consistent and descriptive.

Tool Count5/5

With only two tools, the server is tightly scoped to its single purpose of rendering HTML to images. Each tool covers a necessary output format, so the count is ideal.

Completeness5/5

For a server focused solely on rendering HTML to images, offering both inline and URL outputs covers all common use cases. There are no missing features or dead ends.

Maintenance

ActivitySlowing
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • SnapAPI MCP Server

    Sleywill
    A
    license
    A
    quality
    D
    maintenance
    MCP server for the SnapAPI web capture API. Take screenshots, scrape pages, extract structured data, generate PDFs, record videos, and run AI analysis on any URL — all from Claude, Cursor, VS Code, or any MCP client. 9 tools, 30+ device presets, ad/cookie blocking. Install: npx snapapi-mcp
    9
    13
    MIT

  • ShotAPI

    smallhandsome
    A
    license
    Not graded
    quality
    C
    maintenance
    Screenshot and HTML Rendering MCP Server for AI Agents. Capture screenshots, render HTML to images, and generate PDFs via simple API calls. Compatible with Claude, Cursor, and any MCP client.
    1
    MIT

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/beznazwiska/codetoimage-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server