Page actions

• The AI can only pick from the list your page registered. It never reads the page or fills in forms itself, unless you turn on page control for the site.
• Your functions never leave the page. Only the name, description, input schema and the extras below are sent to the desk.
• Each run is recorded in the conversation’s AI actions, so agents see what happened.

​

The standard: WebMCP

​

Register an action

const remove = JunDesk.registerAction({
  name: "add_to_cart",
  description: `Add ${product.name} to the cart`,
  inputSchema: {
    type: "object",
    properties: {
      size: { enum: product.sizes },
      quantity: { type: "integer", minimum: 1, maximum: 5 },
    },
    required: ["size"],
  },
  key: product.id,
  element: cardEl,
  context: { price: product.price },
  available: () => product.stock > 0,
  execute: async ({ size, quantity = 1 }) => {
    const line = await cart.add(product.id, size, quantity);
    return { summary: `Added ${quantity} × ${size}`, lineId: line.id };
  },
  undo: (result) => cart.remove(result.lineId),
});

document.modelContext.registerTool({
  name: "show_usage",
  description: "Scroll to the usage section and show this month's numbers",
  inputSchema: { type: "object", properties: {} },
  annotations: { readOnlyHint: true },
  execute: () => {
    document.getElementById("usage").scrollIntoView({ block: "center" });
    return "Usage: 4,210 events this month";
  },
}, { signal: controller.signal }); // controller.abort() unregisters it

<form toolname="subscribe_newsletter" tooldescription="Subscribe the visitor to the newsletter">
  <input name="email" type="email" toolparamdescription="The email to subscribe" />
  <button>Subscribe</button>
</form>

​

What execute gets and returns

• input holds the values the AI filled and the visitor confirmed, already checked against your schema (numbers are numbers, enums match exactly).
• The second argument is an AbortSignal that also has a signal property pointing at itself, so both fetch(url, { signal: opts }) and opts.signal work.
• It may be async. A thrown error or rejected promise shows as Didn’t work with the error’s message, and the AI hears about it.

​

Fields

​

Risk levels

​

Override risk on the desk

upgrade_plan: confirm
export_csv: auto
cancel_subscription: human
set_pickup:
  run: auto
  status: Setting your pickup

​

After it runs

​

Multi-step requests

1. The visitor asks.
2. The AI calls search_flights (auto). It runs and returns JSON.
3. The AI reads the result and calls add_to_cart (confirm). The visitor confirms. It runs.
4. The AI writes a short reply, or ends the chain.

• At most 12 AI messages in a row after the visitor’s message.
• Calling the same action with the same inputs again ends the chain instead of repeating it.
• Each confirm step still waits for the visitor.

​

Many actions on one page

​

React

import { useRef } from "react";
import { useJunAction } from "@jun/widget-react";

function ProductCard({ product }) {
  const ref = useRef<HTMLDivElement>(null);
  useJunAction(
    {
      name: "add_to_cart",
      key: product.id,
      description: `Add ${product.name} to the cart`,
      inputSchema: { type: "object", properties: { size: { enum: product.sizes } }, required: ["size"] },
      element: ref,
      context: { price: product.price },
      execute: async ({ size }) => {
        await cart.add(product.id, size);
        return `Added ${product.name} (${size})`;
      },
    },
    [product.id],
  );
  return <div ref={ref}>…</div>;
}

​

Card buttons that run page actions

​

Test page actions

- name: upgrade asks for the plan
  message: upgrade me to the growth plan
  page: /billing
  actions:
    - name: upgrade_plan
      description: Change this account's plan
      inputSchema:
        type: object
        properties:
          plan: { type: string, enum: [starter, team, growth] }
        required: [plan]
  expect:
    action: { name: upgrade_plan, input: { plan: growth } }