# How to Generate HTML, PDF, and other Advanced Outputs

{% embed url="<https://youtu.be/iA8XKMCrLM0>" %}

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:

```html
<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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://university.mindstudio.ai/2-workflow-mastery/how-to-generate-html-pdf-and-other-advanced-outputs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.