Invoice Processing - BookWyrm AI MVP

A Next.js application that demonstrates BookWyrm AI document processing capabilities. Upload invoice PDFs, extract structured data, review and edit the results, and submit to finance systems.

Features

• PDF Upload: Drag-and-drop or click to upload invoice PDF files
• AI Processing: Extract structured invoice data using BookWyrm AI
• Real-time Progress: Monitor processing status with Server-Sent Events (SSE)
• Editable Results: Review and edit extracted invoice data
• Finance System Integration: Submit processed invoices (mock implementation)

Tech Stack

• Next.js 16 with App Router
• TypeScript for type safety
• Tailwind CSS for styling
• React Hot Toast for notifications
• BookWyrm AI API for document processing

Setup

Prerequisites

• Node.js 18+ and npm
• BookWyrm AI API token
• Python 3.12+ and uv (for the PDF Structured Output Server)
• BookWyrm Product Enrichment server running (default: http://localhost:8000)

Setting Up the PDF Structured Output Server

This application requires the PDF Structured Output Server to be running. Follow these steps to set it up:

1. Clone the repository:

   git clone https://github.com/scidonia/pdf-structured-output-server.git
   cd pdf-structured-output-server

2. Install dependencies:

   uv sync

3. Start the server:

   uv run pdf-server serve --host 0.0.0.0 --port 8000

   Alternatively, activate the virtual environment first:

   source .venv/bin/activate
   pdf-server serve --host 0.0.0.0 --port 8000

4. Verify the server is running:

   curl http://localhost:8000/health

The server should now be running on http://localhost:8000 and ready to process PDF files.

Installation

1. Clone the repository and install dependencies:

npm install

2. Create a .env.local file in the root directory:

Obtain an API token from BookWyrm.ai

# BookWyrm AI API Token
BOOKWYRM_API_TOKEN=your_token_here

# Optional: API URL (defaults to http://localhost:8000)
# NEXT_PUBLIC_API_URL=http://localhost:8000

3. Start the development server:

npm run dev

4. Open http://localhost:3000 in your browser

Usage

1. Upload Invoice: Click or drag-and-drop an invoice PDF file
2. Process: Click "Process Invoice" to send the file to BookWyrm AI
3. Review Progress: Monitor the real-time processing status
4. Edit Data: Review and edit the extracted invoice data
5. Submit: Click "Submit to Finance System" to complete (mock submission)

Project Structure

/app
  /api
    /process/route.ts      # API route to proxy requests to BookWyrm AI
  /components
    FileUpload.tsx         # PDF upload component
    ProcessingStatus.tsx   # SSE status display
    InvoiceEditor.tsx      # Editable invoice form
    SubmitButton.tsx       # Finance system submission
  page.tsx                 # Main application page
  layout.tsx               # Root layout with Toaster
/lib
  api.ts                   # API client with SSE handling
  types.ts                 # TypeScript interfaces

Invoice Schema

The application uses a comprehensive JSON schema for invoice extraction:

• Invoice metadata (number, dates, vendor, customer)
• Line items (description, quantity, unit price, totals)
• Financial totals (subtotal, tax, total amount)
• Additional fields (currency, payment terms)

See lib/api.ts for the complete schema definition.

API Integration

The application uses a Next.js API route (/api/process) to securely proxy requests to the BookWyrm AI server:

• Keeps the API token secure (server-side only)
• Handles file uploads via FormData
• Streams Server-Sent Events (SSE) responses
• Parses status, progress, result, and error events

Environment Variables

Variable	Required	Description
BOOKWYRM_API_TOKEN	Yes	Your BookWyrm AI API token
NEXT_PUBLIC_API_URL	No	BookWyrm server URL (default: http://localhost:8000)

Development

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint

Notes

• This is an MVP demonstration app
• Finance system submission is mocked (console.log + success message)
• The API token is stored server-side for security
• File size limit: 10MB
• Only PDF files are accepted