HTML/CSS to Image API

Name: HTML/CSS to Image API
Author: htmlcsstoimage

by htmlcsstoimageversion 1.1.0i★ 7iRuns in the cloud

Registry nameio.github.htmlcsstoimage/html-css-to-image

How to install

What it does

Generate images and PDFs from HTML/CSS, live websites, and reusable templates.

Connects Runs in the cloud
Account or key Sign in to the service when you connect (OAuth)
Category Web & browsers

Install

Pick the AI app you use, then copy the settings.

Passed 5/5 checks · What you ask goes through the maker’s server (mcp.hcti.io) · ✓ Commands checked Nov 13, 2026

First: which AI do you use?

ClaudeWeb · app · phoneChatGPTWebClaude CodeTerminalCursorCode editorVS CodeCode editorOtherOther apps

Pick your app and the steps appear below.

Works with Claude · about 2 min

No key, nothing to install · Set it up once on claude.ai or the desktop app, then use it in chat · free accounts can add 1 · on Team/Enterprise an Owner adds it

Open Claude’s Connectors page
CustomizeConnectors
Done
Click “Add” → “Custom” → “Web” and fill in these 2 fields
Copy each value into the field with the same name in Claude, then click Continue
Name · NameHTML/CSS to Image API
Remote MCP server URL · Addresshttps://mcp.hcti.io
Click Continue past the sign-in settings Claude detected · under Authentication choose what the maker says (Sign in now, Sign in when needed or No sign in), then click Add
Done
Turn it on in a chat
+ConnectorsHTML/CSS to Image API
Done
Try it
Use HTML/CSS to Image API and tell me what you can do for me, then show me one thing
✓ If Claude says it is using HTML/CSS to Image API or shows a HTML/CSS to Image API tool in the answer, you are connected

Menu names checked against Anthropic’s help page on Nov 11, 2026 · your screen may differ slightly by app version

Works with ChatGPT, depending on your plan

Full MCP: ChatGPT Business, Enterprise or Edu on the web · Pro: connects with read/fetch permissions, so tools that change data may not work · Plus: not confirmed in OpenAI’s docs; if you see an add-custom-MCP option on the Plugins page you can try these steps · web only

Open ChatGPT’s add-MCP page on the web
Plugins+Add custom MCP server
Done
Fill in the name and address
Enter a name, paste the address under Connection, tick the risk warning and click Create as a plugin
Name · NameHTML/CSS to Image API
Connection · Addresshttps://mcp.hcti.io
Done
Pick HTML/CSS to Image API in a chat
Start a new chat and pick HTML/CSS to Image API from your plugins before typing
Done
Try it
Use HTML/CSS to Image API and tell me what you can do for me, then show me one thing
✓ If ChatGPT says it is using HTML/CSS to Image API or shows a HTML/CSS to Image API tool in the answer, you are connected

Menu names checked against OpenAI’s help page on Nov 11, 2026 · your screen may differ slightly by app version

Works with Claude Code · about 2 min

No key, nothing to install

Open Terminal
Mac: press Command+Space and type Terminal · Windows: open PowerShell
Done

Paste this command and press Enter

claude mcp add --transport http --scope user html-css-to-image https://mcp.hcti.io

Done

Type /mcp in Claude Code
You should see HTML/CSS to Image API listed as connected
Done
Try it
Use HTML/CSS to Image API and tell me what you can do for me, then show me one thing
✓ If Claude Code says it is using HTML/CSS to Image API or shows a HTML/CSS to Image API tool in the answer, you are connected

Menu names checked against Anthropic’s help page on Nov 11, 2026 · your screen may differ slightly by app version

Works with Cursor · about 2 min

No key, nothing to install

Click this button to open Cursor
Open in Cursor
Cursor asks you to confirm; click Install
Done
Open the AI chat in Cursor in Agent mode
Done
Try it
Use HTML/CSS to Image API and tell me what you can do for me, then show me one thing
✓ If Cursor says it is using HTML/CSS to Image API or shows a HTML/CSS to Image API tool in the answer, you are connected

Menu names checked against Cursor’s help page on Nov 11, 2026 · your screen may differ slightly by app version

Works with VS Code · about 2 min

No key, nothing to install

Click this button to open VS Code
Open in VS Code
VS Code asks you to confirm; click Install
Done
Open the AI chat in VS Code in Agent mode
Done
Try it
Use HTML/CSS to Image API and tell me what you can do for me, then show me one thing
✓ If VS Code says it is using HTML/CSS to Image API or shows a HTML/CSS to Image API tool in the answer, you are connected

Menu names checked against VS Code’s help page on Nov 11, 2026 · your screen may differ slightly by app version

Other apps that use MCP, such as Windsurf, Zed or Gemini CLI, each add servers differently. See how in the app list.

See every app that uses MCP →

Address for apps that connect over the web

Addresshttps://mcp.hcti.io

JSON settings are under “For developers” below

Stuck? Ask people who use HTML/CSS to Image API💬 Discussion →

For developers: Terminal commands and JSON settings

Over the web

Claude Code

claude mcp add --transport http --scope user html-css-to-image https://mcp.hcti.io

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "html-css-to-image": {
      "url": "https://mcp.hcti.io"
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "html-css-to-image": {
      "type": "http",
      "url": "https://mcp.hcti.io"
    }
  }
}

These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.

At a glance

GitHub stars i: 7
Downloads per weeki: Not on npm/PyPI
Licence i: MIT
Connection: Runs in the cloud
Transport: streamable-http
Latest versioni: 1.1.0
Categoryi: Web & browsers
Published to registryi: Oct 6, 2026
Code last changedi: Nov 12, 2026
Maker: htmlcsstoimage
Repo: htmlcsstoimage/agent-plugins
Website: htmlcsstoimage.com
Registry status: Active

Which apps can use it

Based on how this server connects and on each app’s own docs, checked Nov 10, 2026.

Connect over the internet in

Claude ChatGPT Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Open WebUI Raycast

All apps, with pros and cons →

What it can do

The server asks you to sign in before it lists its tools.

Basic checksi

We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 14, 2026

✓ Pass
Maker matches the repo
The registry name was verified with the GitHub account htmlcsstoimage, which owns the repo
✓ Pass
Still maintained
Code last changed 2 days ago
✓ Pass
Has a licence
Uses MIT
✓ Pass
Endpoint responds
Responded in 573 ms (HTTP 401)
✓ Pass
Sign-in with OAuth
Declares OAuth sign-in, so your AI app can take you to log in
… Not checked yet
No hidden instructions in tool descriptions
Not checked yet; we read the tool list when we check the endpoint

Discussion

Ask, share a tip or report that it does not work. Sorted by what people marked helpful.

No posts yet. Be the first to ask or share.

Posts here are written by users, not the PopNx team.

User reviews

No reviews yet

Compared with others in Web & browsersi

More stars than 91% of the other 1514 servers in this category
Published to the registry more recently than 43% of the other 1514 servers in this category
Basic checks equal to or better than 100% of the other 1514 servers in this category

Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.

Common questions

Is HTML/CSS to Image API safe?

It passed 5 of 5 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.

What keys or codes does it need?

The registry does not list a required key, though some servers ask you to sign in on first use.

Does it run on my computer or in the cloud?

It runs in the maker’s cloud. Connect over the internet with nothing to install, but what you send passes through the maker’s servers.

Is it still maintained?

The GitHub repo last changed 2 days ago, and the latest version (1.1.0) reached the registry 39 days ago.

Which apps can use it?

Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. It connects by URL, so apps that accept remote MCP servers work too, such as ChatGPT on the web (full MCP on Business and above; Pro read-only).

What can I use instead?

In the same category: Browser Use, Scrapling MCP Server, Chrome DevTools MCP

Others in the same category

Servers in the same category from other makers, sorted by stars.

Reading a card:↓ Downloads per weeki★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi

Browser Use

Lets AI do web tasks for you, such as filling forms, searching and extracting data, in the maker’s cloud browsers or on your computer.

by browser-useWidely used↓ 1.7M/wk★ 120.9KUpdated 24 days ago

Computer or cloud✓ service owner · browser-use.com

Install

Scrapling MCP Server

Web scraping with stealth HTTP, real browsers, and Cloudflare bypass. CSS selectors supported.

by D4VinciWidely used↓ 396.9K/wk★ 102.5KUpdated 9 days ago

Runs on your computer

Install

Chrome DevTools MCP

Lets AI use Chrome’s developer tools to inspect pages, find what makes them slow and spot errors. Made by the Chrome DevTools team.

by ChromeDevToolsWidely used↓ 1.9M/wk★ 55.4KUpdated 3 days ago

Runs on your computer

Install

README from the maker

Open the README

Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.

HTML/CSS to Image API for AI agents

Let AI agents capture live website screenshots, render HTML/CSS, and populate reusable templates as images or PDFs—without managing a browser.

This repository is a portable Agent Plugin package with client-specific manifests for the hosted HCTI MCP server at https://mcp.hcti.io. Authentication uses HCTI's browser-based OAuth flow; no API key or access token is stored in this repository.

Repository layout

Path	Purpose
`plugin.json`	Portable Agent Plugins manifest.
`mcp.json`	Portable MCP configuration.
`.mcp.json`	Claude Code, GitHub Copilot, and Grok-compatible MCP configuration.
`llms-install.md`	Agent-readable installation guidance for Cline and other MCP clients.
`.codex-plugin/plugin.json`	Native ChatGPT and Codex plugin manifest.
`.app.json`	Maps the package to the official published OpenAI plugin.
`.claude-plugin/plugin.json`	Claude Code plugin manifest.
`.cursor-plugin/plugin.json`	Cursor Marketplace manifest.
`.grok-plugin/plugin.json`	Grok Build marketplace manifest.
`gemini-extension.json`	Gemini CLI extension manifest.
`kimi.plugin.json`	Kimi Code plugin manifest.
`skills/hcti-image-generation/`	Image generation and template workflow guidance.
`skills/hcti-open-graph-images/`	Dynamic Open Graph image configuration guidance.
`clawhub/html-css-to-image/`	Standalone OAuth/MCP rendering skill for ClawHub.
`clawhub/hcti-open-graph-images/`	Standalone OAuth/MCP Open Graph skill for ClawHub.

ChatGPT and Codex

Install the official HTML/CSS to Image plugin from the Plugins Directory in ChatGPT or Codex. This is the preferred OpenAI integration and uses HCTI's registered MCP connection with browser-based OAuth.

The native .codex-plugin/plugin.json manifest packages the shared HCTI skill, while .app.json maps the package to the published OpenAI plugin.

Kimi Code

Install the plugin directly from GitHub in Kimi Code:

/plugins install https://github.com/htmlcsstoimage/agent-plugins

/reload

Run /mcp-config login hcti and complete authorization in your browser. Then use /mcp to confirm that the HCTI tools are connected.

To test a local checkout, use /plugins install /path/to/agent-plugins. Kimi copies installed plugins into its managed plugin directory, so reinstall after changing the local source.

Gemini CLI

Install the extension directly from GitHub:

gemini extensions install https://github.com/htmlcsstoimage/agent-plugins

Restart Gemini CLI, run /extensions list to confirm the extension is enabled, then run /mcp auth hcti and complete authorization in your browser. Use /mcp list to confirm the HCTI tools are connected. Gemini CLI automatically discovers the included HCTI Agent Skills.

To test a local checkout during development, run gemini extensions link /path/to/agent-plugins, restart Gemini CLI, and inspect it with /extensions list.

GitHub Copilot

Install a local checkout

Install this repository directly:

copilot plugin install /path/to/agent-plugins

Start Copilot CLI and use /plugin list, /skills list, and /mcp to confirm that the plugin, skill, and HCTI server are available. Connect hcti from /mcp and complete authorization in your browser.

Cline

Give Cline the repository's llms-install.md to configure the hosted HCTI server, or add it manually as a remote Streamable HTTP server at https://mcp.hcti.io. Complete the OAuth authorization in your browser; no API key or local server installation is required.

Claude Code

Install from the Claude community marketplace

After the plugin is published, add Anthropic's community marketplace and install the plugin:

/plugin marketplace add anthropics/claude-plugins-community

/plugin install html-css-to-image@claude-community /reload-plugins

Run /mcp, select hcti, and complete authorization in your browser. Claude can invoke the HCTI skill automatically when relevant; it is also available as /html-css-to-image:hcti-image-generation.

Test a local checkout

Validate and load this repository directly:

claude plugin validate . --strict

claude --plugin-dir .

In the test session, run /mcp to connect hcti, then try an image request. Use /reload-plugins after changing the manifest, skill, or MCP configuration.

Cursor

Install from the Cursor Marketplace

After the plugin is published, open Customize in Cursor, search for HTML/CSS to Image API, select Install, and choose the desired scope.

Open Cursor's MCP settings, find hcti, select Connect, and complete authorization in your browser. Start a new Agent chat after connecting so the HCTI tools are available.

Test a local checkout

Copy this repository into Cursor's local plugin directory:

mkdir -p ~/.cursor/plugins/local

cp -R /path/to/agent-plugins ~/.cursor/plugins/local/html-css-to-image

Restart Cursor or run Developer: Reload Window, then confirm that HTML/CSS to Image API appears in Customize. Connect the hcti MCP server from Cursor's MCP settings before testing an image request.

For another test cycle, replace the copied html-css-to-image directory with the current checkout and reload Cursor.

Grok Build

The xAI plugin marketplace points to this repository at a pinned commit. Its Grok manifest reuses the root skill, MCP endpoint, and assets.

After the marketplace entry is available, install HTML/CSS to Image in Grok Build, connect the hcti MCP server when prompted, and complete authorization in your browser.

ClawHub / OpenClaw

The ClawHub skill supports HTML/CSS rendering, website screenshots, PDF output, and saved-template rendering through the hosted MCP server. Users connect to https://mcp.hcti.io using browser-based OAuth; no API keys are required. Rendering requires an HCTI account and available credits.

The separate Open Graph skill creates persistent dynamic social-preview configurations and integrates their image URLs into website metadata. It includes the webpage integration reference and uses the same OAuth connection.

These standalone distributions live outside skills/ so other clients do not discover duplicate skills. Their setup instructions register the server in OpenClaw and complete OAuth; installing a skill alone does not establish the connection. Publish only the skill folder, not the whole plugin repository.

From this repository's root, with the current ClawHub CLI installed:

clawhub login

clawhub skill publish ./clawhub/html-css-to-image \ --slug html-css-to-image \ --name "HTML/CSS to Image" \ --categories integrations,creative \ --topics "screenshots,html,css,pdf,images" \ --dry-run

Preview the Open Graph skill separately:

clawhub skill publish ./clawhub/hcti-open-graph-images \

--slug hcti-open-graph-images \ --name "HTML/CSS to Image — Dynamic Open Graph Images" \ --categories integrations,development \ --topics "open-graph,social-previews,seo,images,html" \ --dry-run

After reviewing each preview, run its publish command without --dry-run. To publish under an organization, add --owner to both commands; otherwise the authenticated user owns the listing. Publication is separate from committing this repository, and new releases may wait for automated review.

ClawHub distributes published skills under MIT-0. Review those terms before the first publication; the hosted HCTI service remains subject to its own terms. See ClawHub publishing and skill format.

Included capabilities

The core rendering and template tools are:

Tool	Purpose
`create_image`	Render HTML and CSS as an image or PDF.
`create_url_image`	Capture a public URL or selected page element.
`create_templated_image`	Render a saved HCTI template with variable values.
`create_batch_images`	Generate multiple image variations in one request.
`get_max_batch_size`	Check the account's current batch limit.
`create_template`	Save a reusable HTML/CSS template.
`update_template`	Update an existing template.
`list_templates`	List templates in the authorized account.
`list_template_versions`	Inspect a template's version history.

Managing resources with MCP

Beyond generating images, the HCTI MCP server can manage supporting resources in the connected organization:

Resource	Tools	Purpose
Usage	`check_usage`	Check the organization's current image usage and limits.
Open Graph configurations	`create_og_config`, `update_og_config`, `get_og_config`, `list_og_configs`, `delete_og_config`	Manage dynamic social-preview images for pages on a website.
Proxies	`create_proxy`, `update_proxy`, `get_proxy`, `list_proxies`, `delete_proxy`	Manage proxies used when HCTI accesses source websites.
Storage destinations	`create_storage_destination`, `update_storage_destination`, `get_storage_destination`, `list_storage_destinations`, `delete_storage_destination`, `get_aws_storage_external_id`	Manage external destinations for generated images and retrieve the external ID needed for AWS setup.

Dynamic Open Graph image configurations are an especially useful integration point. An agent can resolve an existing HCTI template, map page metadata into its variables, optionally select a configured proxy or storage destination, and create a persistent configuration for serving cached social images.

Resource tools operate on the HCTI organization selected during OAuth authorization, and available tools depend on the permissions granted to that connection. Listing and retrieval are read-only; create, update, and delete operations change the account. In particular, update_og_config replaces the complete configuration, so agents should retrieve the current configuration and preserve unchanged settings before updating it.

Example requests

"Create a 1200×630 Open Graph image with this title and color palette."
"Capture the pricing table on https://example.com/pricing."
"List my HCTI templates and render the social-card template with this headline."
"Create five product-card variations with different accent colors."
"Create a dynamic Open Graph configuration for https://example.com using my social-card template and map its title and description from page metadata."

Data handling

Requests sent through the plugin are processed by the hosted HTML/CSS to Image service. HTML, CSS, template values, target URLs, rendering options, and resource configuration supplied to HCTI are sent to that service; persistent resources are stored in the connected HCTI organization. Do not provide cookies, authorization headers, private URLs, or other secrets unless intentionally configuring an authorized rendering workflow and you understand that HCTI will process that data.

License and service terms

The plugin files in this repository are available under the MIT License. The license applies to this repository's source code, configuration, and documentation; it does not license the hosted HTML/CSS to Image service. Use of the service is governed separately by the Terms of Use and Privacy Policy.

Validate

Run the repository checks:

node scripts/validate-template.mjs

Validate the Claude adapter with Claude Code's official strict validator:

claude plugin validate . --st

Only the beginning is shown; read the rest in the repo

HTML/CSS to Image API

What it does

Install

Open Claude’s Connectors page

Click “Add” → “Custom” → “Web” and fill in these 2 fields

Turn it on in a chat

Try it

Open ChatGPT’s add-MCP page on the web

Fill in the name and address

Pick HTML/CSS to Image API in a chat

Try it

Open Terminal

Paste this command and press Enter

Type /mcp in Claude Code

Try it

Click this button to open Cursor

Open the AI chat in Cursor in Agent mode

Try it

Click this button to open VS Code

Open the AI chat in VS Code in Agent mode

Try it

Over the web

At a glance

Which apps can use it

Related guides

What it can do

Basic checksi

Maker matches the repo

Still maintained

Has a licence

Endpoint responds

Sign-in with OAuth

No hidden instructions in tool descriptions

Discussion

User reviews

Compared with others in Web & browsersi

Common questions

Others in the same category

Browser Use

Scrapling MCP Server

Chrome DevTools MCP

README from the maker

HTML/CSS to Image API for AI agents

Repository layout

ChatGPT and Codex

Kimi Code

Gemini CLI

GitHub Copilot

Install a local checkout

Cline

Claude Code

Install from the Claude community marketplace

Test a local checkout

Cursor

Install from the Cursor Marketplace

Test a local checkout

Grok Build

ClawHub / OpenClaw

Included capabilities

Managing resources with MCP

Example requests

Data handling

License and service terms

Validate