Add Passport OCR to Your Bolt.new App in 5 Minutes

The problem: Glossy pages and complex MRZ strings

Tools like Bolt.new are remarkable at generating apps instantly — 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, Bolt.new can wire it up from a single fetch call without heavy backend dependencies.

Integrate StructOCR in Bolt.new (3 Steps)

1. 1

   Create a Bolt.new project and describe your app

   Open bolt.new and start a new prompt. 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 Bolt to call the StructOCR API

   Once Bolt scaffolds the UI, ask it to create a server-side API route that forwards Base64 image data to StructOCR. The browser calls your route, while the StructOCR key remains private on the server.

   💬Follow-up prompt: "Create a server-side /api/passport-ocr route. It must accept a Base64 img string, POST JSON to https://api.structocr.com/v1/passport, and authenticate with the x-api-key header using process.env.STRUCTOCR_KEY. Never expose the key to browser code."

   // Run this only in a server-side route const response = await fetch('https://api.structocr.com/v1/passport', { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-api-key': process.env.STRUCTOCR_KEY, }, body: JSON.stringify({ img: base64Image }), });
3. 3

   Add your StructOCR API key as a server secret

   Add the key to the server-side environment used by your Bolt backend or deployed API route. Do not use a VITE_-prefixed variable because Vite exposes those values to browser code.

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

   STRUCTOCR_KEY=sk_live_xxxxxxxxxxxxxxxx

What you can build in Bolt.new 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 follow-up prompt into your Bolt.new chat to generate the integration. The code block shows what Bolt typically produces — useful if you want to verify or tweak 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 app securely.

1. Create a server-side POST route at /api/passport-ocr.
2. The browser should convert the selected image to Base64 and send only { img } to this route.
3. The server route must POST application/json to https://api.structocr.com/v1/passport with body { img }.
4. Authenticate upstream with the x-api-key header using process.env.STRUCTOCR_KEY. Never expose this key in client code or a VITE_-prefixed variable.
5. Return the StructOCR JSON response to the browser and display data.passport_number, data.surname, data.given_names, data.nationality, and data.date_of_expiry.
6. Add loading, file-size, upstream error, and invalid-response handling.

What the API returns

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

{
  "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"
  }
}