Skip to main content

Carousel - Overview

Overview and Purpose​

The Carousel Control in ai12z provides a visually dynamic and interactive way to present large datasets, bypassing the limitations of relying solely on an LLM for response rendering. While RAG (Retrieval-Augmented Generation) is excellent for answering precise, document-based queries, scenarios like browsing restaurant menus, exploring product catalogs, or selecting movie options often involve extensive datasets that are impractical for the LLM to render from its output due to response latency.

It’s not that the LLM can’t handle large JSON payloads—modern models with 128K context windows can process a substantial amount of input data. The real challenge lies not in input token processing, but in output token generation. Generating large responses incurs latency and cost, which makes rendering many items directly from the LLM inefficient.

A client side carousel allows you to bypass LLM output generation entirely for the display layer, handing off large datasets directly to the Bot UI. This dramatically improves responsiveness and cost efficiency, while still enabling you to optionally use the LLM for summary, comparison, or contextualization without overburdening it.

list carousel

Block Diagram​

carousel flow diagram

Below are eight reasons why you might incorporate a Carousel into your ai12z Agent interface. These examples highlight both user experience enhancements and strategic business objectives, including e-commerce scenarios with data sourced from APIs (MCP, REST or GraphQL) such as Shopify’s GraphQL endpoints.

  1. Visually Rich Product Browsing:
    Instead of returning a long text list of products, a carousel can present items with images, titles, and short descriptions in a visually appealing, swipeable interface. For instance, when querying a Shopify GraphQL endpoint for “women’s summer dresses,” the Agent can return a carousel of dresses along with their images, prices, and brief details, letting users quickly scan and select the one they like.

  2. Curated Recommendations & Upsells:
    A carousel makes it easy to highlight products related to a user’s query—such as accessories to match a previously viewed item. With data fetched from a REST API, the Agent can show a rotating carousel of recommended items, allowing the user to visually compare options and discover complementary purchases without sifting through multiple pages.

  3. Location-Based Listings (e.g., Restaurants, Hotels):
    For a user asking for “restaurants near my hotel,” the Agent can fetch geo-specific data from a RESTful location service and return a carousel of restaurant images, short descriptions, cuisines, and links to menus. The user can swipe through the results and pick one that looks appealing, enhancing overall convenience and decision-making.

  4. Interactive Product Customization:
    By embedding forms or selection fields inside the carousel panels, users can customize their product options (e.g., selecting size, color, or adding gift wrapping) before finalizing their purchase. With Shopify GraphQL, for example, you could fetch product variants in real-time and present them in a carousel format, letting the user pick from multiple styles in a visually engaging manner.

  5. Category & Collection Showcases:
    If a user requests “Show me the new arrivals,” the Agent can query a GraphQL API for a store’s latest collection and return a carousel of featured products. Each carousel card might include product images, pricing tiers, and quick-add-to-cart buttons, helping users rapidly explore fresh inventory and boosting engagement with new releases.

  6. Event Listings & Ticket Booking:
    Suppose the user asks for upcoming concerts or shows. The Agent can pull event data from a REST endpoint and display them in a carousel, each with an “available performances” button that opens a panel showing specific dates and seat selection forms. This visual, step-by-step approach simplifies complex workflows (like ticket bookings) and creates a more guided, user-friendly experience.

  7. Personalized Recommendations Using User Parameters:
    The carousel can leverage user parameters or preferences (e.g., dietary restrictions, preferred price range, or style preferences) to filter results before display. For example, if the user mentions they’re vegan, a Shopify GraphQL query can return only vegan-friendly products, arranged in a carousel for easy scanning. Personalized, visually driven recommendations encourage faster conversions and reduce decision fatigue.

  8. Rapid Comparison of Multiple Options:
    When a user says, “Show me options for [X],” returning a carousel enables them to quickly compare multiple items side-by-side without needing to read through long descriptions. For instance, if they’re researching different laptop models pulled from a REST endpoint, a carousel can present each model’s key specs, price, and warranty at a glance. Users can then swipe through and pick the one that fits best, providing an efficient and enjoyable shopping or decision-making experience.

In essence, the Carousel Control in ai12z transforms raw data into a visually navigable, interactive interface, streamlining product discovery, enhancing user interaction, and ultimately improving the user’s overall journey—whether they’re browsing inventory, booking services, or exploring personalized recommendations.

There are 3 types of Carousels​

List, Slider and Custom

List​

List

A vertically scrollable carousel where each item is displayed one after another in a list format. The user can simply scroll down through the content to view additional items. This layout is best suited when there are many items, and vertical space is readily available.

Slider​

Slider

A horizontally swipable carousel that shows one primary item (or a few items) at a time, allowing the user to swipe left or right to navigate through content. Ideal for image galleries, product highlights, or other scenarios where you want to emphasize one item at a time.

The data format is up to you, using handle bar, you can assign any item to your custom html

custom

  • A fully configurable carousel that allows you to create unique panel templates and pair them with specific data sources. With this approach, each panel can be designed and laid out according to your needs, enabling complex, highly customized displays that go beyond standard list or slider patterns.

Custom:​

The Carousel Controls accepts structured data to display a series of interactive items, each potentially with multiple panels, forms, images, and detailed content. Each item can include titles, images, descriptions, forms, and buttons with various functions. Below is a comprehensive guide on how to pass data to the Carousel Control and define the behavior of the interactive elements.