HTML/CSS to Image

MCP Server Integration

Generate images with AI assistants using the Model Context Protocol.

New feature

The MCP server is a new feature. We’d love to hear your feedback! Send us an email at support@htmlcsstoimage.com.

---

What is MCP?

The Model Context Protocol (MCP) is an open standard that allows AI assistants to connect to external tools and services. With our MCP server, you can generate images directly from your AI coding assistant without writing any code.

Simply describe what you want, and the AI will use the HTML/CSS to Image API to create it for you.

MCP Server URL: mcp.hcti.io

Available Tools

The MCP server provides the following tools:

Image Creation

Tool	Description
create_image	Generate an image from HTML and CSS. Supports all standard parameters like device_scale, viewport_width, viewport_height, ms_delay, and more.
create_url_image	Take a screenshot of any public URL. Includes options for selectors, viewport settings, and cookie banner blocking.
create_templated_image	Generate an image using a saved template. Pass template_id and template_values to substitute variables in your template.
create_batch_images	Create up to 25 images in a single request. Set default_options and provide variations for each image.
get_max_batch_size	Check the maximum number of images you can create in a single batch based on your plan.

Template Management

Tool	Description
create_template	Save a reusable HTML/CSS template for generating images with variable substitution.
update_template	Modify an existing template by providing the template_id and new content.
list_templates	View all saved templates in your account. Returns up to 100 templates per request.
list_template_versions	View the version history of a specific template.

Authentication

The MCP server uses OAuth for authentication. When you first connect, your browser will open automatically to authorize access to your HTML/CSS to Image account. No manual credential configuration is required.

Setup for Cursor

Click the button below to automatically install the HTML/CSS to Image MCP server in Cursor:

Or manually add the following configuration to your .cursor/mcp.json file:

{
  "mcpServers": {
    "hcti": {
      "type": "http",
      "url": "https://mcp.hcti.io"
    }
  }
}

Restart Cursor after saving the configuration. The first time you use the server, you’ll be prompted to authorize access via your browser.

Setup for Claude Code

To use the MCP server with Claude Code, run the following command:

claude mcp add hcti --transport http https://mcp.hcti.io

To verify the server was added:

claude mcp list

The first time you use the server, you’ll be prompted to authorize access via your browser.

Setup for Claude Desktop

Claude Desktop (the standalone app) also supports MCP servers. Edit your Claude Desktop configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the following configuration:

{
  "mcpServers": {
    "hcti": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.hcti.io"]
    }
  }
}

Restart Claude Desktop after saving the configuration. The first time you use the server, you’ll be prompted to authorize access via your browser.

Setup for Windsurf

Windsurf (by Codeium) supports MCP servers. Add the following to your ~/.codeium/windsurf/mcp_config.json file:

{
  "mcpServers": {
    "hcti": {
      "serverUrl": "https://mcp.hcti.io"
    }
  }
}

Restart Windsurf after updating the configuration. The first time you use the server, you’ll be prompted to authorize access via your browser.

Setup for Cline (VS Code)

Cline is a popular autonomous coding agent for VS Code. To add the MCP server:

1. Open VS Code and go to Cline Settings
2. Navigate to MCP Servers
3. Click Add Server and configure:

{
  "hcti": {
    "url": "https://mcp.hcti.io"
  }
}

Alternatively, edit your Cline MCP settings file directly at ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json.

The first time you use the server, you’ll be prompted to authorize access via your browser.

Setup for Zed

Zed is a high-performance code editor with AI features. Add the MCP server to your Zed settings (~/.config/zed/settings.json):

{
  "context_servers": {
    "hcti": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.hcti.io"]
    }
  }
}

The first time you use the server, you’ll be prompted to authorize access via your browser.

Setup for OpenCode

OpenCode is an open-source AI coding assistant. Add the MCP server to your opencode.json configuration file:

{
  "mcp": {
    "hcti": {
      "type": "remote",
      "url": "https://mcp.hcti.io",
      "enabled": true
    }
  }
}

Alternatively, add it via the command line:

opencode mcp add

The first time you use the server, you’ll be prompted to authorize access via your browser.

Automation Platforms

You can also use the MCP server with automation platforms:

Zapier

Zapier has a dedicated MCP Client that connects to MCP servers. This lets you use the HTML/CSS to Image MCP server within Zapier workflows without writing code.

Zapier MCP Client Integration

Pipedream

Pipedream supports MCP servers for building serverless workflows. Connect the HTML/CSS to Image MCP server to automate image generation in your Pipedream workflows.

Pipedream MCP Integration

The MCP server is also listed on Smithery.

Example Prompts

Once configured, you can ask your AI assistant to generate images naturally. Here are some examples:

Create an image from HTML:

• “Create an image of a blue button that says ‘Subscribe Now’ with rounded corners and a subtle shadow”
• “Generate a social card with a gradient background and the title ‘Hello World’”

Screenshot a website:

• “Take a screenshot of https://stripe.com with device_scale set to 2 for high resolution”
• “Screenshot the pricing table on https://example.com/pricing using the selector ‘.pricing-grid’”

Generate social media images:

• “Create a Twitter/X card image with a gradient background, the title ‘Launching Soon’, and our logo”
• “Make an Open Graph image for my blog post about Python”

Batch create images:

• “Create 10 variations of a product card image, each with a different background color”

Work with templates:

• “List my saved templates”
• “Create an image using my ‘social-card’ template with the title set to ‘New Feature Release’”
• “Save this HTML/CSS as a template called ‘blog-header’ so I can reuse it”

If you design templates in the dashboard first, the Template Editor docs can help you choose blocks, set up variables, and decide what values the MCP server should pass as template_values.

Image Parameters

When creating images, the main parameters are:

Parameter	Type	Description
html	String	The HTML content to render. Required for create_image.
css	String	CSS styles for your HTML.
url	String	The URL to screenshot. Required for create_url_image.

Additional Parameters

Name	Type	Description
additional_header_origins	Array	Allow custom headers on requests to specific additional HTTP or HTTPS origins.
block_consent_banners	Boolean	When set to true, automatically blocks cookie consent banners and popups on websites. Most useful for URL screenshots.
color_scheme	String	Set Chrome to render in light or dark mode. Affects websites using prefers-color-scheme.
dedupe_duration_s	Integer	Reuse an identical recent image without consuming image credits. Sets the lookback window in seconds; defaults and allowed values vary by image type and plan.
device_scale	Double	Control resolution by adjusting the pixel ratio from 0.1 to 3. Higher values increase image quality and file size.
disable_twemoji	Boolean	Set to true to use native emoji fonts instead of Twemoji.
full_screen	Boolean	Generate an image of the entire height of a URL page.
google_fonts	String	Load one or more Google fonts, such as Roboto|Open Sans.
headers	Object	Add custom HTTP headers when screenshotting a URL. Headers are restricted to the requested URL’s origin and any additional_header_origins.
identify_as_hcti	Boolean	Add X-HCTI-SCREENSHOT: 1 to the top-level request when screenshotting a URL.
include_headers_on_subrequests	Boolean	Also add custom headers to same-origin subrequests and subrequests matching additional_header_origins.
jumbo_max_height	Integer	Maximum output height in jumbo mode, up to 80,000 pixels. Must be set with jumbo_max_width and consumes additional image credits.
jumbo_max_width	Integer	Maximum output width in jumbo mode, up to 80,000 pixels. Must be set with jumbo_max_height and consumes additional image credits.
max_wait_ms	Integer	Set a maximum time limit from 500 to 10000 milliseconds for waiting before taking the screenshot.
media_type	String	Set Chrome to render using screen or print CSS media styles.
ms_delay	Integer	Delay before generating the image. Useful when waiting for JavaScript; start with 500 milliseconds.
pdf_options	Object	Customize PDF output with page size, margins, scale, and background printing.
proxy_id	String	Route outbound traffic through one of your organization’s configured HTTP proxies. Available on the 10,000 images/month plan or higher.
render_when_ready	Boolean	Wait to generate the image until JavaScript calls ScreenshotReady().
selector	String	Crop the image to an element matching this CSS selector, such as section#complete-toolkit.container-lg.
storage_destination_id	String	Save rendered files to one of your organization’s configured storage destinations. Available on the 10,000 images/month plan or higher.
timezone	String	Set Chrome’s timezone with an IANA identifier such as America/New_York.
transparent_background	Boolean	Set to true to render with a transparent background.
viewport_height	Integer	Set the height of Chrome’s viewport. Both dimensions must be set when using either.
viewport_landscape	Boolean	Set Chrome’s viewport to landscape mode.
viewport_mobile	Boolean	Set Chrome’s viewport to emulate a mobile device.
viewport_touch	Boolean	Set Chrome’s viewport to support touch events.
viewport_width	Integer	Set the width of Chrome’s viewport. Both dimensions must be set when using either.

Troubleshooting

Authentication Errors

If you receive authentication errors:

• Try disconnecting and reconnecting the MCP server to trigger a new OAuth flow
• Ensure you’re logged into the correct HTML/CSS to Image account in your browser
• Check that pop-ups are not blocked when the OAuth window tries to open

Connection Issues

If the MCP server is not connecting:

• Ensure your network allows outbound HTTPS connections
• Check that the URL is exactly https://mcp.hcti.io
• Restart your AI assistant after updating the configuration

Image Generation Errors

If images fail to generate:

• Check that your account has available image credits on the dashboard
• Ensure HTML content is valid
• For URL screenshots, verify the URL is publicly accessible

---

Need help?

Talk to a human. Please email us support@htmlcsstoimage.com with any questions and we’ll gladly help you get started.