Web interfaces: creating interactive experiences

AIsuru lets you integrate AI Agents directly into web pages, enabling them to perform specific actions and interact with the user interface. This advanced feature lets you create highly personalized and interactive user experiences.

How it works

The Agent can perform actions within a web page through the use of code snippets.

This lets the Agent manipulate the user interface in real time, responding to user interactions or specific events.

Implementation with content

To enable an Agent to perform actions on a web page:

1. Go to your Agent's management panel;

2. Navigate to the Content section from the sidebar;

3. Select a specific content item and press the edit button -> for example, a content item with "let's start" as the question and a welcome message as the response;

4. Scroll down to the "Advanced: pre-formatted text" section and click + New snippet:

   1. Enter the CSS or JS code you want to run;

   2. Select the language;

   3. Check the Command checkbox to activate it (making the snippet executable);

   4. Give the snippet a descriptive, detailed title -> this way, the generative AI will also be able to invoke it when it deems appropriate.

5. Confirm all changes -> from now on, whenever you send the "question" from that content item, the code snippet will be executed.

Implementation with Instructions

You can also choose to show HTML or Markdown code inside messages. This is very useful for creating even more interactive and engaging experiences.

To do this:

1. Go to your Agent's Settings > AI;

2. In the instructions field, explain to the AI how to generate Markdown or HTML and CSS code and when to do so.

Markdown

For simpler actions, like creating a table, you can use standard markdown code:

When asked to compare products,
create a markdown table with the collected data.

HTML and CSS

For more complex visualizations, you can guide your Agent in using HTML and CSS:

When asked to compare products, create a markdown table with the collected data. Use the following format:

| Feature | Starting product | Alternative 1 | Alternative 2 | Alternative 3 |
|---------|-----------------|---------------|---------------|---------------|
| [Feature 1] | [Value] | [Value] | [Value] | [Value] |
| [Feature 2] | [Value] | [Value] | [Value] | [Value] |

Highlight differences from the starting product using the following HTML:
<span style="background-color: #FFEBEE;">[different value]</span>

Advanced use cases

Combining with code snippets

You can use your Agent's ability to display HTML to trigger more complex user actions too.

For example, in an e-commerce Agent you could teach the Agent to create an "Add to cart" button for specific items. Use the Instructions:

When you see the user is interested in a product,
suggest adding it to the cart and show them
the "Add to cart" button. Always change
the product code depending on the item
they're considering.

<button onclick="add_to_cart([PRODUCT_CODE])">Add to cart</button>

Once you've done this, you just need to trigger a code snippet inside your opening question:

function add_to_cart(productId) {
  alert('Product ' + productId + ' added to cart!');
  console.log('Added product:', productId);
}

Remember that the language model cannot execute JavaScript code outside of code snippets (not even using the HTML <script> tag).

You can teach your Agent to use HTML and CSS in responses (or insert it directly in content if the code is static), but to execute actions you always need to use pre-formatted text.

Using with functions

Functions can be combined with web actions to create more complex interactions:

• Configure a function to retrieve specific data;

• Use generative AI to process the data and create a Markdown table directly in the chat;

• Present the results to the user in a visually engaging way.

Combining with the Expert Group

When you use the Expert Group you can create a more complex and extremely effective workflow:

• The welcome message triggers a code snippet that injects the CSS code of a library useful for displaying attractive charts;

• One Agent retrieves the necessary data and asks the user if they want to see a chart;

• The user says yes: a second Agent analyzes the collected data and creates a chart using only HTML.

Displaying charts in messages

To teach your Agent to create charts:

1. Find a CSS library you can download freely;

2. Create a content item:

   1. Question: "let's start";

   2. Response: set a custom welcome message;

   3. Add an executable CSS snippet in the "Advanced: code snippets" section

3. Set the "let's start" content as the opening question in the sharing layout;

4. Insert the Readme file text in your Agent's instructions.

✅ Done! Your Agent now knows how to create custom charts.

Interactive guide

You can create an interactive guide for the user. For example, when the user asks "Where do I find the settings?", the Agent can highlight the corresponding button on the page:

function highlightSettings() {
  const settingsButton = document.getElementById('settingsButton');
  settingsButton.style.boxShadow = '0 0 10px 5px yellow';
  setTimeout(() => {
    settingsButton.style.boxShadow = 'none';
  }, 3000);
}

<button onclick="highlightSettings()">Show settings</button>

Using typeMessageHidden()

The typeMessageHidden function lets you send hidden messages in the chat, as if they were sent by the user.

This can be very useful for triggering specific actions from the generative AI:

typeMessageHidden("The user has just accessed their private area.", true)

This function can be used to trigger automatic analyses or to guide the conversation flow in a way that's invisible to the user.

The ability to have the Agent perform actions within a web page opens new possibilities for creating dynamic and personalized user experiences. By combining this feature with other AIsuru capabilities, you can build highly interactive and intelligent web applications.