# HTMLCSSToImage MCP MCP
> HTMLCSSToImage is an MCP that generates high-quality images, PDFs, and web screenshots directly from raw HTML/CSS code or live URLs. It's designed for developers and marketers needing to turn code snippets into pixel-perfect visual assets at scale. You can process everything from simple social media banners to complex, multi-page reports with a single API call.
## Overview
- **Category:** developer-tools
- **Price:** Free
- **Tags:** html-to-image, pdf-generation, automation, screenshots, rendering, api-integration
## Description
This MCP lets your agent handle all the heavy lifting involved in turning digital data into visual files. You feed it either a chunk of code (HTML/CSS) or a live web address, and it renders what that content looks like—whether you need a PNG, JPG, WebP, or PDF export. It handles everything from simple screenshots to creating reusable design blueprints. If your workflow involves taking data from one place and needing to show it as a polished image for another system, this is the tool. Users connect through Vinkius' catalog access point and direct their AI agent to handle the rendering process entirely within natural conversation flow. You manage complex asset pipelines without ever leaving your chat interface.
## Tools
### batch_create_images
Generates up to 25 images in a single API request for bulk processing.
### batch_delete_images
Removes multiple existing images from your account at once.
### create_image_from_template
Creates an image using the structure and rules of a previously saved, reusable template.
### create_image
Generates an image either by providing raw HTML/CSS or pointing to a live URL.
### create_template
Initializes a new, reusable blueprint for generating consistent images.
### delete_image
Permanently removes a specific image file from the system.
### edit_template
Modifies an existing image template's structure or variables.
### get_image
Retrieves a generated image file, allowing you to apply specific cropping and resizing parameters.
### get_usage
Checks your current account usage metrics for the service.
### list_images
Fetches a list of all generated images associated with your account.
## Prompt Examples
**Prompt:**
```
Create a PNG image from this HTML: Hello MCP
```
**Response:**
```
I've generated your image. You can view it here: https://hcti.io/v1/image/example_id.png
```
**Prompt:**
```
Take a full-page screenshot of https://github.com/trending
```
**Response:**
```
Capturing the full page... Done! Here is the link to your screenshot of GitHub Trending.
```
**Prompt:**
```
Show me my current API usage for HTMLCSSToImage.
```
**Response:**
```
You have used 150 out of 1000 images this month. Your account is in good standing.
```
## Capabilities
### Render Code into Images
Generates pixel-perfect images from raw HTML/CSS snippets, letting you control viewports and styling.
### Capture Live Webpages
Takes full-page or element-specific screenshots from any public URL with browser precision.
### Scale Assets via Templates
Builds reusable image templates and generates dynamic images by injecting variables into those blueprints.
### Manage Image Batches
Creates, deletes, or retrieves groups of up to 25 images in single requests for high-volume workflows.
### Control Output Details
Retrieves generated files and metadata, allowing you to apply precise cropping and resizing parameters.
## Use Cases
### Creating Open Graph Images
The developer needs to generate a consistent set of social sharing images for 50 new blog posts. Instead of manually designing each, they use `create_template` and then run the batch process with `batch_create_images`, feeding in the post title and thumbnail URL.
### Generating PDF Reports
The content manager has a monthly usage report hosted at an internal URL. They ask their agent to use `create_image` on that URL, specifying the PDF output format, so they can share it without needing manual browser exports.
### Mocking Up UIs
A designer needs a visual mockup of how a component looks in dark mode. They provide the CSS snippet and ask their agent to use `create_image` with specific parameters, controlling the viewports and color scheme instantly.
### Cleaning Up Assets
The team ran a large campaign and generated hundreds of temporary images. Instead of manually deleting them one by one, they run `batch_delete_images` to clear out all the old assets in one go.
## Benefits
- Batch processing is fast. Use `batch_create_images` to process 25 banners at once; you don't need to run twenty separate requests.
- Maintain brand consistency by using the template workflow: first, use `create_template`, then generate assets with `create_image_from_template`. This keeps everything uniform.
- When a webpage changes, you just update the source and re-run. Use `create_image` on a URL to grab a fresh screenshot instantly.
- Need specific crops? Don't just download the full image. Run `get_image`, which lets you specify exactly where you want to crop or how large it should be.
- Keep an eye on your limits using `get_usage`. This prevents costly failures and keeps your automated workflows running smoothly.
## How It Works
The bottom line is: you talk to your agent, and it handles the complex rendering calls in the background.
1. First, subscribe to the MCP using your HCTI User ID and API Key.
2. Next, prompt your agent with either a URL or a code snippet. If you need consistency, start by running `create_template` to set up a reusable design structure.
3. Finally, instruct your agent to process the assets—for example, using `batch_create_images` for bulk jobs or `create_image_from_template` with specific data.
## Frequently Asked Questions
**How do I make multiple images at once using HTMLCSSToImage?**
You use the `batch_create_images` tool. This lets you queue up and process up to 25 different image generation requests in a single call, saving time on high-volume jobs.
**Can I edit an existing template with HTMLCSSToImage?**
Yes, use the `edit_template` tool. This allows you to modify the structure or variables of a blueprint without having to start from scratch.
**What is the difference between `create_image` and `create_image_from_template`?**
`create_image` generates content based on an immediate URL or code snippet. `create_image_from_template` forces the output to follow a predefined, saved blueprint for maximum consistency.
**How do I check my usage with HTMLCSSToImage?**
Run the `get_usage` tool. This immediately tells you how many images you've used and what your current account limits are, so you never hit a quota wall.
**How do I use the `get_image` tool to crop or resize an image after generation?**
You pass specific query parameters when calling `get_image`. You define exact dimensions and cropping coordinates, which lets you get a perfectly sized asset without having to re-render the whole thing.
**If I need to clean up old files, how do I use the `batch_delete_images` tool?**
You call `batch_delete_images` with a list of image IDs. This removes multiple images at once, which is much faster and more efficient than running single delete commands using `delete_image`.
**Does the `create_image` tool support generating screenshots from live URLs or only code snippets?**
It handles both. You can pass a full URL to capture a screenshot, or you can provide raw HTML and CSS code for rendering. This makes it flexible enough for any visual source.
**How do I use the `list_images` tool to find out what images I've already generated?**
Running `list_images` returns a list of your stored image IDs and basic metadata. You can then reference these returned IDs for later retrieval, modification, or deletion.
**Can I capture just a specific element of a webpage instead of the whole page?**
Yes! Use the `create_image` tool and provide a CSS `selector`. The API will find that specific element and crop the resulting image to its dimensions.
**How do I generate multiple images at once for a bulk project?**
You can use the `batch_create_images` tool. It allows you to send an array of variations and optional default settings to generate up to 25 images in a single API call.
**How can I check my remaining API credits and usage?**
Simply run the `get_usage` tool. It will return your current account statistics, including total images generated and your remaining balance.