Overview
You will learn how to build a web app that lets users chat with an assistant to collect invoice data, preview the invoice in real time, generate a PDF using an external API, and email it through Gmail.
User Flow:
User Input
Chat UI
Collect Details
Preview Invoice
Edit and Regenerate
Email it to the client or download as PDF
Technology Stack
Frontend
Tool | Purpose |
|---|---|
React | UI framework |
Vite | Dev server and bundler |
Tailwind | Styling system |
Shadcn UI | Components (dialog, input, cards) |
Framer Motion | Animations |
Lucide React | Icons |
Sonner | Toasts and alerts |
Backend
Tool | Purpose |
|---|---|
FastAPI | Backend framework |
Motor | MongoDB driver |
Pydantic | Validation |
Requests | External API calls |
Database
Tool | Purpose |
|---|---|
MongoDB | Store drafts |
APIs and Required Services
Invoice Generation API
Provided by Invoice-Generator.com.
Feature | Details |
|---|---|
Format | PDF or UBL |
Pricing | Free up to 100 invoices per month |
Output | Professional invoice PDF |
Key Fields | Items, tax, discounts, shipping, notes, currency |
How to Get API Access
Create a free account
Copy your API key from the dashboard
Share it with Neo (Emergent's Agent) and it will add it to the backend.
Step | Action |
|---|---|
1 | |
2 | Create an account |
3 | Copy your API key from the dashboard |
4 | Add it to your backend |
Gmail API (for sending invoices)
You will integrate Gmail so users can email invoices directly.
How to Get API Access
Go to Google Cloud Console
Create a new project
Open API Library and enable Gmail API
Create OAuth credentials
Add redirect URIs for dev and production
Copy Client ID and Client Secret
Share it with Neo (Emergent's Agent) and it will add it to the backend.
Core Features
Feature | Description |
|---|---|
Conversational Input | AI-style chat that replaces traditional forms |
Quick Choice Chips | Fast selection for currency, date, items and tax |
Real Time Summary | Assistant prints totals, taxes and due amounts |
PDF Preview | Base64 embed or download |
Email Invoice | Gmail integration with OAuth |
Save Draft | Store invoice data per user |
Final Notes
You now have a clear plan for building a smart invoice app that uses:
A conversational UI
A professional PDF generator
Gmail email delivery
A modern React interface
Check out the polished version of the app we made right here: