> ## Documentation Index
> Fetch the complete documentation index at: https://docs.convocore.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# KB and UI-engine

The [UI Engine](features/ui-engine) is a powerful feature in Convocore 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:

#

<Tabs>
  <Tab title="Carousels">
    ```markdown theme={null}
    #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.
    ```
  </Tab>

  <Tab title="Cards">
    ```markdown theme={null}
    #You can create cards using the UI engine components available. Use the instructions provided in the knowledge base when displaying these.
    ```
  </Tab>

  <Tab title="Images">
    ```markdown theme={null}
    #You can display images. When recommending products, use the links that are provided together with the product description in the knowledgebase
    ```
  </Tab>

  <Tab title="Iframes">
    ```markdown theme={null}
    #You can display iframes. You have iframe code provided to you in the knowledgebase. If the user asks to book a meeting, you will display the iframe using the code snippet. Do not manipulate the code in any way and keep the height and width.
    ```
  </Tab>
</Tabs>

<Info>
  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.
</Info>

#

#

## 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:

#

<AccordionGroup>
  <Accordion title="Carousels">
    Carousels can be displayed in every way you want. only pictures, without pictures, without title etc. This makes for many creative use-cases:

    ```markdown theme={null}
    # 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🔥

    ```
  </Accordion>

  <Accordion title="Cards">
    As well as all other UI elements. Cards can also be heavily customized. Here are some variants you can consider:

    ```markdown theme={null}
    #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:
    ```
  </Accordion>

  <Accordion title="Images">
    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](https://img.doerig.dev/).

    ```markdown theme={null}
    # 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)

    ```
  </Accordion>

  <Accordion title="Iframes">
    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.**

    ```markdown theme={null}
    # 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!

    ```
  </Accordion>
</AccordionGroup>

<Tip>
  <h3>Customize for Your Use Case</h3>

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

  <ul>
    <li>
      Experiment with different structures to find what works best for your
      specific needs.
    </li>

    <li>
      UI elements may require special attention - their optimal format can vary
      based on your agent.
    </li>

    <li>Don't hesitate to iterate and refine your approach over time.</li>
  </ul>
</Tip>

#

### Best Practices

<CardGroup cols={2}>
  <Card title="Consistent Formatting" icon="align-left">
    Use consistent formatting across your knowledge base to make it easier for
    your agent to parse and use the information.
  </Card>

  <Card title="Clear Instructions" icon="clipboard-list">
    Provide clear, specific instructions in your knowledge base on how to use
    each piece of information.
  </Card>

  <Card title="Regular Updates" icon="arrows-rotate">
    Keep your knowledge base up-to-date with the latest product information,
    images, and formatting instructions.
  </Card>

  <Card title="Test Thoroughly" icon="vial">
    Regularly test your agent's responses to ensure it's correctly using the UI
    Engine components with the knowledge base information.
  </Card>
</CardGroup>

### Test it out:

<iframe src="https://convocore.ai/app/eu/render/gib2no07kqdy1f2m/iframe" width="700" height="600" style={{ borderRadius: "1.2rem" }} />

> Try asking Gia to book an appointment or tell you anything about Convocore
> and see the UI-engine in action.