Vibe coding cheat sheet · 01 / 08
Calculators and finance tools

Turn the question your customers always ask into a tool they bookmark.

Pricing, budget, quote or mortgage calculators: one question, an instant answer, results that are saved. Built with your AI agent, live on Codata IO the same day.

Best for: freelancers · consultants · finance creatorsDifficulty: easiestFirst build: pricing calculator
What Codata IO runs for you
DatabaseEvery calculation saved with a name and date, so users come back to it.
Sign-inA private "My saved calculations" list for each user. No auth code to write.
File storageBranded PDF summaries, generated and stored for download.
Transactional emailSend the result to the user's inbox, and keep the email as a lead you own.
Step 01

Connect your agent

Sign up free at codata.io and copy your MCP address from onboarding. Add it once to Claude, Cursor, Codex, Copilot, ChatGPT, Lovable or Replit, then log in to Codata IO when prompted:

https://mcp.codata.io/mcp
Step 02

Paste the starter prompt

Starter prompt · what to build
Build a [pricing / budgeting / mortgage] calculator for [audience, e.g. freelance designers].
Inputs: [e.g. hourly rate, hours, expenses, tax rate]. Output: [e.g. project price with a breakdown].
Show results instantly as inputs change, with a simple chart of the breakdown.
Use the codata MCP server to save each calculation with a name and date. Add a "My saved calculations" list behind Codata IO sign-in.
Make it mobile-friendly and explain every input with a short tooltip.
Design layer · keep it in the same prompt
DESIGN (follow exactly)
Style: calm and trustworthy, like a modern banking app.
Layout: desktop has two columns: inputs on the left (40%), a live result card on the right (60%). On mobile, the result sticks to the bottom of the screen.
Result: the answer as one big number (48px), a stacked bar showing the breakdown, and a 3-row breakdown under it.
Inputs: labeled fields with units ($, %, hrs) inside the field, a slider for ranges, and an (i) tooltip next to each label.
Buttons: one primary "Save calculation"; "Share" and "Download PDF" as secondary.
Saved list: cards with name, date and result. Empty state: "No saved calculations yet." with a "Start a calculation" button.
Colors: off-white background, white cards with soft 1px borders, near-black text, and ONE accent color: [your brand color, e.g. #2F5BFF] for buttons and highlights only.
Type: one clean sans-serif (e.g. Geist or Plus Jakarta Sans), 16px body text, generous line spacing.
Use Tailwind with shadcn/ui components. Add empty, loading and error states, and make every tap target at least 44px.
Build the main screen first with these exact specs and show it to me. After my OK, connect it to Codata IO.
Step 03

Add one feature at a time

Follow-up · share
Add a "Share result" button that creates a read-only link to a saved calculation stored in Codata IO.
Follow-up · PDF and email
Add a downloadable PDF summary with my logo at the top, stored in Codata IO file storage, and an option to email it to the user through Codata IO.
Step 04

Go live

Launch prompt
Check this app for exposed keys, missing input validation and users seeing each other's saved calculations. Fix what you find, then deploy it on Codata IO hosting and give me the live URL.
Pro tip

Ask "Where should we send your result?" Every calculation becomes a lead stored in your own Codata IO database, not a third-party form tool.

Start free. Live in under an hour.

No card required · Pay only when it runs
Start free at codata.io