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, paste the follow-up prompt below. Bolt will write the fetch call, handle the file upload, and wire the response to your UI components in its in-browser editor.

   💬Follow-up prompt: "When a user uploads an image, send it as a multipart/form-data POST to https://api.structocr.com/v1/passport with an Authorization header containing my API key. Display the returned JSON fields in the results panel."

   // Bolt generates something like this — you just supply the key in .env const response = await fetch('https://api.structocr.com/v1/passport', { method: 'POST', headers: { Authorization: `Bearer ${import.meta.env.VITE_STRUCTOCR_KEY}` }, body: formData, });
3. 3

   Add your StructOCR API key to your environment

   In the Bolt.new file explorer, create or open the .env file to securely add your StructOCR key. The app will automatically reload with your live scanner.

   💬Variable name: VITE_STRUCTOCR_KEY — get your free key at structocr.com/dashboard

   VITE_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.

When a user uploads an image:
1. Send it as multipart/form-data to: POST https://api.structocr.com/v1/passport
2. Include the header: Authorization: Bearer ${VITE_STRUCTOCR_KEY}
3. The response is JSON with fields: data.passport_number, data.surname, data.given_names, data.nationality, data.date_of_expiry
4. Display the extracted passport data in a clear, formatted profile card
5. Show a loading spinner while the request is in flight
6. Show an error message if the upload fails

Use the environment variable VITE_STRUCTOCR_KEY for the API key.

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