Executive Summary
A highly optimized client-side AI operational tool that acts as an internal agent, generating structured, highly professional PDF documents in seconds.
The Problem
Manual document creation was a massive bottleneck for operational teams. Formatting inconsistencies, human error, and time-consuming manual data entry reduced overall productivity and significantly increased client response times.
User Pain Points
- Wasting 2+ hours manually formatting documents in Microsoft Word.
- Inconsistent professional language across different team members.
- Difficulty in retrieving context from past successful documents.
- High latency when relying on external servers for PDF rendering.
Research & Discovery
Conducted workflow audits with 5 operational managers. Discovered that 70% of document creation time was spent on formatting rather than content generation. This led to the decision to strictly enforce PDF rendering on the client side using predefined corporate templates.
The Solution
Engineered a seamless, AI-native internal tool that ingests minimal user input, leverages the Gemini API for robust text expansion, and formats the output into production-ready PDFs instantly entirely on the client side.
System Architecture
User Input (React UI)
│
▼
Zustand Global State ──► Local Storage Cache
│
▼
Gemini 2.5 Flash API (Streaming)
│
▼
Structured JSON Parsing
│
▼
jsPDF Client-Side Engine
│
▼
Professional PDF OutputDatabase Design
As an aggressively client-side application, persistent database models were omitted in favor of robust LocalStorage state hydration via Zustand persistence, ensuring zero latency and maximum privacy for sensitive inputs.
API Flow
1. User submits partial data -> 2. React triggers asynchronous fetch to Next.js Edge API -> 3. Edge API securely authenticates with Google Gemini API -> 4. Streamed markdown response returns to client -> 5. Client parses and updates Zustand state.
Tech Stack & Tooling
Implementation Challenges
Managing complex nested state for multi-section documents and handling the asynchronous streaming of AI responses without degrading the React rendering thread performance.
Trade-offs
Chose client-side PDF generation (jsPDF) over server-side (Puppeteer). Trade-off: slightly higher initial bundle size, but achieved zero-cost, zero-latency document generation at scale.
Results & Impact
Enabled non-technical operational and client success teams to easily generate what they needed with zero friction, eliminating the manual drafting phase and saving an estimated 15 hours per employee per week.
What I Learned
Client-side processing coupled with robust global state management eliminates backend rendering overhead and significantly improves perceived application speed.