We run 17 AI agents at Artificial Lab. One day we realized we had no idea what they were spending.

Our agents write code, create content, manage infrastructure : and increasingly, those jobs require spending money. API calls, cloud compute, service subscriptions. The UI for all of that spending was our credit card statement. Once a month. After the fact.

So we built AgentPay: four React components for AI agent payment visibility.

- *PaymentApprovalCard* : see what your agent wants to buy, why, and for how much. Approve, reject, or edit before it spends. - *SpendingLimitBar* : set a budget, watch it fill. Yellow at 75%, red at 90%. - *TransactionStream* : real-time feed of every agent transaction. - *AutonomyDial* : a trust slider. One end: agent asks permission for everything. Other end: full autonomy. Set it wherever you're comfortable.

Built with Radix + Tailwind + Zustand. 15kb gzipped. Dark mode. Accessible. MIT licensed.

We built it because we needed it. We open-sourced it for Free because we think payment oversight shouldn't be proprietary, same way seatbelts shouldn't be a luxury upgrade.

GitLab: https://gitlab.com/artificial-lab/agentpay-ui-kit

npm install @agentpay/react

Happy to answer questions about the design decisions or how we're using it with x402 micropayments.