Skip to main content
The UI Engine is a powerful feature in TIXAE Agents that allows you to create dynamic, interactive elements in your agent’s responses. By integrating the UI-Engine with your knowledge base, you can create more sophisticated and user friendly interfaces. This doc shows you how to effectively combine these two powerful tools.

​

​
Instructing Your Agent

Here’s how you can use the system prompt to instruct your agent to use UI Engine components with information from the knowledge base:

​

  • Carousels
  • Cards
  • Images
  • Iframes
#When recommending products, create a carousel using the provided product info and formatting instructions in the knowledge base with description, image links and button text.
By referring to the knowledge base in your prompt, you can populate it with links, text, and formatting instructions that the model can use in its responses, freeing up space in your system instructions.

​

​

​
Structuring Your Knowledge Base docs

To efficiently retrieve information for UI Engine components, structuring your knowledge base documents for easy retrieval is key. We recommend the following:

​

Carousels can be displayed in every way you want. only pictures, without pictures, without title etc. This makes for many creative use-cases:
# When showing products in carousel use this information:

Title: Travis Scott x Air Jordan 1 Low OG 'Olive'
Description: Travis Scott collab? You know it's gonna be 🔥. Dropping soon!
Image: https://sneakerbardetroit.com/wp-content/uploads/2024/06/Travis-Scott-Air-Jordan-1-Low-OG-Medium-Olive-On-Feet-1068x757.jpg
Button: Cop now🔥

Title: Nike SB x Air Jordan 4 'Pine Green'
Description: Skate-ready J's in a fresh colorway. These are straight 🔥
Image: https://sneakernews.com/wp-content/uploads/2023/03/jordan-4-sb-pine-green-store-list-0.jpg
Button: Cop now🔥
As well as all other UI elements. Cards can also be heavily customized. Here are some variants you can consider:
#When displaying cards, use the following information:
## Card with text:
Title:
Text:

## Cards without button:
Title:
Text:

## Cards with button:
Title:
Text:
Button:

## Cards with image:
Title:
Text:
Image link:

## Cards with image and button:
Title:
Text:
Button text:
Image link:

## Card with only image and title:
Image:
Title:
Images needs to be pulled from a valid URL. Makes sure to test this thouroughly before launching you agent. Looking for a hosting service, we recommend imgur.
# When showing images, use these links:


## Picture of a cute dog: [URL]



# Macbook pro product information:

# [Description]

## Photo of a macbook pro: [URL](use this when recommending the product to the user)
Iframes introduces the ability to integrate any website into you agent. This means you can embed calendly for booking, agent previews inside you agent😯 or show youtube videos with ease. Make sure to test this thoroughly.
# When the user asks to book an appointment you will display this calendly iframe code:


If the user asks to book an appointment embed this link to calendly in a iframe:

<iframe width="400" height="442" src="https://calendly.com/admin-magicmark/15min?primary_color=ff00d9&month=2024-08"></iframe>

## Remember: Set the iframes width and height as px as not as 100% in the CSS. And use exactly the iframe code provided, do not change anything!

​
Customize for Your Use Case

While these guidelines provide a solid foundation, remember that every knowledge base is unique. Here are some key points to consider:

  • Experiment with different structures to find what works best for your specific needs.
  • UI elements may require special attention - their optimal format can vary based on your agent.
  • Don’t hesitate to iterate and refine your approach over time.

​

​
Best Practices

Consistent Formatting

Use consistent formatting across your knowledge base to make it easier for your agent to parse and use the information.

Clear Instructions

Provide clear, specific instructions in your knowledge base on how to use each piece of information.

Regular Updates

Keep your knowledge base up-to-date with the latest product information, images, and formatting instructions.

Test Thoroughly

Regularly test your agent’s responses to ensure it’s correctly using the UI Engine components with the knowledge base information.

​
Test it out:

Try asking Gia to book an appointment or tell you anything about TIXAE Agents and see the UI-engine in action.
⌘I