AI tools (WebMCP)

​

How a call flows

1. Your page registers tools with modelContext.registerTool(...).
2. The dashboard forwards the descriptors (name, description, schema — never your functions) to Ola’s backend.
3. When Ola decides to use your tool, the merchant sees an approval card in the chat — your app’s logo, the tool name, and the arguments — with Approve, Reject, and Always allow.
4. On approval, the call is posted into your iframe, your execute() runs in your page (your session, your data), and the result goes back to Ola.

​

Registering a tool

import { modelContext } from "salesive-dev-tools/webmcp";

modelContext.registerTool({
  name: "track_delivery",                    // letters, digits, _ (≤ 30 chars)
  title: "Track delivery",                   // shown on the approval card
  description:
    "Track a delivery by order id and return its live status and ETA.",
  inputSchema: {
    type: "object",
    properties: {
      orderId: { type: "string", description: "The Salesive order id" },
    },
    required: ["orderId"],
  },
  annotations: { readOnlyHint: true },       // reads only — modifies nothing
  async execute({ orderId }) {
    const status = await fetchDeliveryStatus(orderId);
    return { content: [{ type: "text", text: `Delivery ${orderId}: ${status}` }] };
  },
});

const controller = new AbortController();
modelContext.registerTool({ ...tool }, { signal: controller.signal });
controller.abort(); // unregistered

​

Browser support — handled in the package

• No native WebMCP (every stable browser today): the module itself is the implementation, and it also installs itself as navigator.modelContext and document.modelContext when they’re absent — code written against the standard API runs unchanged.
• Native WebMCP present (e.g. Chrome’s origin trial): the native object is left untouched, and your registrations are mirrored into it too — so browser-level agents see your tools alongside Ola.

​

Approval, “Always allow”, and revocation

• Approve — this one call runs.
• Always allow — this call runs, and future calls of this specific tool from this installation run without asking.
• Reject — Ola is told the merchant declined and moves on.

​

Limits

​

Full example — React

import { useEffect } from "react";
import { modelContext } from "salesive-dev-tools/webmcp";

export default function App() {
  useEffect(() => {
    const controller = new AbortController();

    modelContext.registerTool(
      {
        name: "get_open_orders",
        title: "Get open orders",
        description: "List this store's open delivery orders with their ETAs.",
        inputSchema: { type: "object", properties: {} },
        annotations: { readOnlyHint: true },
        async execute() {
          const orders = await api.listOpenOrders();
          return {
            content: [
              { type: "text", text: orders.map((o) => `#${o.id}: ${o.eta}`).join("\n") },
            ],
          };
        },
      },
      { signal: controller.signal },
    );

    return () => controller.abort(); // unregister on unmount
  }, []);

  return <Dashboard />;
}

​

Security model

• Your execute functions never leave your page — only descriptors are shared, and calls come back to your iframe over the same origin-checked App Bridge as every other event.
• Every call is gated by merchant approval (or a prior explicit “Always allow” for that exact tool).
• Tool results are treated as third-party data by Ola — descriptions and results are length-capped and sandboxed with untrusted-content guidance.
• Only Ola (the default dashboard assistant) can use app tools; other agents on the platform can’t see them.

​

Next steps