Approve, Edit, or Take the Wheel Before Agents Act

Local-first Action Card and takeover UX layer for consequential AI agent actions. Pause before side effects, approve with full context, replay runs as stories.

⚡ Quick Start 📖 Read the Docs GitHub ↗

📦 npm alpha

🔧 TypeScript

🎭 Playwright

⚛️ React UI

🔒 Local-first

📜 Apache-2.0

The Clutch Point

Agents are moving from chat into action. AgentClutch owns the moment something consequential is about to happen.

Agent proposes an action

A prompt app, wrapped tool, or engineered loop proposes a side effect — clicking checkout, sending a message, deleting a file, changing a record.

AgentClutch normalizes it

The proposal becomes an ActionProposal, then an inspectable ActionCard — showing target, evidence, consequence, and risk.

Human decides

Approve once, edit fields, take the wheel, block, or create a rule. The intervention is recorded.

Run resumes with context

AgentClutch returns LoopResumeContext and the agent continues. The entire run can be replayed as a human-readable Run Story.

What's In the Box

Everything you need to add human-in-the-loop control to any agent workflow.

🎯

Action Cards

Inspectable UI cards showing what will happen, where, with what evidence, and what the consequences are — before anything executes.

⚙️

Loop Engine

Pause and resume agent loops with structured context. Loop-native internally, prompt-compatible at the SDK edge.

📜

Recorder

Local JSONL recording of every action, intervention, and decision. Full audit trail without any external service.

🎭

Playwright Adapter

Browser automation with clutch points. Pause before clicks, form submissions, and checkout — inspect before committing.

⚛️

React UI Components

Drop-in Action Card viewer, Run Story player, and consequence display. Styleable, composable, framework-friendly.

📐

Rules & Lessons

Create rules to auto-approve, block, or require clutch on matching patterns. Teach Mode captures human corrections as reusable lessons.

⚠️

Consequence Registry

Structured metadata for every action type — reversibility, compensation, severity. Know what happens if it goes wrong.

🎬

Run Story

Replay any recorded run as a human-readable story. Perfect for review, debugging, demos, and compliance.

📦

npm Packages

@agentclutch/core, @agentclutch/cli, and more. Install with npm or pnpm, run anywhere.

Quick Start

Try the FakeStore interactive demo in under 2 minutes — a real browser, a real clutch point, a real decision.

# Install and build
pnpm install --frozen-lockfile
pnpm build
pnpm exec playwright install chromium

# Run the checkout demo
pnpm demo:checkout

# Or use the npm alpha CLI directly
pnpm dlx @agentclutch/cli@alpha demo checkout
    

Full Quick Start Guide →

One Action, One Clutch

Wrap any risky action with prompt_guard — the simplest way to add a clutch point.

import { promptGuard } from '@agentclutch/core'

const result = await promptGuard({
  action: {
    type: 'browser.click',
    target: { selector: '#checkout', label: 'Checkout Button' },
    sideEffect: 'Submits the order form and charges the payment method on file.'
  },
  host: { name: 'my-app', version: '1.0.0' }
})

// result.decision → 'approve' | 'edit' | 'block' | 'wheel' | 'rule'
// result.edited  → modified fields if user edited
// result.rule    → new rule if user created one
    