Add Passport OCR to Your v0 App in 5 Minutes

The problem: Glossy pages and complex MRZ strings

Tools like v0 are remarkable at generating UIs 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, v0 can wire it up from a single fetch call.

Integrate StructOCR in v0 (3 Steps)

1. 1

   Create a v0 project and describe your app

   Open v0.dev 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 UI using shadcn. 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 in a clean card."
2. 2

   Tell v0 to call the StructOCR API

   Once v0 scaffolds the UI, ask it to create a Next.js server route that forwards Base64 image data to StructOCR and returns the response to the React components.

   💬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."

   // Run this only in a Next.js server 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

   When you export the project or deploy to Vercel, add the StructOCR key to .env.local or Vercel Environment Variables as a server-only secret.

   💬Private variable name: STRUCTOCR_KEY — never prefix it with NEXT_PUBLIC_. Get your key at structocr.com/dashboard

   STRUCTOCR_KEY=sk_live_xxxxxxxxxxxxxxxx

What you can build in v0 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 v0 chat to generate the integration. The code block shows what v0 typically 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 v0/Next.js app securely.

1. Create a server-side POST route at /api/passport-ocr.
2. The browser converts the selected image to Base64 and sends { 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 through NEXT_PUBLIC_ or client-side code.
5. Return the StructOCR JSON response 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 v0 React components 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"
  }
}