How to build an invoice and quote builder with v0

Rule of thumb: if you send a handful of invoices a month and want to be paid by card tonight, rent one, and Wave or Zoho Invoice will do it for nothing but the card fee or their logo on your PDF. If invoicing is part of a product you sell, if your quotes carry revisions and your PDFs carry your brand, or if you bill in several currencies and do not want them converted for you, the software is worth owning, because the caps above are exactly where a growing business pays and your clients’ names and amounts are yours to keep in a database you control. The honest middle case is a business that needs to be paid online. Build this and connect a payment rail, and read the block on choosing how you get paid, because that fee exists whether you rent the software or own it.

* On this template the free-tier line to watch is the pause, not storage. The only file is a logo and the rows are small, but a free project is paused after a week without activity, and a business that invoices at month end leaves it idle for three. Pro, from $25/mo, ends the pause and keeps a daily backup for 7 days, which matters more here than anywhere else in the catalogue, because an invoice is a record you may be required to keep.

Prices and rates from supabase.com, developex.com, v0.app, v0.app and vercel.com, checked September 2026.

The database step is the one worth not skipping once your screens need real data. Everything else here takes a couple of minutes, and after that you’re just describing what you want.

1. 01

   Generate the quote editor before anything else exists

   Start with the screen you will live in. Placeholder clients are fine, and finding out that the totals column is in the wrong place now costs nothing.

   PromptSketch the editor and the screens around itCopy

   Build the screens for an invoicing app. A quote editor with a client block, line items with description, quantity, unit price and a per-line discount, and a totals panel showing subtotal, a discount as an amount or a percentage, a tax rate, shipping and the total, recalculating as I type, with a currency chosen from a list and every amount formatted for it. A quotes list and an invoices list with search, a status filter and a sort. An invoice preview page with a Download PDF button. A clients list with add and edit dialogs. A template gallery with a handful of invoice designs and a branding panel with a logo, colours, a font and header and footer text. A reports page with three status cards and a sortable table. Use placeholder content for now. I will add the real database next.

   Placeholder data is fine here, and only here. Make the arithmetic real even now, because a totals panel that is wrong at this stage is wrong in every later step.

2. 02

   Start a new chat for sign-in, the database and its ownership rules

   This is the step that turns a mock-up into an app somebody can be billed from. Sign-in and the ownership rule go in together, because the app has no public side and no row without an owner.

   PromptAdd sign-in, connect a database and design the modelCopy

   In this chat, add authentication with email and password (sign-up with a full name and company name, login, logout, a session) and connect a Supabase database. Create the tables and the API routes behind them. Clients with name, email, phone, billing and shipping address, tax ID, account number, contact person and notes. Quotes with a number, a status of Draft, Finalized or Archived enforced by a database check and defaulting to Draft, the client’s details, quote and valid-until dates, a tax rate, a discount that is an amount or a percentage, shipping, a currency code, notes, terms and a link to the invoice it became. Invoices with the same shape plus a due date, payment terms in days, payment instructions and bank details. Line items for each. Tax rates, templates with a settings JSON, settings as key and value JSON, and custom fields scoped to quotes, invoices or both with a values table each. Every route checks on the server that the caller is signed in and reads or writes only that account’s rows, and every table has row-level security so the database enforces the same thing, line items included through the parent document’s owner. Make the editor and the lists read real data, and show me that a second account sees nothing.

   Ask for the routes alongside the tables. A schema with nothing reading it leaves the editor exactly as fake as it was, and a route without the database rule behind it is a rule anyone can skip.

3. 03

   Turn a quote into an invoice, and give both a lifecycle

   Converting without retyping, revisions of a quote, sequential numbers and the three statuses. No sent and no paid, because nothing here sends or takes money.

   PromptAdd conversion, revisions, numbering and statusesCopy

   Add a Convert to invoice action on a finalized quote that creates an invoice with the same client, lines, discount, tax, shipping and currency, numbers it INV-1, INV-2 and so on, links the two documents both ways and opens the invoice editor with a due date and payment terms in days added. Add a Duplicate action on a quote that creates a revision numbered from the original (R becomes R/1, then R/2) and make the routes handle a number with a slash in it. Then the statuses Draft, Finalized and Archived on both documents, changed from the detail page through a server route, with the database refusing any other value.

4. 04

   Make the PDF real, then tidy the designs with Design mode

   The designs you sketched become PDFs generated in the browser, with your branding on all of them. Spend the time you save on a proper visual pass.

   PromptBuild the PDF designs and brandingCopy

   Generate the PDF in the browser with a PDF library, one renderer per design in the gallery (professional, classic, a ledger style and a couple more), each with the document’s header, addresses, line items, totals, notes and terms in its currency. Wire the branding panel to real settings: a logo uploaded to a storage bucket limited to 5 MB and image types, primary and accent colours, a font choice and header and footer text, applied to every design with a live preview. Make the Download PDF button on the invoice preview produce the file.

   For visual fixes on the designs and the totals panel, select the element in the preview and use Design mode rather than describing where it sits. It is faster and it changes the real code.

5. 05

   Start a new chat for the AI template analyzer

   The one AI feature, in its own chat: a design rebuilt from an invoice you already use, reading the layout and not the amounts, with a log and a ceiling from the first call.

   PromptAdd the AI analyzerCopy

   In a new chat, add a server route that requires a signed-in user, accepts an uploaded image or PDF of an existing invoice, sends it to my AI provider with the key held in server environment variables, never in the browser, and asks the model, through a forced structured tool call, for a layout specification only: colours, typography, header layout, address sections, line-item columns, how totals are shown, footer and decorative elements. It must not read amounts or line items. Before contacting the provider, write a row to an ai_calls table and check the caller’s calls today against a limit read from settings. Save the specification as a custom template rendered by the same preview and PDF code as the built-in designs.

   Be explicit that the key lives on the server. v0 will otherwise reasonably reach for a client-side call, since the upload screen already exists and it is the shortest path.

6. 06
   Destination

   Wire the dashboard, reports and settings, test as a second account, then open a pull request

   The screens around the documents get real data, then walk the whole thing through and merge, which, if that branch is the linked Vercel project’s production branch, also deploys it.

   PromptWire the rest, add demo, and shipCopy

   Make the dashboard show real counts and totals by status and the most recent documents, wire the reports page to real rows with CSV and PDF export of the table, add an activity page listing recent changes to quotes, invoices and clients from their timestamps, and build a settings page for the company profile, branding, tax rates, custom fields, numbering and the default currency. Add a demo account seeded on sign-in and wiped on sign-out behind a Try the demo button I can remove before launch. Then help me walk the whole flow: sign up a second account and confirm it sees no documents, create a quote in a currency with no decimals, convert it, download the PDF and check the totals match, hit the analyzer limit on purpose and read what the app says. Once it holds up, publish and open a pull request for it.

Review the access rules (row-level security policies) on every table. For each one, tell me in simple terms who can view, add, edit, and delete records, confirm that people can only reach their own data while the right roles can reach more, and flag anything left open that shouldn’t be.

One rule outranks everything above it: the database service key and the AI provider key stay on the server, and neither one ever goes into the app a browser downloads or into a repository. Should either leak, assume it has been used, look at what your provider says was spent with it, and issue a new one the same day.

Two questions decide this, and neither is about speed. Does the plan permit commercial use, because an app that bills clients is a business and Vercel’s Hobby tier is not for one. And does a saved link to one invoice open that invoice after sign-in, which takes one routing rule on each of these hosts, with Vercel’s already in the template. Nothing on this app is public, so a search engine has nothing to index and that is fine. The host serves one small static folder, and every amount comes from your database.

A percentage has no size until you multiply it by your own month, so do that first. Twenty invoices of $500 paid by card in a month, $10,000 in all, costs roughly $336 through Stripe (the card fee, the 30 cents on each, and the 0.4% for the invoice), about the same through Square on the free plan, and roughly $309 through PayPal at its card rate. Bank details printed on the PDF cost nothing and arrive when the client gets round to it. Whichever you pick, the paid status and the reconciliation are yours to build, because the template has neither.

Open the analyze-template function. Make the model name a setting I can change without a deploy, and set it to a current model on my provider’s price list that accepts images and structured tool calls. Add an ai_calls table that records every model call (which account, which task, which model, tokens in and out, a cost estimate, success or failure) and write to it from the function, successful or not. Then add a ceiling: a limit per account per day and a total across the whole app, both settings I can change without a deploy, checked before the function contacts the provider and returning a friendly “you have reached today’s limit” rather than an error. Do not let the browser send the limit or the cost. Then add a small usage panel to settings showing calls and estimated spend this month.

Add a “Draft from description” box at the top of the quote editor. It sends my description and my last twenty finalized quotes’ line items to the ai function and gets back suggested lines with a description, quantity and unit price each, drawn from prices I have used before where they match. Fill the editor with the suggestions marked as drafts for me to edit or delete, never save anything until I do, and keep the totals recalculating as I change them.

Add an “Overdue” filter to the invoices list for finalized invoices past their due date, and a “Draft reminder” action on each that sends the client’s name, the invoice number, the amount, the currency, the due date and how many days late it is to the ai function and gets back a short, polite reminder in my company’s voice, with a firmer version for anything more than thirty days late. Show it in a box I can edit and copy, and record in the activity feed that a reminder was drafted, since this app does not send email.

Add a second function called read-invoice that requires a signed-in account, accepts an uploaded image, PDF or CSV of an invoice or a price list, sends it to the ai function and asks for the line items (description, quantity, unit price), the currency, the tax rate and the client details it can find, each with a confidence. Show the result as a prefilled draft quote or invoice with every figure the model was unsure about highlighted for me to confirm, and never save until I do. Log it and count it against the same ceiling as the analyzer.

Add a “Summarize this month” button on the reports page that gathers the documents finalized in the selected period, grouped by currency with no conversion between them, and asks the ai function for a short summary: what was invoiced, what was quoted and not yet invoiced, the largest clients by amount, and anything unusual compared with the previous period. Show it in a box I can edit and copy, and make clear which currency each figure is in.

v0 doesn’t ship its own model for these prompts, so you bring an API key for whichever provider you want, and v0 writes the route that calls it. Start with a cheap model while you’re still iterating on the prompt itself, then swap in a stronger one for the version that ships, and keep every AI feature behind that one route so there’s only one key to rotate.