Stop your AI agents from doing stupid things (I open-sourced a React UI for Human-in-the-Loop)

rifzankhan — Sat, 14 Mar 2026 07:34:13 +0000

If you are building AI applications right now, you’ve probably hit the exact same wall I did: giving AI agents access to real-world tools is terrifying.

When an agent is just summarizing text, hallucinations are annoying. When an agent has the tool-call ability to delete_invoice or refund_customer, a hallucination is a catastrophic business failure.

Backend frameworks like LangGraph and CopilotKit are great at handling the "pause" state for Human-in-the-Loop (HITL) workflows. But they leave the frontend completely up to you. I got tired of building custom JSON editors, state machines, and validation logic just to let a human operator say "Yes" or "No" to an AI.

So, I built and open-sourced Agent Approval Card.

What it is
It’s a completely stateless, drop-in React component (). You pass it the proposed action and arguments, and it gives the operator a clean UI to approve, reject, or inline-edit the parameters before executing.

I specifically kept it scoped to the UI layer. It doesn't force you into any specific backend protocol, queue manager, or state-management library. You own the async logic; the component just handles the UX.

Features
🔴 Risk Levels: Dynamically renders danger buttons and warnings for "high" or "destructive" actions.

📝 Inline Editing: Operators can tweak the raw JSON payload before approving (perfect for fixing a slightly hallucinated argument without scrapping the whole run).

🛡️ Frictionless Rejection: Operators can slam the "Reject" button instantly without being forced to type out a reason.

💅 Customizable: Ships with a clean default CSS variable theme that looks at home in modern dashboards (Stripe, Vercel, etc.).

How to use it
Bash
npm install agent-approval-card

The Repo
You can check out the source code, the complete prop API, and the Storybook documentation here:

rifzankhan / agent-approval-card

Agent Approval Card

A React component for human-in-the-loop approval flows in AI apps.

AgentApproval is built for the frontend gap most agent frameworks leave behind: the moment when an agent wants to do something risky, expensive, or irreversible, and a human needs to review it before it happens.

It gives you a clean approval UI without forcing a queue system, backend protocol, or orchestration model.

Why this exists

Most agent frameworks help with backend pause-and-resume logic. Very few give you a reusable approval interface that is good enough to drop into a real product.

This package focuses on that missing layer:

explain what the agent wants to do
show the exact parameters it plans to use
let a human approve, reject, or edit those parameters
surface risk clearly for destructive actions

What you get

A polished <AgentApproval /> React component
Controlled async workflow owned by the host app
Explicit rationale…

View on GitHub

If you are building agentic workflows, I'd love to hear how you are currently handling operator approvals, or if there are any specific UI states I missed for your use case!

DEV Community: rifzankhan

Stop your AI agents from doing stupid things (I open-sourced a React UI for Human-in-the-Loop)

rifzankhan / agent-approval-card

Agent Approval Card

Why this exists

What you get