|
| 1 | +--- |
| 2 | +layout: page |
| 3 | +content_class: mcp-client-guide |
| 4 | +title: "How to take screenshots and render HTML/CSS with Gemini CLI" |
| 5 | +nav_title: "Gemini CLI" |
| 6 | +permalink: /integrations/mcp/gemini/ |
| 7 | +parent: "HTML-to-Image, PDF & Screenshot MCP" |
| 8 | +grand_parent: Integrations |
| 9 | +nav_order: 6 |
| 10 | +description: >- |
| 11 | + Learn how to connect Gemini CLI to HTML/CSS to Image, take website screenshots, and render HTML/CSS as PNG or PDF with copyable prompts. |
| 12 | +--- |
| 13 | +# Gemini CLI MCP Integration |
| 14 | +{: .no_toc } |
| 15 | + |
| 16 | +Capture a webpage or turn HTML/CSS into a PNG, WebP, or PDF with HTML/CSS to Image. |
| 17 | +{: .mcp-lead } |
| 18 | + |
| 19 | +**You'll need:** an [HCTI account](https://htmlcsstoimage.com) with image credits. Sign in through your browser when connecting—no API key to copy. |
| 20 | + |
| 21 | +This guide uses **Gemini CLI**, Google's terminal-based agent. Install and sign in to [Gemini CLI](https://geminicli.com/docs/) before connecting HCTI. |
| 22 | + |
| 23 | +## 1. Connect Gemini CLI |
| 24 | + |
| 25 | +Add HCTI for the current project from your terminal: |
| 26 | + |
| 27 | +```bash |
| 28 | +gemini mcp add --transport http hcti https://mcp.hcti.io |
| 29 | +``` |
| 30 | + |
| 31 | +1. Start `gemini` and run `/mcp auth hcti`. |
| 32 | +2. Sign in to HCTI and review the organization and permissions. Include `usage:read` to check your account usage. |
| 33 | +3. Run `/mcp list` to check the connection. |
| 34 | + |
| 35 | +Ask **"Use HCTI to check my image usage and account limits"** to verify access without rendering an image. |
| 36 | + |
| 37 | +<details class="mcp-config" markdown="1"> |
| 38 | +<summary>Set up with settings.json instead</summary> |
| 39 | + |
| 40 | +Merge this into `.gemini/settings.json` in your project, or `~/.gemini/settings.json` for all projects: |
| 41 | + |
| 42 | +```json |
| 43 | +{ |
| 44 | + "mcpServers": { |
| 45 | + "hcti": { |
| 46 | + "httpUrl": "https://mcp.hcti.io" |
| 47 | + } |
| 48 | + } |
| 49 | +} |
| 50 | +``` |
| 51 | + |
| 52 | +Use `httpUrl` for Streamable HTTP; Gemini CLI's `url` field selects the legacy SSE transport. Restart Gemini CLI after editing settings, then run `/mcp auth hcti`. |
| 53 | + |
| 54 | +To configure all projects from the terminal, add `--scope user` to the `gemini mcp add` command. See [Gemini CLI's MCP guide](https://geminicli.com/docs/tools/mcp-server/). |
| 55 | + |
| 56 | +</details> |
| 57 | + |
| 58 | +## 2. Take a screenshot |
| 59 | + |
| 60 | +Send this prompt after connecting: |
| 61 | + |
| 62 | +```text |
| 63 | +Use HTML/CSS to Image to screenshot https://example.com as a PNG. |
| 64 | +Set viewport_width to 1440 and device_scale to 1. Return the image URL. |
| 65 | +``` |
| 66 | + |
| 67 | +Open the returned image URL to view your screenshot. Replace `https://example.com` with your own public URL. |
| 68 | + |
| 69 | +## 3. Render HTML/CSS |
| 70 | + |
| 71 | +Try a small card with explicit text, colors, and dimensions: |
| 72 | + |
| 73 | +```text |
| 74 | +Use HCTI to render this HTML and CSS as a PNG at device_scale 1. |
| 75 | +HTML: <div class="card">Hello from HCTI</div> |
| 76 | +CSS: .card { width: 1200px; height: 630px; display: flex; |
| 77 | +align-items: center; justify-content: center; background: #172554; |
| 78 | +color: white; font: 64px sans-serif; } |
| 79 | +Return the hosted image URL. |
| 80 | +``` |
| 81 | + |
| 82 | +The result is a dark blue card with centered white text. Edit the text or CSS and render again to refine it. |
| 83 | + |
| 84 | +## Create an Open Graph card |
| 85 | + |
| 86 | +Give Gemini the relevant stylesheet and page title, then ask: |
| 87 | + |
| 88 | +```text |
| 89 | +Read the brand colors and typography in this workspace. Create |
| 90 | +self-contained HTML/CSS for a 1200×630 Open Graph card titled |
| 91 | +"New release". Render it with HCTI at device_scale 1 and return the PNG URL. |
| 92 | +``` |
| 93 | + |
| 94 | +Open the result to check the title, spacing, and brand colors. Ask Gemini to update the HTML/CSS and render again for changes. HCTI needs the rendered markup and accessible assets, so source component files may need to be converted first. |
| 95 | + |
| 96 | +{% include mcp_tools.md %} |
| 97 | + |
| 98 | +## Troubleshooting |
| 99 | + |
| 100 | +For a permission-denied error, [reconnect and approve the required access](/integrations/mcp/permissions/#add-permissions-to-an-existing-connection) before retrying. Usage checks and maximum batch-size checks require `usage:read`. |
| 101 | + |
| 102 | +### Missing tools or connection errors |
| 103 | + |
| 104 | +Run `/mcp list` inside Gemini CLI or `gemini mcp list` from your terminal to inspect connection errors. Run `/mcp auth hcti` to sign in again if needed. |
| 105 | + |
| 106 | +Check that the server uses `httpUrl` in settings and that HCTI is enabled. If you configured `includeTools` or `excludeTools`, make sure they allow the tool you want to use. Approve tool calls when Gemini prompts you. |
| 107 | + |
| 108 | +### Rendering errors |
| 109 | + |
| 110 | +HCTI fetches webpages from its hosted service. Use a publicly accessible URL; it cannot reach your computer's `localhost`. For HTML/CSS rendering, supply the file contents and accessible assets rather than local file paths. Check your [HCTI dashboard](https://htmlcsstoimage.com/dashboard) for available image credits. |
| 111 | + |
| 112 | +See [shared MCP troubleshooting](/integrations/mcp/#troubleshooting) for authentication and rendering errors, or [choose another client](/integrations/mcp/#choose-your-client). |
| 113 | + |
| 114 | +{% include code_footer.md version=1 %} |
0 commit comments