Get Started

Install & MCP

Components are the implementation layer of the patterns, distributed as source code you own. Three ways in, all reading the same registry, so preview and install can never disagree. Each component shows two labels: the pattern status says how settled the research is, and the code label says whether the component is ready to ship.

CLI

Install any component with the shadcn CLI, straight from the registry endpoint:

npx shadcn@latest add https://agentsandhumans.ai/api/registry/approval-gate.json

Or register the namespace once in your components.json:

{
  "registries": {
    "@agentsandhumans": "https://agentsandhumans.ai/api/registry/{name}.json"
  }
}
npx shadcn@latest add @agentsandhumans/approval-gate

Manual

Every component page has the full source with a copy button — headless core plus styled skin plus tokens. Vendor the files; there is no runtime dependency on us. MIT licensed.

Agent

Building with a coding agent? Give it the registry via the shadcn MCP server:

npx shadcn@latest mcp init --client claude

Then add the namespace above to components.json and prompt:

Add the @agentsandhumans registry, install approval-gate,
and wire it in front of every destructive tool call.

Agents can also read the registry through this site's own MCP server at /api/mcp: list_components returns each component with its maturity, and get_component returns one with its files.

Or give it the Agents & Humans Agent Skill: it reads your app first, installs the agent workflow bundle and wires it, with approvals checked on your server.

MCP Apps

Hosts that support MCP Apps can show a component inside the chat. Our reference MCP server puts Approval Gate in front of the person when an agent asks to act; the agent's tool call waits and returns the person's ApprovalDecision. Approval Gate in MCP hosts.

Vercel AI SDK

The AI SDK can hold a tool call until someone approves it. The ai-sdk-approval adapter shows that call in Approval Gate and sends the person's decision back to useChat. Tool approval in the Vercel AI SDK with Approval Gate.

Available components

  • <ApprovalGate> pattern: established code: beta The person sees the action the agent is about to take and decides on that version of it before it happens.
  • <PlanPreview> pattern: established code: beta The person reviews and edits the agent's intended steps before it starts.
  • <ProgressTrace> pattern: established code: beta The person watches what the agent is doing right now, at a glance or step by step.
  • <EvalComparison> pattern: watching code: beta The person compares a candidate prompt version with the baseline across an eval set and decides, case by case, what got better, what got worse and what to do about it.
  • <EvalSetAuthoring> pattern: watching code: experimental The person collects real examples and writes down, beside them, what a good answer does and does not do, with a passing and a failing answer per rule and the set versioned with the prompt.
  • <EmergencyStop> pattern: watching code: experimental The person halts one agent, its team or the whole account in one press.
  • <Interruption> pattern: emerging code: experimental The person pauses, stops or redirects an agent mid-task.
  • <Recovery> pattern: emerging code: experimental The person restores the checkpoint, retries a failed step when a second run cannot repeat a side effect, or takes the work over and hands it back.