A powerful Val Town application that converts PDF invoices to beautiful HTML replicas using Claude 3.5 Haiku's advanced document analysis capabilities.

• PDF Upload & Processing: Drag-and-drop or browse to upload PDF invoices
• AI-Powered Extraction: Uses Claude 3.5 Haiku for accurate data extraction
• Configurable Fields: Choose which invoice fields to extract
• Multiple Output Formats: Generate HTML replicas or structured JSON
• Real-time Processing: Live status updates and error handling
• Cost Tracking: Token usage and cost estimation
• Mobile Responsive: Works on all devices
• Professional UI: Clean, modern interface built with React and Tailwind

• InvoiceFrom: Company/person who issued the invoice
• InvoiceTo: Company/person who received the invoice
• PaidBy: Who made the payment
• PaidTo: Who received the payment
• Amount: Total amount (numeric value)
• Currency: Currency code (USD, EUR, INR, etc.)
• InvoiceDate: Date invoice was issued
• PaidDate: Date payment was made
• LineItems: Array of line item descriptions

Set up your environment variables in Val Town:

ANTHROPIC_API_KEY=your_claude_api_key_here

• Input tokens: ₹67 per million tokens
• Output tokens: ₹336 per million tokens

• Small invoice (1-2 pages): ₹1-3 per processing
• Medium invoice (3-5 pages): ₹3-8 per processing
• Large invoice (6+ pages): ₹8-15 per processing

Main web interface for PDF upload and processing

Process PDF file and extract invoice data

Request:

• pdf: PDF file (multipart/form-data)
• fields: JSON array of fields to extract
• format: "html" or "json"

Health check endpoint

Get available fields and configuration

1. Open your Val Town URL
2. Drag and drop a PDF invoice
3. Select fields to extract
4. Choose output format (HTML/JSON)
5. Click "Extract Data"
6. Download results

const formData = new FormData();
formData.append('pdf', pdfFile);
formData.append('fields', JSON.stringify(['InvoiceFrom', 'Amount', 'Currency']));
formData.append('format', 'html');

const response = await fetch('/api/process-pdf', {
  method: 'POST',
  body: formData
});

const result = await response.json();

• Backend: Hono framework for HTTP handling
• AI Processing: Claude 3.5 Haiku via Anthropic API
• Frontend: React 18 with TypeScript
• Styling: Tailwind CSS + custom CSS
• File Handling: Base64 encoding for PDF processing

• File type validation (PDF only)
• File size limits (10MB max)
• Input sanitization
• Error boundary handling
• CORS protection

• File Size: Maximum 10MB per PDF
• File Type: PDF files only
• Language: Primarily optimized for English invoices
• Processing Time: 3-15 seconds depending on PDF complexity
• Rate Limits: Subject to Anthropic API limits

The application includes comprehensive error handling for:

• Invalid file types/sizes
• Network failures
• API errors
• Parsing failures
• Token limit exceeded

Track your usage with built-in monitoring:

• Processing time per request
• Token usage statistics
• Cost estimation
• Error rates
• Success/failure metrics

Built with ❤️ using Val Town, Claude 3.5 Haiku, and modern web technologies.