Skip to content

Runtime API ​

The runtime is framework-agnostic and operates on the DOM. It renders one non-blocking clue surface at a time.

new ViewCueRuntime(options) ​

ts
const runtime = new ViewCueRuntime({
  theme: "civic",
  motion: "calm",
})

Available themes are civic, paper, night, and contrast. Motion modes are calm, expressive, and reduced.

registerTarget(meta, resolver) ​

Registers a stable semantic target:

ts
const unregister = runtime.registerTarget(
  {
    id: "checkout.total",
    label: "Order total",
    description: "The final amount before checkout",
    kind: "status",
  },
  () => document.querySelector("#checkout-total"),
)

The runtime rejects malformed IDs, missing metadata, disconnected elements, and sensitive targets.

observeDeclarativeTargets() ​

Scans [data-viewcue-target] elements and observes later DOM changes. The declarative metadata is:

  • data-viewcue-target;
  • data-viewcue-label;
  • data-viewcue-description;
  • data-viewcue-kind;
  • data-viewcue-sensitive.

showClue(options) ​

Shows the core UI clue:

ts
await runtime.showClue({
  targetId: "checkout.total",
  title: "Order total",
  message: "Review this amount before checkout.",
  ensureVisible: true,
})

It returns a bounded result with ok, action, and target IDs. It never invokes a domain action.

traceAction(trace) ​

Renders an application-owned activity clue. The phases are planned, executing, completed, and failed. This is optional and is useful when the host application wants to make a consequential tool’s activity visible.

instrumentTool(tool, options) ​

Returns a wrapper around a WebMCP tool. The wrapper emits the optional activity clue, calls the original execute(), returns its result unchanged, and marks thrown or explicitly classified failures as failed.

getVisibleContext() ​

Returns a bounded view of the current route/screen context, registered visible targets, and current clue. It does not expose raw DOM, cookies, local storage, or arbitrary page HTML.

clear(reason) and dispose() ​

clear() removes the current clue. dispose() clears the clue, disconnects observers, unregisters targets, and removes the overlay host.

ViewCue MCP · UI clues for WebMCP applications