WebMCP

<script
  src="https://app.waniwani.ai/embed.js"
  defer
  data-api="https://app.waniwani.ai/api/mcp/chat"
  data-token="wwp_..."
  data-channel-id="..."
  data-mode="off"
></script>

<script src="https://app.waniwani.ai/embed.js" defer data-token="wwp_..." data-channel-id="..." data-webmcp="false"></script>

import { createFlow, START, END } from "@waniwani/sdk/mcp";
import { z } from "zod";
import { callbacks } from "./services";

export const requestCallback = createFlow({
  id: "request_callback",
  title: "Request a callback",
  description:
    "Books a callback from an advisor. Collects the visitor's name, phone number and preferred time of day.",
  state: {
    name: z.string().describe("Visitor's full name"),
    phone: z.string().describe("Phone number to call, with country code"),
    slot: z.enum(["morning", "afternoon", "evening"]).describe("Preferred time of day"),
    callbackId: z.string().optional().describe("Set once the callback is booked"),
  },
})
  .addNode({
    id: "ask_contact",
    label: "Ask for contact details",
    run: ({ interrupt }) =>
      interrupt({
        name: { question: "What's your name?" },
        phone: { question: "What number should we call?" },
        slot: {
          question: "When suits you best?",
          suggestions: ["morning", "afternoon", "evening"],
        },
      }),
  })
  .addNode({
    id: "book_callback",
    label: "Book the callback",
    run: async ({ state }) => {
      const booked = await callbacks.create({
        name: state.name,
        phone: state.phone,
        slot: state.slot,
      });
      return { callbackId: booked.id };
    },
  })
  .addEdge(START, "ask_contact")
  .addEdge("ask_contact", "book_callback")
  .addEdge("book_callback", END)
  .compile();

<script>
  window.__webmcpTools = [];
  document.modelContext = {
    registerTool(tool) {
      window.__webmcpTools.push(tool);
    },
  };
</script>

__webmcpTools.map((tool) => tool.name);

const flow = __webmcpTools.find((tool) => tool.name === "request_callback");
await flow.execute({ action: "start", intent: "Visitor wants a callback" });

curl "https://app.waniwani.ai/api/mcp/chat/webmcp/tools?token=wwp_...&channel=..." \
  -H "Origin: https://www.example.com"

import { createWebMcpBridge, supportsWebMcp } from "@waniwani/sdk/mcp";

const api = "https://app.waniwani.ai/api/mcp/chat";
const token = "wwp_...";
const channelId = "...";

// Stable for the tab, and gone when the tab closes.
function tabSessionId() {
  const key = "my-site:webmcp-session";
  let id = sessionStorage.getItem(key);
  if (!id) {
    id = crypto.randomUUID();
    sessionStorage.setItem(key, id);
  }
  return id;
}

if (supportsWebMcp()) {
  const bridge = await createWebMcpBridge({
    endpoint: `${api}/webmcp`,
    listEndpoint: `${api}/webmcp/tools?token=${token}&channel=${channelId}`,
    headers: { Authorization: `Bearer ${token}` },
    sessionId: tabSessionId(),
    channelId,
    onWidget: (widget) => {
      // Mount widget steps, for example with <WebMcpOverlay> from @waniwani/sdk/chat.
    },
  });

  console.log(bridge?.tools.map((tool) => tool.name));
}