# HTML/CSS to Image ```json { "name": "HTML/CSS to Image", "slug": "htmlcss_to_image", "url": "https://composio.dev/toolkits/htmlcss_to_image", "markdown_url": "https://composio.dev/toolkits/htmlcss_to_image.md", "logo_url": "https://logos.composio.dev/api/htmlcss_to_image", "categories": [ "design & creative tools" ], "is_composio_managed": false, "updated_at": "2026-08-20T15:32:21.372Z" } ``` ![HTML/CSS to Image logo](https://logos.composio.dev/api/htmlcss_to_image) ## Description Securely connect your AI agents and chatbots (Claude, ChatGPT, Cursor, etc) with HTML/CSS to Image MCP or direct API to render HTML into images, capture public webpages, generate PDFs, and create assets from reusable templates through natural language. ## Summary HTML/CSS to Image is an API for converting HTML, CSS, URLs, and templates into images and PDFs. Use it to generate clean visual assets, screenshots, and documents without running browser infrastructure. ## Categories - design & creative tools ## Toolkit Details - Tools: 10 ## Images - Logo: https://logos.composio.dev/api/htmlcss_to_image ## Authentication - **Api Key** - Type: `api_key` - Description: Api Key authentication for HTML/CSS to Image. - Setup: - Configure Api Key credentials for HTML/CSS to Image. - Use the credentials when creating an auth config in Composio. ## Suggested Prompts - Render invoice HTML to PDF - Create social image from template - Screenshot public landing page hero ## Supported Tools | Tool slug | Name | Description | |---|---|---| | `HTMLCSS_TO_IMAGE_CREATE_IMAGE` | Create Image | Create a hosted image from HTML/CSS or an internet-reachable webpage, including authenticated pages using request headers. Use GET_IMAGE afterward to download, resize, crop, or convert it. | | `HTMLCSS_TO_IMAGE_CREATE_IMAGE_FROM_TEMPLATE` | Create Image from Template | Create an image from a reusable template using the latest version or an explicitly selected version. | | `HTMLCSS_TO_IMAGE_CREATE_IMAGES_BATCH` | Create Images Batch | Create 1 to 25 hosted images from HTML/CSS or internet-reachable webpages in one request, including authenticated pages using shared or per-image headers. Requires an account plan that supports batch creation. | | `HTMLCSS_TO_IMAGE_CREATE_TEMPLATE` | Create Template | Create a reusable Handlebars HTML/CSS image template. WARNING: the template is persistent because the API exposes no delete operation, and a free account can hold only one template. | | `HTMLCSS_TO_IMAGE_DELETE_IMAGE` | Delete Image | Permanently delete one generated image and clear its HCTI CDN cache. Copies previously written to external storage are not deleted. | | `HTMLCSS_TO_IMAGE_DELETE_IMAGES_BATCH` | Delete Images Batch | Permanently delete multiple generated images and clear their HCTI CDN caches. Copies previously written to external storage are not deleted. | | `HTMLCSS_TO_IMAGE_GET_IMAGE` | Get or Transform Image | Download a generated image by ID, optionally converting its format, resizing it, or cropping it. | | `HTMLCSS_TO_IMAGE_GET_USAGE` | Get Usage | Return recent hourly, daily, monthly, and billing-period image usage for the connected account. | | `HTMLCSS_TO_IMAGE_LIST_TEMPLATES` | List Templates | List reusable image templates owned by the connected account, including their current version, source, and render settings. | | `HTMLCSS_TO_IMAGE_UPDATE_TEMPLATE` | Update Template | Create a new version of an existing template using replacement Handlebars HTML and optional CSS or render settings. | ## Supported Triggers None listed. ## Installation and MCP Setup ### Path 1: SDK Installation #### Path 1, Step 1: Install Composio Install the Composio SDK ```python pip install composio_openai ``` ```typescript npm install @composio/openai ``` #### Path 1, Step 2: Initialize Composio and Create Tool Router Session Import and initialize Composio client, then create a Tool Router session ```python from openai import OpenAI from composio import Composio from composio_openai import OpenAIResponsesProvider composio = Composio(provider=OpenAIResponsesProvider()) openai = OpenAI() session = composio.create(user_id='your-user-id') ``` ```typescript import OpenAI from 'openai'; import { Composio } from '@composio/core'; import { OpenAIResponsesProvider } from '@composio/openai'; const composio = new Composio({ provider: new OpenAIResponsesProvider(), }); const openai = new OpenAI({}); const session = await composio.create('your-user-id'); ``` #### Path 1, Step 3: Execute HTML/CSS to Image Tools via Tool Router with Your Agent Get tools from Tool Router session and execute HTML/CSS to Image actions with your Agent ```python tools = session.tools response = openai.responses.create( model='gpt-4.1', tools=tools, input=[{ 'role': 'user', 'content': 'Create a PNG image from HTML:
Launch report ready
' }] ) result = composio.provider.handle_tool_calls( response=response, user_id='your-user-id' ) print(result) ``` ```typescript const tools = session.tools; const response = await openai.responses.create({ model: 'gpt-4.1', tools: tools, input: [{ role: 'user', content: 'Create a PNG image from HTML:
Launch report ready
' }], }); const result = await composio.provider.handleToolCalls( 'your-user-id', response.output ); console.log(result); ``` ### Path 2: MCP Server Setup #### Path 2, Step 1: Install Composio Install the Composio SDK for Python or TypeScript ```python pip install composio claude-agent-sdk ``` ```typescript npm install @composio/core ai @ai-sdk/openai @ai-sdk/mcp ``` #### Path 2, Step 2: Initialize Client and Create Tool Router Session Import and initialize the Composio client, then create a Tool Router session for HTML/CSS to Image ```python from composio import Composio from claude_agent_sdk import ClaudeSDKClient, ClaudeAgentOptions composio = Composio(api_key='your-composio-api-key') session = composio.create(user_id='your-user-id') url = session.mcp.url ``` ```typescript import { Composio } from '@composio/core'; const composio = new Composio({ apiKey: 'your-api-key' }); const session = await composio.create('your-user-id'); console.log(`Tool Router session created: ${session.mcp.url}`); ``` #### Path 2, Step 3: Connect to AI Agent Use the MCP server with your AI agent (Anthropic Claude or Mastra) ```python import asyncio options = ClaudeAgentOptions( permission_mode='bypassPermissions', mcp_servers={ 'tool_router': { 'type': 'http', 'url': url, 'headers': { 'x-api-key': 'your-composio-api-key' } } }, system_prompt='You are a helpful assistant with access to HTML/CSS to Image tools.', max_turns=10 ) async def main(): async with ClaudeSDKClient(options=options) as client: await client.query('Render https://example.com as a full-page PNG screenshot') async for message in client.receive_response(): if hasattr(message, 'content'): for block in message.content: if hasattr(block, 'text'): print(block.text) asyncio.run(main()) ``` ```typescript import { openai } from '@ai-sdk/openai'; import { experimental_createMCPClient as createMCPClient } from '@ai-sdk/mcp'; import { generateText } from 'ai'; const client = await createMCPClient({ transport: { type: 'http', url: session.mcp.url, headers: { 'x-api-key': 'your-composio-api-key', }, }, }); const tools = await client.tools(); const { text } = await generateText({ model: openai('gpt-4o'), tools, messages: [{ role: 'user', content: 'Render https://example.com as a full-page PNG screenshot' }], maxSteps: 5, }); console.log(`Agent: ${text}`); ``` ## Why Use Composio? ### 1. AI Native HTML/CSS to Image Integration - Supports both HTML/CSS to Image MCP and direct API based integrations - Structured, LLM-friendly schemas so agents can render images and PDFs with fewer bad calls - Great for generating social cards, invoices, reports, screenshots, and template-based assets ### 2. Managed API Key Auth - Bring your HTML/CSS to Image API key once, then let Composio handle secure credential storage - Central place to manage, scope, and revoke HTML/CSS to Image access - Per user and per environment credentials instead of hard-coded keys in agent code ### 3. Agent Optimized Design - Tools are shaped for natural language tasks like “render this HTML as a PNG” or “capture this landing page as a PDF” - Tool schemas help agents pass the right HTML, CSS, URL, output format, and rendering options - Comprehensive execution logs so you always know what rendered, when, and on whose behalf ### 4. Enterprise Grade Security - Fine-grained RBAC so you control which agents and users can access HTML/CSS to Image - Scoped, least privilege access for rendering workflows and document generation - Full audit trail of agent actions to support review and compliance ## Use HTML/CSS to Image with any AI Agent Framework Choose a framework you want to connect HTML/CSS to Image with: None listed. ## Related Toolkits - [Figma](https://composio.dev/toolkits/figma) - Figma is a collaborative interface design tool for teams and individuals. It streamlines design workflows with real-time collaboration and easy sharing. - [Abyssale](https://composio.dev/toolkits/abyssale) - Abyssale is a creative automation platform for generating images, videos, GIFs, PDFs, and HTML5 content programmatically. It streamlines and scales visual content production for marketing, design, and operations teams. - [Alttext ai](https://composio.dev/toolkits/alttext_ai) - AltText.ai is a service that generates alt text for images automatically. It helps boost accessibility and SEO for your visual content. - [Are.na](https://composio.dev/toolkits/arena) - Are.na is a creative research platform for collecting images, links, notes, and ideas in channels. Use it to organize inspiration, build knowledge maps, and connect research across projects. - [Bannerbear](https://composio.dev/toolkits/bannerbear) - Bannerbear is an API-driven platform for generating images and videos automatically at scale. It helps businesses create custom graphics, social visuals, and marketing assets using powerful templates. - [Bannerbite](https://composio.dev/toolkits/bannerbite) - Bannerbite is a creative automation platform for generating images and videos from reusable projects and templates. It helps teams produce on-brand visual assets faster without rebuilding designs from scratch. - [Builder.io](https://composio.dev/toolkits/builder_io) - Builder.io is a visual development platform for managing content, models, assets, and Space configuration. Use it to ship editable digital experiences faster without waiting on every code change. - [Canva](https://composio.dev/toolkits/canva) - Canva is a drag-and-drop design suite for creating professional graphics, presentations, and marketing materials. It makes it easy for anyone to design with beautiful templates and a vast library of elements. - [Claid ai](https://composio.dev/toolkits/claid_ai) - Claid.ai delivers AI-driven image editing APIs for tasks like background removal, upscaling, and color correction. It helps automate and enhance image workflows with powerful, developer-friendly tools. - [Cloudinary](https://composio.dev/toolkits/cloudinary) - Cloudinary is a cloud-based platform for managing, uploading, and transforming images and videos. It streamlines media workflows and delivers optimized assets globally. - [Contentdrips](https://composio.dev/toolkits/contentdrips) - Contentdrips is an asynchronous rendering API for branded graphics and carousels. It turns reusable templates into on-brand social visuals at scale. - [Creatomate](https://composio.dev/toolkits/creatomate) - Creatomate is an API for generating automated videos, images, GIFs, and reusable media templates. Use it to turn structured data into polished visual content at scale. - [Cults](https://composio.dev/toolkits/cults) - Cults is a digital marketplace for 3D printing models, connecting designers and makers. It lets creators share, sell, and discover a huge variety of printable designs easily. - [DeepImage](https://composio.dev/toolkits/deepimage) - DeepImage is an AI-powered image enhancer and upscaler. Get higher-quality images with just a few clicks. - [Dreamstudio](https://composio.dev/toolkits/dreamstudio) - DreamStudio is Stability AI’s platform for generating and editing images with AI. It lets you easily turn ideas into stunning visuals, fast. - [Dynamic Mockups](https://composio.dev/toolkits/dynamic_mockups) - Dynamic Mockups is an API platform for generating product mockups, rendering templates, and managing visual asset catalogs. Use it to automate high-quality product visuals, AI images, and motion assets at scale. - [Dynapictures](https://composio.dev/toolkits/dynapictures) - Dynapictures is a cloud-based platform for generating personalized images at scale. Instantly create hundreds of custom visuals using your data sources, like Google Sheets. - [Excalidraw MCP](https://composio.dev/toolkits/excalidraw_mcp) - Excalidraw MCP is a no-auth MCP server for creating hand-drawn style diagrams in Excalidraw. Use it to generate visual sketches with viewport camera control and fullscreen editing. - [Fal.ai](https://composio.dev/toolkits/fal_ai) - Fal.ai is a generative media platform offering 600+ AI models for images, video, voice, and audio. Developers use Fal.ai for fast, scalable access to cutting-edge generative AI tools. - [Gamma](https://composio.dev/toolkits/gamma) - Gamma is an AI-powered platform for making beautiful, interactive presentations and documents. It lets anyone create and share engaging decks with minimal effort. ## Frequently Asked Questions ### Do I need my own developer credentials to use HTML/CSS to Image with Composio? Yes, HTML/CSS to Image requires you to configure your own API key. Once set up, Composio handles secure credential storage and API request handling for you. ### Can I use multiple toolkits together? Yes! Composio's Tool Router enables agents to use multiple toolkits. [Learn more](https://docs.composio.dev/tool-router/overview). ### Is Composio secure? Composio is SOC 2 and ISO 27001 compliant with all data encrypted in transit and at rest. [Learn more](https://trust.composio.dev). ### What if the API changes? Composio maintains and updates all toolkit integrations automatically, so your agents always work with the latest API versions. --- [See all toolkits](https://composio.dev/toolkits) · [Composio docs](https://docs.composio.dev/llms.txt)