Web Tools

User speaks → Agent decides to call a web tool → SDK triggers your registered function →
Function runs in browser → Returns string or JSON → Response sent back to agent

const tools = [
  {
    function_name: "navigate_to_page",
    description: "Navigate the user to a specific page on the website",
    parameters: [
      {
        name: "path",
        type: "string",
        description: "The URL path to navigate to"
      }
    ],
    required: ["path"],
    fn: async (path) => {
      window.location.href = path;
      return "Navigated to " + path;
    }
  },
  {
    function_name: "open_product_modal",
    description: "Open a product details modal for a specific product",
    parameters: [
      {
        name: "productId",
        type: "string",
        description: "The product ID to display"
      }
    ],
    required: ["productId"],
    fn: async (productId) => {
      const product = await getProduct(productId);
      showProductModal(product);
      return JSON.stringify({ name: product.name, price: product.price });
    }
  }
];

agent.start({
  agentId: "YOUR_AGENT_ID",
  tools: tools,
  voiceEnablement: true
});

// String return — agent uses it conversationally
fn: async (path) => {
  window.location.href = path;
  return "Done, the user is now on the backpacks page.";
}

// JSON return — can be extracted in flow agents
fn: async (productId) => {
  const product = await getProduct(productId);
  return JSON.stringify({
    name: product.name,
    price: product.price,
    inStock: product.available
  });
}

Web Tool Node: Check_Cart
  Output Mapping:
    cart_total: $.total
    item_count: $.items.length
  ↓ (Equation: {{cart_total}} > 100)
Conversation Node: "Your cart total is {{cart_total}}. Would you like to checkout?"
  ↓ (Equation: {{cart_total}} <= 100)
Conversation Node: "You have {{item_count}} items. Can I help you find anything else?"

{
  function_name: "show_category",
  description: "Navigate the user to a product category page",
  parameters: [
    { name: "category", type: "string", description: "Product category name" }
  ],
  required: ["category"],
  fn: async (category) => {
    const slug = category.toLowerCase().replace(/\s+/g, '-');
    window.location.href = `/products/${slug}`;
    return `Showing ${category} products`;
  }
}

{
  function_name: "show_product_details",
  description: "Open a modal with detailed product information",
  parameters: [
    { name: "productId", type: "string", description: "The product ID" }
  ],
  required: ["productId"],
  fn: async (productId) => {
    const product = await fetch(`/api/products/${productId}`).then(r => r.json());
    document.getElementById('product-modal').showModal();
    renderProductDetails(product);
    return JSON.stringify({ name: product.name, price: product.price });
  }
}

{
  function_name: "get_cart_summary",
  description: "Get the current shopping cart contents and total",
  parameters: [],
  required: [],
  fn: async () => {
    const cart = getCartFromLocalStorage();
    return JSON.stringify({
      items: cart.items.length,
      total: cart.total,
      currency: cart.currency
    });
  }
}

{
  function_name: "submit_contact_form",
  description: "Submit the contact form with the provided details",
  parameters: [
    { name: "name", type: "string", description: "Contact name" },
    { name: "email", type: "string", description: "Email address" },
    { name: "message", type: "string", description: "Message content" }
  ],
  required: ["name", "email", "message"],
  fn: async (name, email, message) => {
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify({ name, email, message })
    });
    return response.ok ? "Form submitted successfully" : "Submission failed";
  }
}