Add Passport OCR to Your Lovable.dev App in 5 Minutes

The problem: Glossy pages and complex MRZ strings

Tools like Lovable.dev are remarkable at generating apps — but they stop at the file boundary. You can build a beautiful booking interface in minutes, yet the actual extraction of Machine Readable Zones (MRZ) and visual data from a highly reflective passport page requires a dedicated Passport OCR API. Standard vision models routinely fail on holograms, misread country codes, or output unformatted text blocks.

The solution: ICAO-compliant parsing, instantly

StructOCR's /v1/passport endpoint accepts a photo and returns a clean JSON object with the validated travel document fields. It automatically decodes the MRZ lines to cross-check the Visual Inspection Zone (VIZ), ensuring 100% accuracy on passport numbers and dates. Because it speaks plain HTTP, Lovable can wire it up from a single fetch call.

Integrate StructOCR in Lovable (3 Steps)

1. 1

   Create a Lovable project and describe your app

   Open lovable.dev and start a new project. In the chat box, describe the travel or KYC tool you want to build — be specific about the fields you need.

   💬Try this prompt: "Build a mobile-friendly hotel check-in app. Users can upload a photo of their passport data page, and the app will display the extracted full name, passport number, nationality, and expiry date."
2. 2

   Tell Lovable to call the StructOCR API

   Once Lovable scaffolds the UI, ask it to create a server-side Edge Function that forwards Base64 image data to StructOCR. The browser calls the function without receiving the StructOCR key.

   💬Follow-up prompt: "Create a server-side Edge Function for Passport OCR. It must accept a Base64 img string, POST JSON to https://api.structocr.com/v1/passport, and use the x-api-key header with the private STRUCTOCR_KEY secret."

   // Run inside a server-side Edge Function const response = await fetch('https://api.structocr.com/v1/passport', { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-api-key': Deno.env.get('STRUCTOCR_KEY')!, }, body: JSON.stringify({ img: base64Image }), });
3. 3

   Add your StructOCR API key as an Edge Function secret

   Add the key to the secret storage used by your server-side Edge Function. Do not create a VITE_-prefixed variable, because it can be included in browser code.

   💬Private secret name: STRUCTOCR_KEY — get your free key at structocr.com/dashboard

   STRUCTOCR_KEY=sk_live_xxxxxxxxxxxxxxxx

What you can build in Lovable with this integration

• Hotel & hospitality check-in: Let international guests snap a photo of their passport to instantly populate registration cards, speeding up front-desk operations. A perfect fit for travel automation.
• Airline booking portals: Build a mobile portal where passengers upload their passports during online check-in to automatically capture API (Advance Passenger Information) data.
• Global KYC onboarding: Create a secure onboarding flow for fintech apps that accepts passports from 150+ countries, extracting structured names and birth dates instantly.
• Visa application assistants: Add an upload step to a travel agency portal: extract passport details automatically to pre-fill complex international visa application forms.

The prompt and the code

Copy the Lovable prompt into your project chat to generate the integration. The JavaScript tab shows what Lovable produces — useful if you want to verify or customize it.

Prerequisite: A free StructOCR account — get your API key at structocr.com/dashboard (no credit card required)

I need to add Passport OCR to this Lovable app securely.

1. Create a server-side Edge Function named passport-ocr.
2. The browser converts the selected image to Base64 and invokes the function with { img }.
3. The Edge Function must POST application/json to https://api.structocr.com/v1/passport with body { img }.
4. Authenticate upstream with the x-api-key header using the private STRUCTOCR_KEY secret. Never use a VITE_-prefixed variable for this key.
5. Return the JSON response and display data.passport_number, data.surname, data.given_names, data.nationality, and data.date_of_expiry.
6. Add file-size, loading, upstream error, and invalid-response handling.

What the API returns

A comprehensive JSON object containing the parsed passport fields. Your Lovable app can bind this directly to the UI.

{
  "success": true,
  "data": {
    "type": "passport",
    "country_code": "USA",
    "nationality": "UNITED STATES",
    "passport_number": "E12345678",
    "surname": "DOE",
    "given_names": "JOHN",
    "sex": "M",
    "date_of_birth": "1990-01-01",
    "place_of_birth": "NEW YORK, USA",
    "date_of_issue": "2020-01-01",
    "date_of_expiry": "2030-01-01",
    "place_of_issue": "PASSPORT AGENCY"
  }
}