MCP Server Integration

Generate images with AI assistants using the Model Context Protocol.

Get an API Key

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

Template Management

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

Community skills

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

VM0 community skill

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

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:

Additional Parameters

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.