Invox

Why I Built This

I used to create client invoices in Adobe Illustrator. Every single one took 30 to 40 minutes. Open a blank artboard, type the line items, calculate totals on my phone, align everything manually, export to PDF. The result still looked mediocre.

When I looked at existing tools, the landscape split into two categories: heavyweight SaaS platforms (FreshBooks, Wave, Zoho Invoice) that wanted subscriptions, onboarding flows, and dashboards before I could generate a single PDF, and simple template-based generators that had no intelligence and limited design quality.

I wanted something that didn't exist: upload my project contract, tell it my rate and hours, and get a polished invoice back in seconds. No account. No learning curve. So I built it.

What It Does

Invox combines a conversational AI agent with a full invoice editor. There are three distinct ways to create and edit invoices, and they all work together.

🔹AI Chat. You describe your invoice in natural language. "I redesigned a website for Acme Corp, 22 hours at $40/hour, net-30 terms." The AI agent parses this, calls the appropriate tools, and builds the invoice in real time via a streaming interface. Multi-turn conversations maintain context, so you can keep refining: "Add a 10% discount," "Change the design to minimal," "Change the due date to end of month."

🔹Document and Image Upload. Drop in a PDF contract, a project brief, a scope of work, or even a photo. The AI reads the document, extracts client details, line items, and terms, then pre-fills the invoice. You provide your rate and hours, and it handles the rest.

🔹Voice Input. Record a voice note describing your invoice instead of typing. The audio is transcribed and processed instantly.

Beyond AI, every field on the invoice is directly editable by clicking on it (inline editing), and a tabbed settings panel gives full manual control over branding, typography, financials, and layout.

Technical Architecture

• Frontend: Next.js 16 with TypeScript, Tailwind CSS v4, and Coss UI (Base UI + Tailwind). The invoice preview renders in real time as changes arrive from the AI or from manual edits.

• AI Agent: Built on the OpenAI Agents SDK (@openai/agents). The agent runs entirely server-side via a Next.js Route Handler. The client sends a message along with the current invoice state. The server responds with a Server-Sent Events (SSE) stream containing text deltas and invoice patches. The agent has access to multiple tools for updating invoice fields, and it selects the right ones based on the user's intent. Multi-turn context is maintained across messages within a session.

• Document Processing: Uploaded PDFs, images, and documents are parsed server-side. The extracted content is passed to the AI agent as context alongside the user's instructions, enabling the agent to map document details to invoice fields automatically.

• Voice Pipeline: Voice recordings are transcribed using OpenAI's transcription API, then fed into the same conversational agent pipeline as text input.

• PDF Export: Uses jsPDF combined with html-to-image for one-click export at print-ready resolution (816x1056px). Fonts, colors, layout, and signatures are preserved exactly as they appear on screen.

• Data Storage: All invoice data is stored in the browser's localStorage. No server-side database, no user accounts for core functionality. AI features require a free account to prevent abuse, and AI requests are processed through OpenAI, but no invoice data is persisted on any server.

Design and Templates

Invox ships with 12 professionally designed templates: Standard, Modern, Minimal, Classic, Elegant, Bold, Corporate, Creative, Startup, Receipt, Gradient, and Retro. Each template has its own header layout and supports full customization of colors, fonts, and spacing.

Users can upload a company logo, set brand colors, add payment terms and notes, and include a signature (either drawn freehand on a pressure-sensitive canvas or generated from their name).

The design system supports both hourly and flat-fee billing, tax and discount calculations with automatic totals, custom field labels, and configurable due dates.

Key Technical Decisions

Why OpenAI Agents SDK over LangChain or LangGraph? For a single-agent tool-calling workflow with SSE streaming, the Agents SDK provides a cleaner, lighter abstraction. There is no multi-agent orchestration needed here, so the overhead of a framework like LangGraph was unnecessary. The SDK's native tool-use pattern maps directly to invoice field updates.

Why free and open source? The invoicing market is dominated by established SaaS products. Competing commercially as a solo developer against those giants is not a viable strategy. Open-sourcing the tool maximizes its value as a portfolio piece and community contribution while eliminating the overhead of billing infrastructure, support, and customer acquisition.

Outcomes

• For users: A freelancer or small business owner can go from a blank page to a professional, exported PDF invoice in under 60 seconds. No onboarding, no subscription, no dashboard to learn.

• As a technical demonstration: Invox showcases a production implementation of the OpenAI Agents SDK with tool orchestration, SSE streaming, multi-modal input (text, voice, document), and a polished consumer-facing UI. It demonstrates the full loop from natural language intent to structured data output to rendered visual artifact.

• Open source: The full codebase is publicly available on GitHub.