MCP (Model Context Protocol) Setup

1. Select MCP as the Data Source

In the Properties dialog, set the Data Source to Model Context Protocol (MCP).

---

2. Configure MCP Server URL and Headers

In the Edit dialog, under the Model Context Protocol (MCP) section:

• Enter the MCP server endpoint URL.
• (Optional) Add any required HTTP headers, such as an API key or security token.
• (Optional) OAuth provider configuration

---

3. Discover Tools

Click Find Tools to fetch the available tools from your MCP server.

• Select a tool from the dropdown.
• Click the magnifying glass icon to inspect the tool’s schema.

---

4. Review Tool Schema

Check the tool schema for required parameters. At minimum, you must provide all parameters marked as required.

---

5. Add Carosel option and LLM Parameters

Add LLM parameters according to the tool’s schema, using the described name and type.

---

From the Carousel Type, Select Custom

Custom allows the ability to create a slider or a list, using Handlebars, JavaScript and CSS

Default Panel is List

If the card needs the ability to display another panel add the Panel, clicking the plus icon and naming the panel.

JSONata, need to return items

Note: You need to return items, if you not Transform the Response with JSONata

If your response uses a key like products instead of items, use JSONata to map the data structure:

Paste the following in the JSONata Response field:

{
  "items": products,
  "pagination": pagination,
  "available_filters": available_filters,
  "instructions": instructions
}

Test the tool again. Now the Nata Response will use the transformed output (with items as the array).

6. Test the Tool

• Click the Test button.
• Fill in the property values (e.g., query, context, limit).
• Click Send.

Review the Response section. If the array key is not items, you’ll need to map it in the next step.

Test button

View the results from the endpoint

Select the template wizard

Create the Template using AI, Template Wizard

This includes the Handlebars code, javaScript, and CSS, based on the data from the endpoint. Note you can even upload hand drawn layouts of what you are trying to create for cards, or a screen shot from a figma drawing.

Save the Handlebars template CSS and JavaScript

---

9. Response Handling

• In the Properties dialog, set Handle Response to LLM to test the conversational experience.
• You can switch back to Carousel to show results as a card list.

---

Note you always can see the history of the item you select, that is Custom Carousel is Handlebars, Script and CSS

10. Carousel Template

If displaying items as a carousel, Handlebars template will be created as shown below:

{{#each items}}
<div
  class="carousel-card bg-white rounded-lg shadow border p-4 mb-6"
  data-index="{{@index}}"
  data-item="{{{json this}}}"
>
  <!-- Product image and color selector -->
  <div class="flex flex-col items-center">
    <img
      id="main-image-{{@index}}"
      src="{{variants.[0].image_url}}"
      alt="{{title}}"
      class="object-cover w-44 h-44 mb-3 rounded"
      style="background:#eee;"
    />
    <div class="flex flex-row space-x-2 mt-1 mb-2">
      {{#each variants}}
      <button
        type="button"
        class="color-btn w-7 h-7 rounded-full border-2 border-gray-300"
        style="background:#ddd;"
        aria-label="{{title}}"
        onclick="selectColor(this, {{@index}})"
        data-variant-index="{{@index}}"
        title="{{title}}"
      ></button>
      {{/each}}
    </div>
  </div>
  <!-- Product details -->
  <div class="flex flex-col px-2 mt-2">
    <h2 class="text-lg font-bold mb-1">{{title}}</h2>
    <p class="font-semibold text-gray-600 mb-1">USD ${{price_range.min}}</p>
    <p class="mb-2 text-gray-800 text-sm">{{description}}</p>
    <label class="font-semibold text-xs">Size/Variant:</label>
    <select
      class="size-select border rounded px-2 py-1 text-sm"
      id="size-select-{{@index}}"
      onchange="onVariantChange(this)"
    >
      {{#each variants}}
      <option value="{{@index}}">{{title}}</option>
      {{/each}}
    </select>
    <button
      class="card-button list-btn uppercase flex-grow hover:bg-gradient-to-t md:flex-none ml-2 mt-2 bg-black text-white px-3 py-1 rounded text-sm"
      onclick="addToCart(this)"
    >
      Add to Cart
    </button>
  </div>
</div>
{{/each}}

---

11. JavaScript - created by the Template Wizard

Your Handlebars template uses JavaScript for variant switching and cart actions. The AI will create this for you.

function selectColor(button, variantIndex) {
  // Find the parent card div
  var card = button.closest(".carousel-card")
  if (!card) return
  var data = JSON.parse(card.getAttribute("data-item"))
  var image = card.querySelector('img[id^="main-image"]')
  if (image && data.variants[variantIndex]) {
    image.src = data.variants[variantIndex].image_url
  }
  // Set dropdown to match the selected color
  var select = card.querySelector(".size-select")
  if (select) select.selectedIndex = variantIndex
  // Store selection as data-attribute for addToCart
  card.setAttribute("data-selected-variant", variantIndex)
}

function addToCart(button) {
  var card = button.closest(".carousel-card")
  if (!card) return
  var data = JSON.parse(card.getAttribute("data-item"))
  var select = card.querySelector(".size-select")
  var variantIndex = select ? select.value : 0
  var variant = data.variants[variantIndex]
  alert("Added to cart: " + data.title + "\nVariant: " + variant.title)
}

function onVariantChange(select) {
  var card = select.closest(".carousel-card")
  if (!card) return
  var data = JSON.parse(card.getAttribute("data-item"))
  var variantIndex = select.value
  var image = card.querySelector('img[id^="main-image"]')
  if (image && data.variants[variantIndex]) {
    image.src = data.variants[variantIndex].image_url
  }
  // Optional: update the round indicator if you want, e.g. highlight the correct color dot
  card.setAttribute("data-selected-variant", variantIndex)
}

function applyColorSwatches() {
  const colorMap = {
    Black: "#222",
    Slate: "#a9b3ba",
    Sunrise: "#faa61a",
    Ironwood: "#ae5249",
    Chalk: "#eaeaea",
    Red: "#b30000",
    Purple: "#b185db",
    Gold: "#ecc94b",
    // Add more as needed
  }
  let root
  if (typeof carousel !== "undefined") {
    // Try to get the shadow root where the cards are rendered.
    root = carousel?.shadowRoot
  }
  // Now look for the color buttons in the right scope
  ;(root?.querySelectorAll ? root.querySelectorAll(".color-btn") : []).forEach(
    (btn) => {
      const colorText = btn.title || btn.getAttribute("aria-label") || ""
      let colorHex = "#ddd"
      Object.keys(colorMap).forEach((key) => {
        if (colorText.includes(key)) colorHex = colorMap[key]
      })
      btn.style.background = colorHex
    }
  )
}

applyColorSwatches()

Tip: Keep your scripts modular and document each function’s purpose.

---

Notes

• Testing: Always test with different queries and contexts to ensure your mapping and UI respond as expected.
• Debugging: Use browser console logs if variants, images, or actions don’t behave as expected.
• Shadow DOM: Inline scripts are essential for controls rendered within a shadow root.

---

Summary Table

Step	Action	Purpose
1	Select MCP as Data Source	Connects your data pipeline
2	Enter URL & Headers	MCP server authentication/setup
3	Find Tools	Discover available endpoints
4	Analyze Schema	Identify required parameters
5	Add LLM Parameters	Map schema fields
6	Test	Preview raw response
7	Add JSONata Mapping	Needs to return items.
8	Re-Test	Validate transformation
9	Choose Carousel Type	Select Carousel
9	Create your panels	If more than one panel per card
10	Re-Test	To get to the Template Wizzard
10	Template Wizard	Add card instruction or layout
11	Template Wizard	Create Template, Javascript CSS
12	Test in chatBot	Iterate on Template wizard

---