DEV Community

Tiiny Host
Tiiny Host

Posted on

Creating an Invoice Generator Using AI

How one plain-English prompt to Claude became a working invoice generator with live preview and PDF export, hosted online in seconds with Tiiny Host.

WATCH HERE:

Anyone who runs a business knows the small, repetitive pain of invoicing. You finish a job, you're ready to get paid, and then you have to sit down and type out your company details, the service description, the fees and the client information all over again. Do that a few dozen times a month and it quietly eats hours of your time.

The usual fixes aren't great either: pay a monthly subscription for software you only open a couple of times a week, or keep wrestling with an old Word template whose totals never quite line up.

In this video, the creator takes a different route. Instead of buying or downloading an invoicing tool, they ask Claude, Anthropic's AI assistant, to build one from scratch. The result is a single HTML file that holds the entire app: an input form, a live invoice preview that updates as you type, and a one-click PDF export.

Then, to make it usable from anywhere, they drag that file into Tiiny Host, password-protect it and get a real URL they can open on any device. The whole process takes a few minutes, with no code written by hand and no subscription attached.

Here's the full walkthrough, including the exact prompt used, what the generated app looks like, and why Tiiny Host is the hosting choice for a tool like this.

Invoice generator overview

Why build your own invoice generator at all?

The video opens by framing the problem simply: if you run a business, you send a lot of invoices, and each one requires the same ritual of entering company details, service fees and service descriptions. When volume grows, so does the time cost.

Building your own tool solves several problems at once. First, you get exactly the fields you need and nothing you don't. Second, there's no recurring fee for something that is, at its core, a form and a print button. Third, because the tool lives as a single HTML file, you own it completely. You can edit it, re-host it or hand it to someone else without any licensing questions.

The creator also mentions that the goal is a generator that remembers previous clients and produces the invoice in seconds, so the second, third and fiftieth invoice take far less effort than the first. The focus throughout is on speed: both the speed of building the tool and the speed of using it afterwards.

The one prompt that builds the whole app

The heart of the video is just how little input is needed. Back in Claude, the creator types a single, conversational request. Translated from the original, the prompt reads roughly:

"Build me an HTML app that lets me enter all the necessary details a business invoice needs, then create an export button to export a PDF invoice to send to clients."

That's it. No specification document, no list of fields, no mention of libraries or styling. The prompt describes the outcome (an invoice app), the input (all the details a business invoice needs) and the key action (export to PDF for clients). Claude fills in everything else.

A few things are worth noting about why this works so well:

  • It describes the job, not the implementation. By saying "all the necessary details a business invoice needs," the creator lets Claude use its own knowledge of what belongs on an invoice: company name, registration number, client, reference, line items and totals.
  • It asks for HTML specifically. A single HTML file is self-contained and portable. It runs in any browser, needs no server, and can be uploaded anywhere.
  • It names the end goal. "Export a PDF invoice to send to clients" tells Claude the output has to be something a client can actually receive, which steers it toward a clean, printable layout rather than just a data form.

After hitting Enter and waiting briefly, Claude responds with the finished app. As the creator puts it when opening the result, it looks "really nice and clean."

Generated invoice app

Walking through the generated invoice tool

With the app open, the video goes field by field so you can see what Claude produced on the first attempt.

Company logo. At the top there's an option to upload your company logo. It's optional, but if you have branding, this is where it goes and it appears on the final invoice.

Company details. The creator types in a placeholder business name ("Demo Company Ltd" in the translation) and a random company number, just to see how the output looks. In real use, this is where your registered business name and number would live.

PO reference. There's a field for a purchase order reference. The creator makes a practical point here: it's always a good idea to include a reference, because it makes the payment far easier to trace on the banking side when the money arrives.

Client. Finally, a client field, filled here with "Client One" as an example.

Once the fields are filled, scrolling down reveals the key feature: the invoice has already been generated. The preview updates in real time as you type, so what you see on screen is exactly the document your client will receive. There's no separate "generate" step and no guessing how the layout will come out.

According to the video description, the tool also handles the arithmetic for you. Line items, VAT and discounts calculate themselves, so you never touch a formula or risk a total that doesn't add up. The PDF export is designed to print cleanly on A4 and names the file after your invoice number and client, so it's ready to attach to an email the moment it's downloaded.

One-click PDF export

Above the preview sits an Export button. The creator clicks "Export PDF" while the app is still running inside Claude, and a PDF version of the invoice is produced immediately.

This is the part that turns a nice web form into something genuinely useful. A PDF is the format clients expect, it can't be accidentally edited, and it looks the same on every device. Because the export comes straight from the live preview, there's no mismatch between what you checked on screen and what lands in your client's inbox.

With the tool working end to end, the creator moves on to the second half of the project: getting it online so it can be used anywhere, not just inside a chat window.

Hosting the app live with Tiiny Host

There are several ways to put an HTML file on the internet, but the creator chooses Tiiny Host because it's the fastest. Tiiny Host is a platform that lets you upload a video file, an HTML app or practically any file you can think of, and share it in seconds with friends, family or users around the world.

The process shown in the video is short:

  1. Go to Tiiny Host and click Upload file.
  2. Choose the invoice generator HTML file.
  3. Switch on password protection.
  4. Upload.

The password step deserves a mention. The creator doesn't want to share the generator with everyone; it's a personal tool for writing their own invoices. Password protection keeps the link private while still letting them open it from any device. If you later want to share the tool with a colleague, you simply hand over the password.

The video also points out a more advanced option: Tiiny Host has an MCP (Model Context Protocol) integration with Claude, which the creator has covered in other videos. Connecting it means Claude can publish directly to Tiiny Host without the manual upload. Instructions for linking the MCP server to Claude are available at helpdesk.tiiny.host. For this video, though, the plain drag-and-drop route is used to keep things simple.

Tiiny Host upload

Turning a personal tool into a product

Partway through the hosting section, the creator raises an interesting idea. The same invoice generator could be turned into a product. Host it on Tiiny Host, connect it to Stripe, and let other businesses and brands pay a monthly fee to create and issue their own invoices.

Nothing about the file would need to change dramatically. The HTML app is already complete; adding a payment layer and removing the personal password would be the main steps. It's a reminder that "I built a tool for myself" and "I built a small software business" can be separated by surprisingly little work when the tool is a single, portable file.

Why Tiiny Host specifically

Beyond speed, the creator lists a handful of Tiiny Host features that make it a good fit for a tool you'll use regularly:

  • QR codes. Every uploaded file can get a QR code. The creator suggests adding it to your phone so you can scan it and jump straight into the invoice generator wherever you are.
  • Analytics. You can see who is loading your apps, who is viewing them, where they are located and which devices they're using. For a private invoicing tool this is a nice-to-have; for a product shared with customers, it becomes essential.
  • Tracking links. If you send the link to specific people, you can create individual tracking links to see who actually opened it.

The creator says these are the main reasons they rely on Tiiny Host for projects like this.

Testing the live version

To finish, the video opens the newly hosted link. Clicking through brings up the password prompt; the creator enters the password, hits Enter, and the invoice generator loads exactly as it did inside Claude. All the fields are there, ready to be updated with invoice details, the live preview appears below, and the PDF export works whenever you need it.

That's the complete loop: a prompt into Claude, an HTML file out, a drag into Tiiny Host, and a working, password-protected invoice generator you can open on your phone or laptop.

Live hosted invoice generator

Practical tips if you want to replicate this

Although the video keeps things minimal, a few lessons stand out for anyone copying the approach:

  • Keep the first prompt short and outcome-focused. The creator's one-sentence request produced a working app on the first try. You can always ask Claude for follow-up tweaks (different fields, a currency change, a colour scheme) once the core is working.
  • Always include a PO or invoice reference. As noted in the video, a reference makes bank reconciliation far easier.
  • Test the export before you host. The creator clicked Export PDF inside Claude first, confirming the output looked right before moving to Tiiny Host.
  • Password-protect personal tools. It costs nothing extra in effort and keeps your business tooling private.
  • Save the QR code to your phone. It turns a web page into something that feels like an installed app.
  • Consider the MCP route later. If you find yourself updating the generator often, connecting Tiiny Host to Claude via MCP removes the manual upload step entirely.

The takeaway

Invoicing is one of those tasks that nobody enjoys but everyone running a business has to do. The video shows that you don't need to pay for software or fight with templates to make it painless.

A single sentence to Claude produced a clean invoice generator with logo upload, company and client fields, a PO reference, a real-time preview and one-click PDF export. A single upload to Tiiny Host turned that file into a private, password-protected web app with a shareable URL, QR code access and analytics.

The whole thing takes minutes, costs nothing in subscriptions, and leaves you with a tool you fully own and can adapt, or even sell, however you like.

If you've ever thought "I wish this existed" about a small piece of business admin, this is a convincing demonstration that, with AI and a quick hosting platform, it probably can.

Top comments (0)