How to Generate HTML Assets for Your AI Agents

Learn how to structure JSON content, design HTML templates, and render polished webpages with dynamic data.

Generating HTML assets enables your AI agents to produce professional, styled web outputs—ideal for reports, articles, or visual summaries.

Overview of the Workflow

The example workflow builds a long-form article page through the following steps:

1. User Input: Captures a topic from the user.

2. User Context: Gathers additional context via AI-generated questions.

3. Generate Queries: Uses that context to generate relevant Google search queries.

4. Run Research Subworkflow:

   • Searches Google

   • Scrapes each result

   • Summarizes each page

5. Compile Results: Collects all structured data into a JSON object.

6. Generate Images: Runs a subworkflow that:

   • Creates image prompts from each article section

   • Generates images with a model

7. Combine Content: Uses a custom function (e.g., add images to report) to merge article JSON and images into a final, structured variable (e.g., updated report).

Preparing the HTML Asset

Step 1: Add a Generate Asset Block

• Set the Source Type to HTML.

• Output variable: e.g., HTML

• Format: HTML

• Enable image rehosting if needed.

Step 2: Create Your HTML Template

Expand the Source Document field to edit and preview your HTML. Use Handlebars-style syntax to bind JSON variables:

<h1>{{updated_report.title}}</h1>
<p>{{updated_report.subtitle}}</p>

{{#each updated_report.sections}}
  <img src="{{image}}" />
  <h2>{{header}}</h2>
  <p>{{intro}}</p>
{{/each}}

• Use {{#each}} and {{/each}} to loop through arrays.

• Nest variables properly based on your JSON structure.

Step 3: Provide Sample JSON for Testing

Paste in your sample JSON and variable name (e.g., updated_report) to preview the output live in the editor.

Optional: Use the Generate Asset Helper

If you don’t want to hand-code HTML:

• Use the Generate Asset Helper agent.

• Provide:

  • Your variable name (e.g., updated_report)

  • Sample JSON

  • A clear description of the page (e.g., “a long-form article page with images above each section”)

The helper will:

• Ask design questions (layout, font, colors, spacing)

• Generate a complete HTML template

• Provide instructions to paste it into your asset block

Final Setup

Add a Display Content block:

• Set the type to HTML

• Connect it to the output of your Generate Asset block

Your AI agent will now generate and render a fully styled web page as the final output.

Styling and Customization

The HTML template can include embedded CSS using <style> tags. You can:

• Adjust fonts, spacing, and layout

• Change image border radius or alignment

• Modify heading sizes (e.g., h1, h2, h3)

Edit and preview changes instantly in the asset editor.

Notes on Variable Paths

When inserting dynamic content:

• Use full paths (e.g., {{updated_report.title}})

• Don’t reference standalone keys (e.g., {{title}}) unless the variable is defined globally

Summary

The Generate Asset block allows you to:

• Display highly customized HTML pages

• Combine AI-generated content and imagery

• Provide end users with a rich, professional experience

For advanced use cases, explore how other MindStudio agents (like “Generate LinkedIn Carousel” or “Generate Podcast”) implement this technique.