UI Engine
Create dynamic, interactive elements in your AI agent responses
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:
Navigate to Prompt Tab
Open your agent’s dashboard and go to the Prompts tab.
Locate UI Engine Checkbox
Find the UI Engine checkbox in the settings.
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:
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 provide clear calls-to-action or navigation options.
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:
Monitor Usage
Regularly check your credit usage in the Usage tab.
Optimize Interactions
Use UI components together with text responses to optimize usage.
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.
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.