Separate data from design
Keep application data in the request while HTML, CSS, and layout stay in the template.
Dynamic image templates
Render dynamic images from a stable template ID
Send the template ID and values that change. The saved template keeps the dimensions, layout, branding, and image settings.
- Reusable designs
- Consistent image output
- One-request rendering
Reusable Open Graph template
Open Graph template
- title
- Automating image production
- author
- Alex Rivera
- cover
- images.example.com/image-production.jpg
One request · one image
Image production
Automating image production
Alex Rivera1200 × 630
Build your template
Two ways to build, one way to render
Both template types render by ID with named values.
Use cases
Keep image generation code small
Versioned releases
Publish template changes deliberately and choose which version an integration renders.
Smaller requests
Send a template ID and its values instead of repeating the full HTML and CSS document.
Reusable render settings
Store image dimensions, fonts, browser behavior, and output settings with the template.
Example conversation
MCP connected with OAuth
You
HTML/CSS to Image
HTML/CSS to Image
- You: Use the HCTI MCP to list my templates and use the product-launch design with this title, price, and product image.
- HTML/CSS to Image: I found the template and its named values. I’ll fill them and return the generated image URL.
- You: Create an Open Graph image from my blog template with this title, author, and cover image.
- HTML/CSS to Image: I’ll fill the three named values and render the template without changing its saved design.
- You: List the versions of my report-card template and render the latest one with these student values.
- HTML/CSS to Image: I’ll find the latest version, fill its named values, and return the generated image URL.
MCP integration
Use the HCTI API from your AI tools
Connect an MCP-compatible AI client to HCTI through OAuth.
Generate images and PDFs, capture webpages, and work with templates without putting an API key in the prompt.
One render API
Build with HTML/CSS or the visual editor, then render by ID
Both template types use the same image request. Send the template ID and named values while the saved design supplies the layout and dimensions.
-
Build the design
Use HTML and CSS through the template API, or arrange blocks in the visual editor.
-
Name the values that change
Define the text, images, colors, or other properties each image request can supply.
-
Render by template ID
Send the ID and named values together and receive the generated image URL.
Reusable templates
Keep the design separate from changing content
Use the same saved layout for Open Graph images, social cards, product graphics, and other repeated images.
-
Two ways to build
Choose the HTML/CSS template API or the block-based visual editor.
-
One saved design
Keep the same layout and dimensions while named values change.
-
One render request
Send the template ID and named values to the image API.
Template rendering workflow
- Build
- HTML/CSS API or visual editor
- Template
- Saved ID + named values
- Render
- POST /v1/image/{template_id}
- Output
- Generated image URL
Dynamic image templates
Reuse one design for every generated image
Create consistent Open Graph images, social cards, product graphics, and personalized visuals by changing only the values in each request.
Template workflows
Make reusable image generation fit your workflow
See how teams use dynamic templates to keep image output consistent while content changes.
AI & Agents
Let agents generate branded images from a template ID and named values.
View workflowMarketing
Generate campaign, social, and Open Graph images from reusable designs.
View workflowSales
Turn CRM and prospect data into consistent, personalized sales images.
View workflowEducation
Generate certificates and classroom materials from reusable school designs.
View workflowFinance
Generate financial reports, charts, and client visuals from reusable layouts.
View workflow