Skip to main content

​
Introduction

The UI Engine is a powerful feature in TIXAE Agents that enables your AI agents to create rich, interactive elements in their responses. This enhances user engagement by going beyond simple text exchanges.

Haven't seen the UI-engine in action? Have a talk with our earth companion!

This is an experimental feature and may not always work as expected. Use with caution and thoroughly test your implementation.

​
Enabling the UI Engine

Enabling the UI engine appends further instructions to your system prompt, allowing your AI agent to output JSON data that renders UI elements like buttons, cards, carousels. While not directly a UI element, your agent can also show images and render iframes out of the box.To enable it, do the following:
1

Navigate to Prompt Tab

Open your agent’s dashboard and go to the Prompts tab.
2

Locate UI Engine Checkbox

Find the UI Engine checkbox in the settings.
3

Enable the Feature

Check the box and save.

​
Instructing Your Agent

With the UI Engine enabled, you have several options for guiding your agent’s use of UI components:
Provide specific instructions in your initial or system prompt. For example:
Generate two buttons saying "Start Tutorial" and "Skip Introduction".
Then, create a card with the title "Welcome", a brief description of our service, and an "Learn More" button.
Set up a structured interaction flow in your system prompt:
Follow these steps in the conversation:
1. Ask about the user's preference and generate three buttons: "Product Info", "Pricing", "Support".
2. Based on their choice, display a relevant card with:
   - Title: [Chosen topic]
   - Brief description
   - "Get Details" button
3. After showing the card, ask if they want to explore another topic or end the conversation.
Give your agent the freedom to generate UI components as it sees fit:
You have access to the UI Engine for creating interactive elements like buttons, cards, carousels, and images. Use these components when you believe they will enhance the user experience or make information presentation more effective. Be creative in your approach.
For information on integrating the UI Engine with your knowledge base, see our KB and UI Engine page.
Models like Claude 3.5 Sonnet are particularly adept at generating appropriate UI elements code and using these components effectively. When giving your agent creative freedom, consider using such advanced models for optimal results.

​
UI Components

The UI Engine offers a variety of versatile interactive elements to enhance your AI agent’s responses. They can be customized and combined to create engaging user interfaces.
  • Buttons
  • Cards
  • Carousels
  • Images
  • Everything at once
Buttons provide clear calls-to-action or navigation options.
• Single button • Multiple buttons in a row
Generate two buttons:
1. "Learn More" 
2. "Contact Us" 

Write this with markdown formatting:

#### 👋 Welcome to TIXAE AI! 🎨✨
I'm Gia, your friendly AI assistant. I'm here to help you navigate our AI agent studio and unleash your creativity! 

How can I assist you today?

Then, below it:

generate three relevant buttons.
The versatility of the UI components allows for numerous combinations and configurations. You can instruct your agent to create complex elements like a carousel of cards, each with its own image, description, and buttons.
Experiment with different component combinations to find the most effective way to present information and engage users in your specific use case.

​
Best Practices

To make the most of the UI Engine:

Balance Text and UI

Mix textual responses with UI components for a rich, varied interaction.

Context-Aware Components

Use UI elements that are relevant to the current conversation context.

Progressive Enhancement

Start with essential information in text, then enhance with UI components.

Test Different Approaches

Experiment with structured instructions vs. creative freedom to find what works best for your use case.

​
Credit Usage Considerations

Enabling the UI Engine increases credit consumption per response due to the additional instructions appended to each interaction.
To manage credit usage effectively:
1

Monitor Usage

Regularly check your credit usage in the Usage tab.
2

Optimize Interactions

Use UI components together with text responses to optimize usage.
3

Inform Clients

If you’re an agency, ensure your clients are aware of the potential increase in credit usage when the UI Engine is enabled.
4

Compare and Adjust

Run comparisons of credit usage with and without the UI Engine to understand its impact on your specific use case.

​
Examples and Use Cases

Here are some real-world applications of the UI Engine:

JavaScript Expert

Interactive coding assistant tips, tricks and code explanations.

Zoe from GadgetZone

News agent that has information about the latest tech and awesome gadgets. Has a tech savvy tone of voice.

Fireheat Sneakers

Sneaker store with product showcases and a cool tone of voice.

Tinder Match Companion

Interactive dating profile assistant with conversation starters, bio helper and other tips.
These examples demonstrate how the UI Engine can be used to create engaging, interactive experiences across various industries and use cases. Experiment with different components and combinations to find what works best for your specific needs.
⌘I