# Message formatting: HTML and math formulas

AIsuru offers powerful formatting tools that let you enrich your Agent's responses with HTML and mathematical formulas, creating richer and more interactive conversational experiences.

### HTML code in messages

HTML in messages is automatically interpreted and rendered when the message is displayed. You don't need to enable any specific setting — just include the HTML code you want in the Agent's response.

#### How to use HTML in your Agent

To use this feature, simply insert the HTML code:

* **In the** [**response of your content**](/en/agent-training/contents/manual-content-creation.md#how-to-create-a-simple-content) -> in this case, the HTML code will always be the same (useful, for example, for forms);
* **In the** [**AI instructions**](/en/generative-ai/ai-instructions.md) -> remember to explain to the generative AI when and how to use your HTML code.

Once you've done that, make sure to test it to confirm the code renders correctly. For more complex implementations, remember that you can **add JavaScript and CSS code in** [**executable code snippets**](/en/agent-training/advanced/content-customization/managing-code-snippets.md).

#### Example: display images from a website

Here's an example of how to instruct the Agent to show images it finds on a given web page 👇

{% code fullWidth="false" %}

```
When the user asks to see a photo:
1. Call the "photo_album" function;
2. Read the photo names returned by the function;
3. Find the photo the user asked to see and remember the path
and filename (/img/example.png)
4. Respond by including the HTML code that lets the user see the photo

HTML code to show the photo to the user:
<img style="max-width: 100%; height: auto;" src="XXX">

REMEMBER TO REPLACE XXX with the absolute path of the image!
So not ".../img/example.png" but "www.[example].org/img/example.png"
```

{% endcode %}

### Math formulas

AIsuru supports displaying mathematical formulas through MathJax. You can include math formulas in two ways:

* **In contents**:
  * Wrap the formula in square brackets;
  * Example: \[E = mc^2] will be rendered as a mathematical formula;
  * You can use LaTeX syntax for complex formulas: \[\frac{-b \pm \sqrt{b^2-4ac}}{2a}].
* **In AI instructions**:
  * You can teach the AI to generate mathematical formulas;
  * Specify in the instructions that it should use LaTeX syntax for math formulas;
  * The AI will generate formulas in the correct format automatically.

### Benefits of advanced formatting

Integrating HTML and math formulas into the Agent's responses offers several advantages:

* **Presenting complex information** in a structured and visually appealing way;
* **Displaying mathematical formulas** in a professional, readable format;
* Creating **interactive experiences** directly within the chat.

### Copying formatted messages

AIsuru provides two copy buttons that appear on every response:

* **Copy content** : copies the rendered, formatted message text (plain text only).
* **Copy source code** : copies the original text with all HTML tags or Markdown formatting.

This is particularly useful when:

* You need to reuse HTML or Markdown code;
* You need to share both the rendered view and the source code of a response.

For example, when copying an Agent response that contains an image, the "Copy content" button will copy only the descriptive text, while "Copy source code" will also include the HTML image tag with its URL.

🚀 By taking advantage of this powerful feature, you can transform conversations with your Agent from simple text exchanges into rich, engaging experiences for your users.


---

# 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://docs.aisuru.com/en/agent-training/advanced/html-messages.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.