Skip to main content
Supported Regions:上海

Agent UI Custom Output Structure

Overview​

It is desired that the Agent's return value includes some visual components for operations. In this case, the Agent UI component can be adjusted to support HTML rendering, and the AI can be prompted to return in HTML format.

Before proceeding, you need to create an Agent. If you haven't started yet, refer to the Quick Start guide here: Quick Start

Example​

Procedures​

1. Modify the Agent Prompt​

Prompt Example:

When I ask "query medical insurance", return a medical insurance query link "http://localhost:3000/ai/agent/custom-output" using a card-style layout with html tags.

At this point, perform testing and the returned result will include a card-style HTML tag.

Return Result

2. Modify the Agent UI Component to Support HTML Rendering​

Go to the Visualization Development/Application module, locate the Agent UI component, query markdown in the left outline tree, find the markdown component, click Properties, locate html within Properties, and set it to true.

At this point, perform testing in the visual interface, and the html tags in the returned result will be rendered as actual effects.

Advanced Configuration​

The above style example is generated by the AI itself. If you want to customize the style, it is recommended to directly provide a style template to the AI for output.

Prompt Example:

Provide the following style template

"""
<div style="border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 16px; max-width: 300px; margin: 16px auto; font-family: Arial, sans-serif;">
    <div style="font-size: 1.5em; margin-bottom: 8px;">title</div>
    <div style="font-size: 1em; margin-bottom: 16px; color: #555;">description</div>
    <a href="#" style="display: inline-block; padding: 8px 16px; background-color: #007BFF; color: #fff; text-decoration: none; border-radius: 4px; transition: background-color 0.3s;">link</a>
</div>
"""

Provide the following list of questions. When a customer's query matches a question in the list, return the style template and replace fields such as title, description, and link in the template.

| Question | title | description | link |
| --- | --- | --- | --- |
| Query Medical Insurance | Medical Insurance Query | Medical Insurance Query Link | http://localhost:3000/ai/agent/custom-output |

The above HTML template can also be generated using AI.

Example: