← →

Command Registry

`<pura-command-registry>` is a headless (invisible) WebMCP-style component that collects child `<pura-command-action>` elements and publishes them in a global registry `window.__puraCommands`, letting an AI agent or command palette enumerate (`list()`) and run (`run(id, args)`) the page's capabilities programmatically. Each action carries machine-readable metadata (title, description, keywords) and also sets ARIA/`data-*` attributes so accessibility trees and tools can read the capabilities without touching the JS. Use it when you want to expose your UI's structured affordances to automation, agents, or a command palette without rendering anything visually.

Preview

<pura-command-registry namespace="conta">
  <pura-command-action id="salvar" title="Save profile" description="Persists the user's profile changes" keywords="save store profile"></pura-command-action>
  <pura-command-action id="exportar" title="Export data" description="Generates a file with the account data" keywords="export download csv"></pura-command-action>
</pura-command-registry>

<script type="module">
  import "/pura/lib/command-registry.js";

  const reg = document.querySelector("pura-command-registry");
  // Give each action imperative behavior (optional):
  reg.querySelector("#salvar").handler = () => "Profile saved successfully";
  reg.querySelector("#exportar").handler = () => "Export started";

  // An agent or command palette enumerates and invokes capabilities:
  const commands = window.__puraCommands.list(); // [{ id: "conta:salvar", title, description, keywords, ... }]
  const result = window.__puraCommands.run("conta:salvar");

  // React to any invocation (even without a handler):
  reg.addEventListener("run", (e) => {
    console.log("command executed:", e.detail.id, e.detail.args);
  });
</script>

Attributes

Attribute	Type	Default	Description
`namespace`	string	—	Prefixes the action ids in the global registry (e.g. "account:save"), avoiding collisions between registries. Applied on <pura-command-registry>.
`disabled`	boolean	false	On <pura-command-registry>, hides all of this registry's actions from list()/get()/run(). On <pura-command-action>, marks the action as unavailable (cannot be invoked).
`id`	string	pura-cmd-N (auto)	Action identifier for addressing; auto-generated if absent. Attribute of <pura-command-action>.
`title`	string	—	Readable label for the action; also becomes aria-label. Attribute of <pura-command-action>.
`description`	string	—	Machine-readable description of the action; also becomes aria-description. Attribute of <pura-command-action>.
`keywords`	string	—	Search terms separated by spaces or commas, used by palettes/agents to find the action. Attribute of <pura-command-action>.
`when`	string	—	CSS selector that must match in the document for the action to be enabled; otherwise it appears as disabled. Attribute of <pura-command-action>.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/command-registry.js"></script>

JavaScript

import "./pura/lib/command-registry.js";

Slots

default

Events

registerunregisterrun