{: .no_toc } {: .fs-9 }

Generate images with AI assistants using the Model Context Protocol. {: .fs-4 .fw-300 }

Get an API Key{: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 target="_blank" }

{% include hint.md title="New feature" text="The MCP server is a new feature. We'd love to hear your feedback! Send us an email at support@htmlcsstoimage.com." %}

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

The MCP server provides the following tools:

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.

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.

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.

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.

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.

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.

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.

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.

You can also use the MCP server with automation platforms:

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{: .btn .fs-5 .mb-4 .mb-md-0 target="_blank" }

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{: .btn .fs-5 .mb-4 .mb-md-0 target="_blank" }

The community has also created third-party AI skills for HTML/CSS to Image.

A VM0 community member created an HCTI skill with curl-based examples for HTML/CSS rendering and URL screenshots:

• VM0 skill source (GitHub)
• Raw skill file

{% include hint.md title="Community maintained" text="This skill is maintained by the VM0 community and is not an official HTML/CSS to Image integration." %}

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"

When creating images, the main parameters are:

{% include additional_parameters.md %}

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

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

If images fail to generate:

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

{% include code_footer.md version=1 %}