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:
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…
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!
Top comments (0)