HTML/CSS to Image
About
An MCP server for generating images from HTML & CSS or screenshots of URLs using htmlcsstoimage.com.
Details
- Author
- Unknown
- Categories
- Developer Tools, Frontend, Other, Automation, Media
Jump to
An MCP server for generating images from HTML & CSS or screenshots of URLs using htmlcsstoimage.com.
What can you do with HTML CSS To Image MCP?
Generate images with AI assistants using the Model Context Protocol.
The MCP server is a new feature. We’d love to hear your feedback! Send us an email atsupport@htmlcsstoimage.com.
Simply describe what you want, and the AI will use the HTML/CSS to Image API to create it for you.
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.jsonfile:
{ "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
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
{ "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.
{ "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.
{ "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.
{ "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.
{ "mcp": { "hcti": { "type": "remote", "url": "https://mcp.hcti.io", "enabled": true } } }
Alternatively, add it via the command line:
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.
Pipedream supports MCP servers for building serverless workflows. Connect the HTML/CSS to Image MCP server to automate image generation in your Pipedream workflows.
The MCP server is also listed onSmithery.
Once configured, you can ask your AI assistant to generate images naturally. Here are some examples:
- “Take a screenshot ofhttps://stripe.comwith device_scale set to 2 for high resolution”
- “Screenshot the pricing table onhttps://example.com/pricingusing the selector ‘.pricing-grid’”
- “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”
- “Create 10 variations of a product card image, each with a different background color”
- “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, theTemplate Editor docscan help you choose blocks, set up variables, and decide what values the MCP server should pass astemplate_values.
When creating images, the main parameters are:
- 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
- Ensure your network allows outbound HTTPS connections
- Check that the URL is exactlyhttps://mcp.hcti.io
- Restart your AI assistant after updating the configuration
- Check that your account has available image credits on thedashboard
- Ensure HTML content is valid
- For URL screenshots, verify the URL is publicly accessible
Talk to a human. Please email ussupport@htmlcsstoimage.comwith any questions and we’ll gladly help you get started.
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
Official MCP server for Very Good FFmpeg
MCP server for Audacity 3.x with 131 tools — effects, cleanup, mastering, format conversion, transcription.
Free file conversion between 999 routes (images, video, audio, documents, data, fonts, ebooks, archives) — no API key required.
A Python package for media processing using FFmpeg and FastMCP.
Convert files between various formats, including images, documents, audio, video, and more.
Batch audio processing and optimization using FFmpeg. Modify sample rate, bitrate, volume, channels, and apply effects.
A server for media processing, offering powerful video and image manipulation using FFmpeg and ImageMagick.
Convert video files between various formats using FFmpeg. Requires FFmpeg to be installed on the system.
Bitcoin-powered tools marketplace. Image, text, video, music, speech, 3D, file conversion, SMS — all via Lightning micropayments. No signup required.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
