If you send invoices, you already know the small monthly pain: a subscription tool you barely use, a locked spreadsheet template, or a PDF you rebuild by hand every time a rate changes. An invoice is not complicated. It is a form with some arithmetic on top, and that makes it one of the most genuinely useful things you can build with AI in a single afternoon. This guide shows you how to build an invoice generator with AI that totals correctly, handles tax and discounts, prints to a clean PDF, and goes to a client as a live link you can update.
TLDR: Write your billing fields down first: your details, the client’s, line items with quantity and rate, tax, and terms. Then ask AI for one self-contained HTML file with an add-line-item button and totals that recalculate on every change. State the math as rules, round to two decimals and compute tax on the post-discount subtotal, so the numbers never drift. Add a print stylesheet for a clean PDF, then publish it to VisiblePage as a private link you can send a client and edit later without changing the URL.
Why an invoice is a great thing to build with AI
Most “build an app with AI” projects are toys you make once and forget. An invoice is the opposite: it is a real document you send for money, and the requirements are small, fixed, and known. There is no guessing what it should do. It shows who is billing whom, lists what was done, multiplies quantity by rate, adds it up, applies tax, and states how to pay. That tight, well-defined shape is exactly what AI handles well, and it means you can get a professional result without being a developer.
It also beats the usual options on the things that actually annoy you.
| Approach | Cost | Editable | Totals | You own it |
|---|---|---|---|---|
| Invoicing subscription | Monthly fee | Yes | Automatic | No, locked in |
| Word or PDF template | Free | Clumsy | By hand | Yes |
| Spreadsheet | Free | Yes | Automatic | Yes, but ugly to send |
| AI-built invoice page | Free | Yes | Automatic | Yes, one HTML file |
The AI-built page gives you the automatic math of a spreadsheet, the clean look of a paid tool, and a file you fully own, with no recurring charge.
Write down your invoice before you prompt anything
The single biggest quality jump comes from handing the AI your real fields instead of asking for “a professional invoice.” A generic request gets generic filler. Take two minutes and write, in plain text, exactly what your invoice contains:
- Your details: business or freelance name, address, email, and your logo if you use one.
- Client details: company name, contact, and billing address.
- Invoice meta: invoice number, issue date, and due date.
- Line items: a description, a quantity, and a rate for each thing you did.
- Money rules: your tax rate, whether you offer discounts, and your currency.
- Payment terms: how you want to be paid and by when.
Now you are not asking the AI to invent an invoice. You are asking it to build yours. That is a much easier request to get right, and the output will match how you actually bill.
The anatomy of an invoice that calculates itself
Before the prompt, it helps to picture the flow of numbers, because this is the part you will hold the AI accountable for. Each line multiplies quantity by rate to get a line total. The line totals add up to a subtotal. A discount comes off the subtotal, tax applies to what remains, and the result is the grand total.
If you can describe that flow, you can prompt for it precisely. The order matters, and stating it out loud is what keeps the totals honest.
The prompt that builds the invoice
Paste your field list from earlier into the prompt where noted, then send this. It asks for one self-contained file, spells out the math, and requests a print stylesheet so the PDF comes out clean.
Build me an invoice generator as a single, self-contained HTML file with all
CSS and JavaScript inlined. No frameworks, no external requests.
Structure:
- An editable header with two columns: "From" (my details) and "Bill To"
(client details). Every field is editable directly on the page.
- Invoice number, issue date, and due date fields near the top.
- A line-item table with columns: Description, Quantity, Rate, Line Total.
An "Add line item" button adds a new row. Each row has a small remove button.
- Below the table: a Subtotal, a Discount input (flat amount), a Tax rate
input (percent), a Tax amount, and a bold Grand Total.
Math rules, follow exactly:
- Line Total = Quantity x Rate, rounded to 2 decimals.
- Subtotal = sum of all Line Totals.
- Apply the Discount to the Subtotal first.
- Tax = (Subtotal minus Discount) x Tax rate, rounded to 2 decimals.
- Grand Total = Subtotal minus Discount plus Tax.
- Recalculate every total whenever any quantity, rate, discount, or tax
value changes. Format all money with a currency symbol and 2 decimals.
Design: clean and professional, a single accent color, generous white space,
a readable serif or grotesk font, and a layout that fits one page.
Also add a print stylesheet: when the page is printed, hide the "Add line
item" button, all remove buttons, and any toolbar, so Print to PDF produces a
tidy one-page invoice with no interface clutter.
Here are my real fields, use these instead of placeholders:
[paste your From, Bill To, line items, tax rate, and payment terms here]Two things make this prompt work. It forbids external requests, which keeps the file self-contained and portable, and it states the arithmetic as explicit rules in the exact order they apply. That second part is the whole game with invoices.
Get the math right, because this is where invoices fail
A decorative invoice with wrong numbers is worse than no invoice. The failures are always subtle: values that show three decimal places, tax computed on the pre-discount subtotal, or a grand total that does not update when you edit a rate. You avoid all three by being explicit, which you already did in the prompt above. After the AI builds it, test the math by hand once:
- Add two line items with rates that do not divide evenly, like 3 units at 12.34.
- Enter a discount and confirm the tax drops accordingly, meaning tax is on the post-discount amount.
- Change a quantity and watch every total below it update immediately.
- Check that nothing ever shows more than two decimal places.
If any of those is off, tell the AI exactly what you saw: “the tax is being calculated on the subtotal before the discount, fix it to apply the discount first.” Concrete feedback fixes it in one turn. Vague feedback like “the math seems wrong” makes it guess.
Make it print to a clean PDF
Most freelancers still need a PDF for their records or for a client who wants an attachment, and you do not need a special library for that. Because you asked for a print stylesheet, your browser’s built-in Print to PDF is the export button. Open the invoice, choose Print, select “Save as PDF,” and the buttons and toolbar disappear so you get a clean one-page document.
If the printed version looks cramped or breaks across two pages, that is a quick fix: “in the print stylesheet, reduce the header size slightly and set the body to fit on a single page.” You are art-directing the printed output separately from the on-screen version, which is exactly what a print stylesheet is for.
Reuse it without rebuilding it
The reason to own the file instead of renting a tool is reuse. Keep the AI-built HTML as your master template. For the next client, you open it, change the “Bill To” details, swap the line items, bump the invoice number, and you are done in under a minute. No new subscription, no rebuilding, no fighting a locked PDF. If you bill the same client monthly, you can go one step further and keep a single live version you update each cycle.
Get the invoice in front of your client
The finished invoice is a real web page, so the natural last step is to put it at a real web address instead of emailing a file that goes stale the moment a number changes. That is what VisiblePage does. You paste the HTML, or drop the ZIP if the AI split it into files, and you get a live link immediately, with no build step, no server, and no domain setup. Every editable field and every total keeps working, because you are sharing the actual page and not a picture of it. It serves fast from the edge, so it opens quickly for a client on their phone, and you can keep the page private or password-protect it so only your client sees the numbers. Best of all, the link is one canonical URL: if a rate was wrong or the client added scope, you fix the page and the same link shows the corrected invoice. No “invoice_final_v2.pdf” making the rounds, and no confusion about which version is the real one.
Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.
Frequently asked questions
Can AI really build a working invoice generator? Yes. An invoice is a structured form with arithmetic on top, which is exactly what AI builds reliably in a single file. If you can list your billing fields and one tax rule, a capable model produces an HTML page with editable client details, an add-line-item button, automatic line and grand totals, and a tax field, all in one conversation. The part you have to watch is the math, so ask it to round to two decimals and recalculate on every change.
Will the totals actually add up correctly? They will if you spell out the rules. Tell the AI to round each currency value to two decimals, calculate the subtotal from the line items, apply any discount, then compute tax on the discounted subtotal, and add tax to reach the grand total. Ambiguity is where invoice math goes wrong, so state the order of operations rather than assuming the model will guess your accounting.
How do I turn the invoice into a PDF? Ask for a print stylesheet. Request that the page hide its buttons and toolbar when printed so your browser’s Print to PDF makes a clean, one-page document. That gives you a PDF to attach for records while still keeping the interactive version for edits. You do not need a separate export library for most invoices.
Is it safe to put client and payment details on a shared page? Use a private or password-protected link and it is fine for most freelance billing. A published invoice is a page you control, so set it to require a password, send that password to the client separately, and only the intended person sees the numbers. Avoid putting full bank credentials in the page itself, keep it to the payment instructions your client already expects.
Can I reuse the invoice for the next client? Yes, and that is the advantage over a locked PDF template. Because it is an editable page, you change the client name, the line items, and the invoice number, and you have the next invoice in under a minute. Keep the AI-built HTML file as your master template and duplicate it per job, or update the same live link when a single invoice changes.