agent-plugins

# 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](https://agent-plugins.org/) 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](https://chatgpt.com/plugins/plugin_asdk_app_6a4d168031448191abcd6540497efb7b) 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:

```text
/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:

```bash
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:

```bash
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`](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:

```text
/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:

```bash
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:

```bash
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](clawhub/html-css-to-image/SKILL.md) 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](clawhub/hcti-open-graph-images/SKILL.md) 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:

```bash
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:

```bash
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 <your-clawhub-owner-handle>` 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](https://docs.openclaw.ai/clawhub/publishing) and [skill format](https://docs.openclaw.ai/clawhub/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](https://htmlcsstoimage.com/features/og-images) 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 oper