Slipjar: expense reports with receipt photos for a small company
Expenses with receipt photos, reports that approvers approve or send back with a comment, monthly totals, and email, all live.
Agent specs
- Agent
- Claude Code, Opus 5.5 Medium
- Time
- 22 min
- Cost
- $6.93*
Agents work faster and more accurately on Elements.
* Cost at API rates, September 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-slipjar scaffold: cd ~/elements/projects elements create slipjar -scaffold=elementscode/demo-slipjar cd slipjar Start the app.
How it's built
Slipjar needed expenses with receipt photos, reports that move from draft to approved or sent back, emails at each step, monthly totals and pages that stay current for both employees and approvers. Each of those is a part of Elements, so the agent spent its 22 minutes on the workflow itself.
What Elements gave the app
- Reports that update in place. A channel carries each report's new summary whenever it changes. An employee's list, the approver's queue, the report page and the monthly totals all listen, so a decision shows up on every open screen as it happens.
- Receipt photos from the form. An employee adds an expense with its receipt photo straight from a form, and the image is stored with the expense in one transaction and shown only to its owner and approvers.
- An approval workflow. A draft is submitted, then approved or sent back with a comment. Exactly one approver decides, and each report goes to an approver other than its owner.
- Background work. Jobs email the approvers when a report is submitted and the employee when it is decided.
- Server calls as function calls. Adding expenses, building reports, submitting, deciding and the monthly totals call server functions straight from the page with
@rpc. Totals count approved spending by category, with submitted amounts shown as pending. - Data and roles from SQL. Migrations define the workflow and seed two approvers, five employees and reports in every status, with receipts. Sessions and roles keep the queue with the approvers.
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 25 tests pass. Every page works on desktop and phone.
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 slipjar cd slipjar Start the app, then build this: Build an expense report app named slipjar for a company of about thirty people. Two kinds of accounts: employee and approver. An approver can also submit. EMPLOYEE - Add an expense: date, merchant, amount, category (travel, meals, software, supplies, other), a note, and a photo of the receipt. - Group expenses into a report and submit it. - See each report's status and any approver comments. APPROVER - Queue of submitted reports. - Open a report, see each receipt image, approve or send it back with a comment. - Monthly totals by category and by person. Email the employee when a report is approved or sent back, and approvers when one is submitted. Seed two approvers, five employees, and a dozen reports across statuses with receipt images. Show the seeded logins on the sign-in page. Report status updates in real time.
Comments· 0