Spendwick: purchase requests and approvals for a 60-person company
Purchase requests with attached quotes, department head and finance approvals, live quarterly budgets that warn before overspending, decision emails and a finance spend view.
Agent specs
- Agent
- Claude Code, Opus 5.5 Medium
- Time
- 19 min
- Cost
- $8.22*
Agents work faster and more accurately on Elements.
* Cost at API rates, October 2026.
Run it yourself
Paste this prompt into your AI agent. You get the finished app on your own machine, ready to change however you like.
Install elements: curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH Create an Elements app from the elementscode/demo-spendwick scaffold: cd ~/elements/projects elements create spendwick -scaffold=elementscode/demo-spendwick cd spendwick Start the app.
How it's built
Spendwick needed three kinds of accounts, an approval chain that routes each request by department and amount, quarterly budgets and statuses that update on every open screen, emails on each step, and a CSV export for finance. Each of those is a part of Elements, so the agent spent its 19 minutes on the approvals app itself.
What Elements gave the app
- Live statuses and budgets. Every change to a request notifies a channel. Each open page listens and re-reads its own slice through an
@rpc, so an approval shows up at once on the requester's list, the head's budget and the finance totals. - Approvals in one transaction. Approving or rejecting records the decision and comment, moves the request to its next step, adds the history entry and schedules the emails in one transaction, so the chain, the history and the status always agree.
- Emails as background jobs. A job sends the next approver a "needs your approval" email and the requester an email on each decision, from two email templates. It is scheduled inside the change's transaction, so it runs once the change commits.
- Attached quotes. The request form sends the quote to an
@rpcas aFile, which checks its type and size and stores it with the request, and a route serves it back to the people who can see that request. - Sessions and roles. One guard reads the signed-in user's role and department, so employees see their own requests, heads see their department's, and only finance reaches the finance view, the departments page and the CSV export route.
- Data from SQL files. Migrations define the schema and seed finance, four departments with heads and budgets, eight employees and twenty requests walked through the app's own steps. The project server applied each one as soon as it was saved.
What the project server gave the agent
The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building.
What shipped
The app type-checks with zero errors and all 14 tests pass. Every page works on desktop and phone, and live updates arrive across tabs, such as an approval moving a request to finance and updating the finance totals on another open screen.
The code
Build it from scratch
To watch your agent build this app from an empty project, use the prompt we used instead. It takes longer than starting from the finished app above.
Install elements: curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH Create an Elements app: cd ~/elements/projects elements create spendwick cd spendwick Start the app, then build this: Build a purchase approvals app named spendwick for a 60-person company. Three kinds of accounts: employee, department head and finance. Finance manages departments, their heads and budgets. - Purchase requests: item, vendor, amount, department, category, reason, an attached quote, and status (draft, submitted, approved, rejected, ordered, received). - Approval rules: every request needs its department head. Requests over $1,000 also need finance. Approvers approve or reject with a comment. - Each request shows its approval chain and a history of every status change and comment. - Each department has a quarterly budget. A request shows how much of its department's budget is committed and remaining, and warns when it would go over. - Approvers get an email when a request needs them. Requesters get an email on each decision. - Finance view: all requests, spend by department and category this quarter, and CSV export. - Employees see only their own requests. Department heads see their department's. Seed finance, four departments with heads, eight employees and twenty requests across statuses. Show the seeded logins on the sign-in page. Request statuses and budget totals update in real time.
Comments· 0