Free
$0forever
The basics, no account.
- 6 components with full source
- Rebuild prompts for those
- shadcn registry install
- Light and dark themes
UI kit for agent apps · React · Tailwind · shadcn
Agents act. You decide.
Twenty React components for apps where AI does the work and people stay in charge. Approvals, run timelines, diff reviews, audit trails, memory, swarms.
acme / ops · live
Queued
2Running
2Needs you
1Done
1Run #0412
LiveRead the ticket and plan
820ms3 sub-tasks
search_issues
412msrepo: acme/web
run_tests
214 passed
Ask to merge PR #482
Post summary to #eng
Inbox · needs you
coder asks
Merge PR #482 into main
30
Tests pass. It touches billing, so it needs a person.
Medium riskFiles: 4Cost: $0.04
- const fee = total * 0.029+ const fee = round(total * 0.029, 2)
Autonomy
The agent acts on low-risk steps and asks on the rest.
Run cost
$0.087
4% of $2.00limit
- Input
- 18.4k tok
- Output
- 2.1k tok
Audit log
HMAC-SHA256 chain · 0 entries
#4120agent:coder opened PR #4825b704b50b7
⛓#4121tool:ci 214 tests passeda34c2ef098
⛓#4122human:maria approved mergef4670c9f6b
⛓⛓
#4124policy blocked write /etca40020ac2b
⛓#4125agent:support refunded €129f51b1ddc7b
⛓#4126human:tom rejected DROP TABLE5318cbb023
⛓#4127agent:triage labelled #490a43439c174
⛓01 · Assemble
Watch a run put itself together.
Autonomy
The agent acts on low-risk steps and asks on the rest.
Run cost
$0.087
4% of $2.00limit
- Input
- 18.4k tok
- Output
- 2.1k tok
Queued
2Running
2Needs you
1Done
1Run #0412
LiveRead the ticket and plan
820ms3 sub-tasks
search_issues
412msrepo: acme/web
run_tests
214 passed
Ask to merge PR #482
Post summary to #eng
deploy asks
Ship v4.12 to prod
All checks green. Waiting on you.
Medium riskRepo: acme/webFiles: 4 changedEst. cost: $0.04
02 · Forge
Every entry signs the one before it.
HMAC-SHA256 over the content and the previous signature. Edit one row and the chain breaks from there down.
#4120
agent:triage
read issue #471
mac ········
#4121
agent:coder
opened PR #482
mac ········
#4122
tool:ci
214 tests passed
mac ········
#4123
human:maria
approved merge
mac ········
#4124
agent:deploy
shipped 4.12.0
mac ········
#4125
policy
blocked write /etc
mac ········
03 · Zoom in
Nine agents. One map. You see who needs you.
Twenty parts. Each one does one job well.
See all 20 →6 components shown
How you get it
Three ways in. Pick the one you like.
- 01
Copy the code
One file per component. TypeScript, Tailwind classes, shadcn colour names. Paste it into components/ and it runs.
import { ApprovalCard } from "@/components/loopkit/approval-card"; <ApprovalCard risk="high" timeout={60} onDecision={(d) => audit.log(d)} /> - 02
Install from the registry
Every component is a shadcn registry item. The CLI adds the file, the dependency and the colour tokens.
npx shadcn@latest add \ https://loopkitui.com/r/approval-card.json
- 03
Hand your AI the prompt
Each page has a prompt with the tokens, the behaviour, the accessibility rules and the full source. Claude Code, Cursor, Codex or v0 rebuild it as-is.
You are adding the Loopkit "Approval Card" component to a React + Tailwind project. Goal: create components/loopkit/approval-card.tsx …
MCP
Or skip the copy and paste. Connect the Loopkit MCP server and your agent searches the library and pulls components itself.
Set it up →The boring parts
Done, so you don't have to.
6 components are free: Approval Card, Mode Switch, Cost Meter, Tool Call Viewer, Agent Status, Handoff Banner. Try them before you pay for anything.
- Light and dark
- Both themes from the same tokens. Light is the default here, because most dashboards are.
- Keyboard first
- Radio groups, roving focus, shortcuts on approvals, visible focus rings.
- Reduced motion
- Every animation checks prefers-reduced-motion and falls back to a still state.
- shadcn tokens
- background, card, muted, primary, border, ring, plus four: signal, ok, warn, info.
- One dependency
- framer-motion. No charting libs, no graph libs. The force layout is 60 lines.
- Real logic
- The audit log signs with Web Crypto HMAC-SHA256. The voice input reads your mic.
Pricing, plainly.
Pro
Everything$29per month
Everything in the library, while you're subscribed.
- All 20 components, plus new ones as they ship
- Rebuild prompt for every component
- All landing-page templates
- Registry + MCP access with your key
- Commercial and client work
- Cancel any time
Lifetime
$249one time
Pay once. Keep every update.
- Everything in Pro, forever
- All future components
- MCP server access
- One payment, no renewals
Questions
What exactly do I get?
React components written in TypeScript with Tailwind classes. Each one is a single file you own. You can copy it, install it with the shadcn CLI, or give the rebuild prompt to your coding agent.
Do I need shadcn/ui?
No. The components only use shadcn's colour names (background, card, muted, primary…) and a cn() helper. If you already use shadcn they match your theme. If you don't, add the tokens from any component page.
Do they connect to a real agent?
They are UI. Each takes props and callbacks, like onDecision or onSend, and you wire them to your backend, LangGraph, the Vercel AI SDK, your own queue, whatever you run. The demos use scripted data.
Is the audit log actually tamper-evident?
The chain logic is real: each entry is HMAC-SHA256 over its content and the previous signature, using Web Crypto. In production, sign on your server and keep the key there. The component shows and verifies the chain.