Bolt.new Tutorial5 min setupNo-code friendly

Add National ID OCR to Your Bolt.new App in 5 Minutes

Bolt.new scaffolds your full-stack UI. StructOCR reads the identity cards. Here's the exact prompt and API call to wire them together for instant KYC — right in your browser.

Diagram showing a National ID card photo uploaded in a Bolt.new app, sent to the StructOCR API, and returned as structured JSON containing the parsed name, DOB, and MRZ data.
Upload → parse → display: the full flow takes a single API call.

Why Bolt.new + StructOCR is a natural fit for Identity Verification

Bolt.new generates and runs full-stack web applications directly in your browser. It handles the UI, components, and package management automatically — but securely extracting names, birth dates, and MRZ codes from a laminated ID card photo is something you have to wire up yourself. StructOCR fills exactly that gap: one API call, structured JSON back. Tell Bolt what you want, paste in the fetch code below, and your onboarding flow is ready.

The problem: Standard AI hallucinates PII and fails on holograms

Tools like Bolt.new are remarkable at generating apps instantly — but they stop at the file boundary. You can build a beautiful KYC upload interface in minutes, yet the actual extraction of names, document numbers, and MRZ lines from a laminated ID card requires a dedicated National ID OCR API. Standard vision models routinely misread security fonts, hallucinate personal data, or fail entirely on holographic overlays and glare.

The solution: Global ID parsing, instantly

StructOCR's /v1/national-id endpoint accepts a photo and returns a clean JSON object with the validated identity fields. It automatically decodes Machine Readable Zones (MRZ) and handles complex, localized ID layouts. 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. Create a Bolt.new project and describe your app

    Open bolt.new and start a new prompt. Describe the identity verification tool you want to build — be specific about the fields you need.

    Try this prompt: "Build a mobile-friendly KYC onboarding app. Users can upload a photo of their National ID card, and the app will display the extracted full name, document number, date of birth, and address."
  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/national-id 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/national-id', { method: 'POST', headers: { Authorization: `Bearer ${import.meta.env.VITE_STRUCTOCR_KEY}` }, body: formData, });
  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

  • Fintech onboarding (KYC): Let users snap a photo of their ID to instantly populate sign-up forms without manual typing, drastically reducing drop-off rates in financial onboarding flows.
  • Gig economy driver signup: Build a mobile portal where contractors upload their ID cards for instant identity verification, a crucial step for mobility and delivery apps.
  • Age verification gates: Create a tool that scans a user's ID, calculates their age based on the extracted `date_of_birth`, and conditionally grants access to age-restricted goods or services.
  • Visitor management systems: Add an upload step to a corporate check-in flow: extract visitor details automatically from their national ID to print temporary badges in seconds.

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 National ID OCR to this app.

When a user uploads an image:
1. Send it as multipart/form-data to: POST https://api.structocr.com/v1/national-id
2. Include the header: Authorization: Bearer ${VITE_STRUCTOCR_KEY}
3. The response is JSON with fields: data.surname, data.given_names, data.document_number, data.date_of_birth, data.address
4. Display the extracted identity 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 both primary identity fields and specialized MRZ strings. Your Bolt.new app can bind this directly to the UI components.

{
  "success": true,
  "data": {
    "type": "national_id",
    "country_code": "ROU",
    "nationality": "ROMANA",
    "document_number": "123456",
    "card_series": "KS",
    "personal_number": "1920319123456",
    "surname": "POPESCU",
    "given_names": "ANDREI",
    "sex": "M",
    "date_of_birth": "1992-03-19",
    "place_of_birth": "Jud. CS Mun. Reșița",
    "address": "Jud. CS Orș. Bocșa Str. Nucilor Nr. 15",
    "date_of_issue": "2020-05-10",
    "date_of_expiry": "2030-05-10",
    "issuing_authority": "SPCLEP Bocșa",
    "additional_fields": {
      "phone_number": null,
      "tramite_number": null,
      "ejemplar": null,
      "mrz_line_1": "IDROU123456<0<<<<<<<<<<<<<<<<",
      "mrz_line_2": "9203195M3005108ROU19203191234562",
      "mrz_line_3": null
    }
  }
}

Technical Specs

  • Formats accepted: PNG, JPG, WEBP — optimized for smartphone and webcam photos
  • Response time: typically 1–2 seconds per ID
  • Condition handling: robust against lamination glare, holographic overlays, and poor lighting
  • Data Privacy: Zero data retention architecture; images are processed in memory and immediately discarded
  • Global coverage: supports 150+ countries and thousands of localized card templates

Key Features

  • MRZ Decoding: automatically extracts and validates data from the Machine Readable Zone (MRZ) if present
  • Format validation: automatically verifies document numbers and personal identity numbers against regional checksum rules
  • Multi-angle support: reads IDs held at skewed angles or taken in busy backgrounds
  • Cross-referencing: compares the visual inspection zone (VIZ) against the MRZ for fraud detection

Live Demo: ID card scanner

No registration required. Upload a file to test the extraction.

1
Upload
2
Results

Drop files here or click to browse

JPG · PNG · WebP  ·  up to 500 files · max 4.5 MB each

No files selected

Frequently Asked Questions

Does StructOCR work inside a Bolt.new app?

Yes. StructOCR is a standard REST API that accepts a file and returns JSON — Bolt.new can call it directly from a client-side fetch in its in-browser WebContainer environment.

Where should I store the API key in Bolt.new?

For testing within Bolt, you can create a `.env` file in the browser's file explorer and add `VITE_STRUCTOCR_KEY`. For production KYC applications handling PII, we strongly recommend proxying the request through a secure backend to keep your API key private.

Does StructOCR store the ID photos?

No. StructOCR operates on a strict zero-data-retention policy. Images are processed in memory to extract the JSON data and are instantly discarded, ensuring GDPR and SOC2 compliance.

Can it read IDs with holograms and heavy glare?

Yes. Our models are specifically trained to read through lamination glare, security holograms, and poor webcam lighting conditions common in end-user onboarding flows.

How can I test the accuracy before building?

You can verify the model live using our free ID card scanner tool.

Is there a free tier to test with?

Yes. StructOCR's free plan includes 10 scans per month with no credit card required. Check out our pricing page for full details.

More Tutorials

Precise Data Extraction and Seamless Integration with AI-powered OCR API.

Empower your solutions with automated data extraction by integrating best-in class StructOCR via API seamlessly.

No credit card required • Full API access included