Keep the Agent
Action In Frame

import { OpenInButton } from "@dolly/rig";

// Deeplinks the current page into ChatGPT. Hides itself
// when the site is already running inside an agent.
<OpenInButton agent="openai" />

// Options
<OpenInButton
  agent="openai"
  url="https://example.com/trip/paris"  // defaults to the current URL
  connectionParam="webmcpconnected"     // handshake param on the link
  hideWhenInsideAgent={false}
>
  Plan this trip in ChatGPT
</OpenInButton>

<RigProvider
  appName="Trip Planner"
  capabilities={[
    {
      title: "Plan a trip",
      description: "Build an itinerary from a sentence.",
    },
    {
      title: "Invite people",
      description: "Add travellers by name.",
    },
  ]}
  onboarding={{
    // Optional multi-step walkthrough instead of the
    // default capability list.
    steps: [
      {
        image: "/onboarding/plan.png",
        title: "Plan trips by talking",
        description: "Ask for a weekend in Lisbon and watch it fill in.",
      },
      {
        title: "Invite anyone",
        description: '"Add Mom to the trip" just works.',
      },
    ],
    doneLabel: "Try it",
  }}
>

import {
  AgentStatusHeader,
  detectAgent,
} from "@dolly/rig";

// Full-width bar — status, with room for tools,
// history, and live progress while work runs.
<AgentStatusHeader showIndicator showProgress />

// The signals underneath
document.modelContext   // the browser speaks WebMCP
detectAgent()           // which agent injected the bridge

const rig = useRig();

async function execute({ nights }) {
  // Full-screen glow while the agent works.
  rig.startWork("Booking the hotel…", undefined, {
    overlay: true,
  });

  // Spotlight the element being changed.
  rig.focus("#itinerary", "Adding two nights…");

  // Updates from inside the tool call.
  rig.progress("Confirming dates…");

  rig.endWork("Hotel added to the itinerary");
  // rig.failWork("The dates were unavailable");
}

useWebMCPTool({
  name: "remove_item",
  // Auto-logged on success, tokens filled from the input.
  log: "Removed %%name%% from the cart",
  logIcon: "🛒",
  async execute({ name }) { /* … */ },
});

// Or record anything by hand.
rig.logTask(
  "Added %%name%% to the trip",
  { name: "Mom" },
  { icon: <UserIcon /> },
);

// "What agents did here"
<AgentHistoryDrawer open={open} onClose={close} />

async function execute({ tripId }) {
  // The tool pauses here until a human decides.
  const ok = await rig.confirm({
    title: "Delete the Paris trip?",
    description: "The agent wants to delete this trip.",
    tone: "destructive",   // red Continue button
    confirmLabel: "Delete",

    // Optional: approve automatically after a
    // countdown (shown on the button, paused on
    // hover). Omit to wait for a click, forever.
    // autoContinueMs: 5000,
  });

  if (!ok) {
    return {
      content: [{ type: "text", text: "Cancelled by the user" }],
    };
  }
  await deleteTrip(tripId);
}

useWebMCPTool({
  name: "add_traveller",
  description: "Add a person to the current trip",
  // Shown in the drawer under "Try asking".
  example: "Add Mom to the trip",
  inputSchema: { /* … */ },
  async execute(input) { /* … */ },
});

// "What agents can do here"
<AgentToolsDrawer open={open} onClose={close} />

import {
  useRig,
  useWebMCPTool,
} from "@dolly/rig";

const rig = useRig();

useWebMCPTool({
  name: "add_to_cart",
  description: "Add a product to the active cart",
  example: "Add the field jacket to my cart",
  log: "Added %%productId%% to the cart",
  inputSchema: {
    type: "object",
    properties: { productId: { type: "string" } },
    required: ["productId"],
  },
  async execute({ productId }) {
    rig.startWork("Adding the product…", "#cart", {
      overlay: true,
    });
    await addToCart(productId);
    rig.endWork("Added to the cart");
    return { content: [{ type: "text", text: "Added to cart" }] };
  },
});