> For the complete documentation index, see [llms.txt](https://university.mindstudio.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://university.mindstudio.ai/building-ai-agents/dynamic-html-and-workflow-loading-styles.md).

# Dynamic HTML & Workflow Loading Styles

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

## What Is Dynamic HTML in MindStudio?

The **Generate Asset block** is one of the most powerful non-AI blocks in MindStudio. It allows you to create images, PDFs, and full HTML pages inside your agents.

Previously, you had to write HTML directly or carefully structure variables. With **Dynamic HTML**, you can now simply write a natural language prompt, and the AI will generate HTML for you.

Dynamic HTML is ideal for:

* Fast, creative webpage generation
* Styling AI outputs with minimal coding
* Prototyping custom layouts and visualizations
* Turning text outputs into engaging, shareable formats

***

## Enable Dynamic HTML

1. Open your **Generate Asset block**.
2. Under **Source Type**, choose **Dynamic HTML**.
3. Enter a natural language prompt describing your page layout and style.
   * Example: *“Use the poem, haiku, and image URL to create a modern, clean page. Trendy fonts, minimal design, artsy aesthetic.”*
4. Include variables directly (e.g., `{{poem}}`, `{{haiku}}`, `{{imageUrl}}`).

The model generates valid HTML automatically—no need to hand-code or manage data structures.

### Example: Build a Poem Page

**Workflow**

1. Generate a poem about a topic.
2. Generate a haiku on the same topic.
3. Create an image from the poem.
4. Pass these values (`poem`, `haiku`, `image URL`) into the Generate Asset block.
5. Prompt: *“Design a modern, clean web page to showcase the poems and image.”*

**Result**

* Custom image as header
* Poem and haiku placed in styled sections
* Page automatically rendered with your chosen style

***

## Workflow Loading Style

Instead of the default point cloud animation, you can now show users a **workflow preview** that reveals each step being executed.

This makes it easier to:

* Map agent activity to workflow steps
* Provide transparency into what’s running
* Create a more engaging user-facing experience

### Configure Loading Style

1. Open your agent’s **Metadata settings**.
2. Under **Runtime → Startup**, find **Loading Style**.
3. Choose:
   * **Point Cloud** (classic animation)
   * **Workflow Preview** (shows live execution steps)

{% hint style="info" %}
**Note:**&#x20;

* Newly created agents default to Workflow Preview.
* Existing agents keep their original loading style until changed.
  {% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://university.mindstudio.ai/building-ai-agents/dynamic-html-and-workflow-loading-styles.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.