DEV Community

Cover image for Chat with client In -> Invoice Out
Shuvo
Shuvo

Posted on

Chat with client In -> Invoice Out

Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle Submission πŸ’Έ

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

Every freelancer knows this moment.

The client says "Great work, can you send the invoice?" and suddenly you're digging through 200 WhatsApp messages to find the rate, the hours, the email address, and that one message where the price changed from $250 to $300.

Then you open a template, retype everything, export a PDF, and email it. Ten minutes gone, for something that's already written down in the chat.

Chat2Invoice fixes that. You paste the conversation, and a local AI turns it into a ready-to-send invoice PDF.

  1. Paste your WhatsApp, Slack, iMessage, or email conversation (optionally attach a contract, a receipt, or a mockup).
  2. Review what the AI found. Anything missing gets flagged, and everything is editable.
  3. Send a clean A4 PDF. Download it or email it straight to the client.

Who would pay for this? Anyone who gets paid directly, outside platforms that auto-generate invoices: freelance designers, developers, writers, consultants, and small agencies who negotiate in DMs and then have to turn those DMs into paperwork.

The best part is that the chat never has to leave your machine.

Demo

Step 1: Paste the chat

Chat2Invoice step 1

Step 2: Review what the AI found

The AI shows what it extracted and highlights anything it couldn't find. Here it caught one field was not found in chat.

Chat2Invoice step 2

Step 3: Preview, download, send

Chat2Invoice step 3

Struggling to learn Git?

Learn Git by solving problems on GitMission.com

GitMission preview

Code

Chat2Invoice

Paste a client chat β†’ local AI (Ollama) extracts invoice details β†’ review/edit β†’ generate an A4 PDF β†’ download or email it.

demo

  • Stack: Next.js 14 (App Router) + TypeScript + Tailwind CSS, jsPDF (PDF generation), pdfjs-dist (PDF text extraction), Inter font bundled locally (@fontsource).
  • Offline: everything runs locally. Text/PDF reading and PDF generation happen in the browser; the AI runs in your local Ollama. Only "Send via Email" needs internet (Resend).

Requirements

  • Node.js 18.18+ (20 LTS recommended)
  • Ollama

Setup

# 1. Install Ollama, then pull the model (one time, ~3 GB)
ollama pull gemma3:latest

# 2. Install dependencies
cd chat2invoice
npm install

# 3. Environment
cp .env.example .env.local     # edit if needed
Enter fullscreen mode Exit fullscreen mode

.env.local:

OLLAMA_AI_MODEL=gemma3:latest
OLLAMA_HOST=http://127.0.0.1:11434
# Optional – the "Send Invoice via Email" section only appears when BOTH are set:
RESEND_API_KEY=re_xxx
RESEND_SENDER_EMAIL=invoices@your-verified-domain.com
Enter fullscreen mode Exit fullscreen mode

(Shell environment variables work too.) RESEND_SENDER_EMAIL must…

How I Built It

The open-source AI part: Gemma 3 running locally through Ollama. No API key, no per-request bill, no server in the middle. The app talks to Ollama on 127.0.0.1:11434, and that's where the "understanding" happens.

The stack:

  • Next.js 14 (App Router) + TypeScript + Tailwind CSS
  • jsPDF to generate the invoice PDF in the browser
  • pdfjs-dist to read text out of attached PDF contracts, also in the browser
  • Inter font bundled locally, so nothing is fetched from a CDN
  • Resend for the optional "Send via Email" feature

The flow:

  1. Input. Paste the chat or hit "Paste Clipboard". An optional "Advanced & Attachments" section lets you add notes that override the chat (like "Net 15, apply 10% holiday discount"), plus PDF/TXT files and images. Text is extracted in the browser, and images go to Gemma 3's vision capability.
  2. Review. Missing required fields appear under Action Needed, and found ones are shown as editable fields. Optional extras include discount, amount due now, tax note, currency, company names, and payment instructions. The invoice ID (like INV-2026-OCT-13-JD2N) and issue date are auto-generated, and "Due Now" defaults to amount minus discount.
  3. Ready. Preview the invoice, download the PDF, or send it to the client with an editable message.

I intentionally put a human checkpoint in the middle. The AI proposes, and you approve. A small local model will occasionally misread a message, and an invoice is a document with money on it, so the review step is a feature rather than a limitation. Missing details get flagged and asked for instead of invented.

Running it yourself takes a minute. Pull a model with Ollama, then create .env.local:

OLLAMA_AI_MODEL=gemma3:latest
OLLAMA_HOST=http://127.0.0.1:11434

# Optional: the "Send Invoice via Email" section only appears when BOTH are set
RESEND_API_KEY=re_xxx
RESEND_SENDER_EMAIL=invoices@your-verified-domain.com
Enter fullscreen mode Exit fullscreen mode

RESEND_SENDER_EMAIL must be on a domain verified in your Resend account. Skip these two lines and the app simply hides the email section, so everything else works fully offline.

Why Does Open Innovation Matter?

Client chats are some of the most sensitive text a freelancer owns. They contain real names, email addresses, rates, project details, and sometimes things covered by an NDA. Pasting that into a closed cloud API just to get a PDF is a bad trade.

Open-weight models changed the deal:

  • Privacy by architecture. The chat is processed by Gemma on your own machine. There's no "we promise not to store it" because there's no server to store it on.
  • Costs nothing to run. No tokens, no subscription, no usage cap. A tool for a side hustle shouldn't eat into the side hustle's income.
  • Works offline. Text extraction, AI, and PDF generation all happen locally. Only the optional email step needs internet.
  • No lock-in. The model is one environment variable (OLLAMA_AI_MODEL). If a better open model shows up next month, swapping it in is a one-line change, with no pricing changes or deprecations to worry about.

A closed API could do the extraction, but it couldn't make the promise that matters most to the person using this tool: your client's conversation never left your laptop.

My First User

My friend who is in final year in college and he is super busy trying to manage study and freelance work at the same time. So this will save him a few hours monthly.

Prize Categories

  • Best Use of Gemma: Gemma 3 runs locally via Ollama and handles both text extraction and image understanding for receipts and mockups.

Top comments (0)