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.

---

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 LLM Parameters

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

---

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.

---

7. 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
}

---

8. Test Again

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

---

9. Configure 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.

---

10. Set Up the Carousel Template

If displaying items as a carousel, create a Handlebars template such as:

{{#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. Add Custom JavaScript

Your Handlebars template uses JavaScript for variant switching and cart actions.

• Go to your control’s Script tab.
• Paste your custom JS here (not in an external file). The Shadow DOM requires inlining scripts.

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	Structure data for your UI
8	Re-Test	Validate transformation
9	Set Response Handling	LLM or Carousel display
10	Add Carousel Template	Display items as cards
11	Add Inline Script	Enable dynamic UI features

---