TechStore

Welcome to the TechStore demo. This mock store showcases how the embedded chat widget integrates with e-commerce functionality using frontend tools.

Try asking the chat assistant:

• "What products do you have?"
• "I need wireless headphones"
• "Add the USB-C Hub to my cart"
• "Show me my cart"

Wireless Headphones

Premium over-ear wireless headphones with active noise cancellation and 30-hour battery life.

€89.99SKU: WH-1001

Bluetooth Speaker

Portable waterproof Bluetooth speaker with 360-degree sound and 12-hour playtime.

€49.99SKU: BS-2001

USB-C Hub

7-in-1 USB-C hub with HDMI, USB-A, SD card reader, and 100W power delivery.

€34.99SKU: UC-3001

Integration Guide

This section explains how to replicate this e-commerce chat integration on your own website.

Prerequisites

• A Mitigate workspace with the embeddable chat widget configured
• Product pages or a catalog on your website that can be indexed by the document scraper

Step 1: Enable OpenUI Output Format

The chat assistant uses OpenUI to render rich product cards, carousels, and interactive forms directly in the chat. To enable this:

1. Go to Admin > Workspaces and select your workspace
2. Set Output Format to OpenUI

Step 2: Index Your Product Catalog

The chat assistant finds products by searching a vector database populated by the document scraper. To make your products discoverable:

1. Go to Admin > Document Sources and add your website URL
2. The scraper will crawl your product pages and index their content
3. Each product page should include key details in the page content: product name, SKU, price, description, and image URL

Step 3: Configure the Workspace System Prompt

Add instructions to your workspace's Custom System Prompt so the LLM knows how to display products and handle cart actions. Example:

When showing products, use OpenUI with this structure:
- Carousel for multiple products, single Card for one product
- Each product: CardHeader(name, description), Image(name, exact URL from knowledge base),
  Form with quantity Input (type: "number", min: 1) and "Add to Cart" Button
- Add to Cart button action: { type: "continue_conversation",
  context: "Add [product name] (SKU: [sku]) to cart" }
- After adding to cart, include a success Callout and a "View Cart" Button
- Use exact image URLs from the knowledge base. Do not guess image URLs.

Step 4: Register Frontend Tools

Frontend tools allow the chat assistant to trigger actions on your website — like adding items to a cart or navigating to a page. Tools are registered on the host page using window.MitigateEmbeddedChat.registerTool().

Each tool has two parts:

• A schema describing the tool's name, description, and parameters (sent to the LLM)
• A callback function that executes on your website when the LLM calls the tool

Add to Cart Tool

<script>
  window.MitigateEmbeddedChat.registerTool(
    {
      name: "addToCart",
      description: "Add a product to the shopping cart",
      parameters: {
        type: "object",
        properties: {
          sku: { type: "string", description: "Product SKU" },
          name: { type: "string", description: "Product name" },
          price: { type: "number", description: "Product price" },
          quantity: { type: "integer", minimum: 1, description: "Quantity" }
        },
        required: ["sku", "quantity"]
      }
    },
    async function(args) {
      // Your cart logic here
      await yourCartAPI.addItem(args.sku, args.quantity);
      return { added: true, sku: args.sku, quantity: args.quantity };
    }
  );
</script>

Navigate to Cart Tool

<script>
  window.MitigateEmbeddedChat.registerTool(
    {
      name: "navigateToCart",
      description: "Navigate to the shopping cart page",
      parameters: {
        type: "object",
        properties: {},
        required: []
      }
    },
    async function() {
      window.location.href = "/cart";
      return { navigated: true };
    }
  );
</script>

How It Works

The complete flow when a user interacts with the chat:

1. User asks about a product → LLM searches the vector database
2. LLM responds with OpenUI product cards (images, descriptions, quantity inputs)
3. User requests to add an item → LLM calls the registered addToCart tool
4. Host page executes the callback (adds to cart, shows confirmation)
5. Result returns to the LLM → assistant confirms the action to the user