AI-powered PDF form filler — designed for clarity, built for ADHD brains.
ClariForm lets you save your personal information once in your browser and auto-fill any PDF form in seconds. It uses spatial analysis and OpenAI's GPT-4o-mini to understand even the most cryptic form fields — and explains complex legal documents in plain English.
100% client-side. Your data never leaves your browser. No servers, no accounts, no tracking.
| Feature | Description |
|---|---|
| Smart Auto-Fill | Regex + AI-powered matching maps PDF fields to your saved profile — even for cryptic field names like f1_01 |
| Spatial Field Analysis | Extracts text labels physically near each form field to understand what it's actually asking for |
| AI Document Understanding | GPT-4o-mini summarizes the document, explains fields in plain language, and highlights important sections |
| Live PDF Preview | Split-panel view with real-time preview — see your values appear in the PDF as you type |
| Field Hover Highlight | Hover a field in the sidebar to see it glow on the PDF with auto-scroll |
| User-Editable Mappings | Disagree with the AI? Reassign any field to any profile key with a dropdown |
| Learn Once, Fill Forever | Unknown fields are saved as custom fields for future PDFs |
| ADHD-Friendly Design | Large targets, clear progress indicators, collapsible sections, encouraging language |
| Privacy-First | All data stored in localStorage. Only the PDF text (not your info) is sent to OpenAI when you enable AI |
- Node.js 18+
- An OpenAI API key (optional — needed only for AI features)
git clone https://github.com/YOUR_USERNAME/clariform.git
cd clariform
npm install
npm run devOpen http://localhost:5173 in your browser.
npm run build
npm run preview┌──────────────┐ ┌────────────────┐ ┌──────────────────┐
│ Upload PDF │ ──▸ │ Extract Fields │ ──▸ │ Spatial Analysis │
└──────────────┘ │ (pdf-lib) │ │ (pdfjs-dist) │
└────────────────┘ └────────┬─────────┘
│
┌──────────────────────────┘
▼
┌──────────────────────┐ ┌─────────────────┐
│ AI Field Mapping │ ──▸ │ Auto-Fill from │
│ (GPT-4o-mini) │ │ Saved Profile │
└──────────────────────┘ └────────┬────────┘
│
▼
┌─────────────────┐
│ Review & Edit │
│ (split panel) │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Download PDF │
└─────────────────┘
- Upload a PDF form (drag & drop or click to browse)
- Field extraction —
pdf-libreads all AcroForm fields;pdfjs-distextracts text positions and field coordinates - Spatial label analysis — for each field, the nearest text label is identified using positional heuristics (above, left, inside)
- AI mapping — field names, spatial labels, and surrounding text are sent to GPT-4o-mini, which returns a
profileKeyfor each field - Auto-fill — matched fields are populated from your saved profile
- Review — split-panel view: PDF on the left, editable fields on the right with live preview
- Download the filled PDF
clariform/
├── index.html # HTML entry point
├── vite.config.js # Vite + React + Tailwind CSS v4
├── package.json
├── ARCHITECTURE.md # Detailed technical documentation
├── public/
│ └── favicon.svg
└── src/
├── main.jsx # App entry — Router + ProfileProvider
├── App.jsx # Route definitions
├── index.css # Tailwind imports + CSS custom properties
├── context/
│ ├── profileCtx.js # React createContext
│ ├── ProfileContext.jsx # ProfileProvider (state + localStorage)
│ └── useProfile.js # useProfile() hook
├── components/
│ ├── Layout.jsx # App shell: nav, content, footer
│ ├── PdfViewer.jsx # Canvas PDF renderer with highlights
│ ├── AiSummaryPanel.jsx # AI analysis display
│ └── UnknownFieldsModal.jsx
├── pages/
│ ├── HomePage.jsx # Landing page
│ ├── FillPage.jsx # Core workflow (upload → review → download)
│ ├── ProfilePage.jsx # Editable user profile
│ ├── HistoryPage.jsx # Fill history log
│ └── SettingsPage.jsx # API key management
└── utils/
├── fieldMatcher.js # Regex-based field → profile key mapping
├── pdfEngine.js # pdf-lib: extract fields + fill PDFs
├── pdfTextExtractor.js # pdfjs-dist: text extraction + spatial labels
├── openaiService.js # OpenAI GPT-4o-mini integration
└── labels.js # Display labels + profile sections
| Layer | Technology | Purpose |
|---|---|---|
| Framework | React 19 | UI components and state management |
| Bundler | Vite 8 | Dev server + production builds |
| Styling | Tailwind CSS 4 | Utility-first styling |
| PDF Parsing | pdf-lib | AcroForm field extraction and filling |
| PDF Rendering | pdfjs-dist | Canvas rendering, text extraction, annotation positions |
| AI | OpenAI GPT-4o-mini | Document analysis, field mapping, plain-language explanations |
| Icons | lucide-react | Consistent icon set |
| Routing | react-router-dom 7 | Client-side SPA routing |
| Storage | localStorage | Profile, custom fields, history, API key |
- All personal data stays in your browser's
localStorage— never sent to any server - AI analysis sends only the PDF text content and field names to OpenAI — your profile values (name, SSN, address, etc.) are not sent
- OpenAI API key is stored locally and only used as an
Authorizationheader - No analytics, no cookies, no third-party tracking
See ARCHITECTURE.md for full data flow documentation.
| Setting | Location | Description |
|---|---|---|
| OpenAI API Key | Settings page (/settings) |
Required for AI features. Get one at platform.openai.com |
| Profile Data | My Info page (/profile) |
25+ fields: name, address, phone, SSN, employer, insurance, etc. |
Contributions are welcome! Please:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
Built with care for people with ADHD ♥