How to Integrate Bolt.new with Dext (Receipt Bank)

Mindee is the recommended OCR API for receipt parsing in Bolt.new because it returns structured JSON with receipt-specific fields — no raw text post-processing required. Start by creating a free account at mindee.com. After verifying your email and logging in, navigate to the Dashboard and find the API Keys section. Create a new API key and copy it — you will use this in your Bolt project. Mindee's free tier includes 250 prediction API calls per month, which is sufficient for development and early-stage production. Paid plans start at $20/month for higher volumes. Mindee offers several pre-built document APIs. For receipts, use the Receipt API (`mindee/expense_receipts`). For supplier invoices with line items, use the Invoice API (`mindee/invoices`). Both are available on the free tier. Once you have your API key, you are ready to configure your Bolt project. Do not put the API key in any client-side component — it must stay in your .env file and be accessed only from an API route or Supabase edge function.

1# .env file in your Bolt project root
2VITE_MINDEE_API_KEY=your_mindee_api_key_here
3VITE_SUPABASE_URL=your_supabase_url
4VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

With your API key ready, prompt Bolt to generate the receipt upload UI and API route. Bolt will create a React component with a file input that accepts image files, a preview of the selected image, and a submit button. The component calls an API route (Next.js) or a Vite proxy endpoint that forwards the image to Mindee and returns the parsed fields. For Next.js projects, Bolt generates an API route at `app/api/receipts/parse/route.ts` that receives the uploaded file as FormData, converts it to base64, and sends it to Mindee's API using `fetch()` with your API key from `process.env.MINDEE_API_KEY`. For Vite projects, the approach uses a Supabase edge function to handle the server-side Mindee call since Vite projects don't have built-in API routes. After the API route returns the parsed receipt data, the component renders a review form with pre-filled fields — merchant name, total amount, date, currency — that the user can correct before saving. This human-in-the-loop review step is important because OCR is not 100% accurate, especially on crumpled or poorly-lit receipts. Always allow users to edit extracted values before saving to the database.

1// app/api/receipts/parse/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const MINDEE_API_KEY = process.env.MINDEE_API_KEY;
5const MINDEE_RECEIPT_URL = 'https://api.mindee.net/v1/products/mindee/expense_receipts/v5/predict';
6
7export async function POST(request: NextRequest) {
8  if (!MINDEE_API_KEY) {
9    return NextResponse.json({ error: 'Mindee API key not configured' }, { status: 500 });
10  }
11
12  const formData = await request.formData();
13  const file = formData.get('file') as File;
14
15  if (!file) {
16    return NextResponse.json({ error: 'No file provided' }, { status: 400 });
17  }
18
19  // Forward to Mindee API
20  const mindeeForm = new FormData();
21  mindeeForm.append('document', file);
22
23  const response = await fetch(MINDEE_RECEIPT_URL, {
24    method: 'POST',
25    headers: {
26      'Authorization': `Token ${MINDEE_API_KEY}`,
27    },
28    body: mindeeForm,
29  });
30
31  if (!response.ok) {
32    const error = await response.text();
33    return NextResponse.json({ error: `Mindee error: ${error}` }, { status: response.status });
34  }
35
36  const data = await response.json();
37  const prediction = data.document.inference.prediction;
38
39  return NextResponse.json({
40    merchant: prediction.supplier_name?.value ?? '',
41    amount: prediction.total_amount?.value ?? 0,
42    currency: prediction.locale?.currency ?? 'USD',
43    date: prediction.date?.value ?? '',
44    tax: prediction.total_tax?.value ?? 0,
45    confidence: prediction.total_amount?.confidence ?? 0,
46  });
47}

Once Mindee returns parsed receipt data and the user reviews it, the next step is persisting the expense record to Supabase. Prompt Bolt to create a Supabase migration that defines the `expenses` table with appropriate columns. The table should store the user's ID (for multi-user apps), the extracted fields from Mindee, the original receipt image URL, and a status field for approval workflows. For storing the receipt image itself, Supabase Storage is the right choice — it provides file uploads with public or private bucket access, URL generation, and integration with Row Level Security. Prompt Bolt to also set up a Supabase Storage bucket called `receipts` with private access. The upload flow is: user selects file → upload to Supabase Storage → get back the storage path → send path to Mindee API route for OCR → save extracted data plus storage path to the expenses table. Make sure to enable Row Level Security (RLS) on the expenses table so users can only access their own expense records. A basic RLS policy should allow users to read, insert, and update only rows where `user_id` matches their authenticated user ID. Without RLS, any authenticated user could read all expense records in the table.

1// lib/saveExpense.ts
2import { createClient } from '@supabase/supabase-js';
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
7);
8
9export interface ExpenseData {
10  merchant: string;
11  amount: number;
12  currency: string;
13  date: string;
14  tax: number;
15  receiptFile?: File;
16}
17
18export async function saveExpense(data: ExpenseData, userId: string) {
19  let receiptUrl = '';
20
21  // Upload receipt image to Supabase Storage
22  if (data.receiptFile) {
23    const fileExt = data.receiptFile.name.split('.').pop();
24    const fileName = `${userId}/${Date.now()}.${fileExt}`;
25
26    const { error: uploadError } = await supabase.storage
27      .from('receipts')
28      .upload(fileName, data.receiptFile);
29
30    if (!uploadError) {
31      const { data: urlData } = supabase.storage
32        .from('receipts')
33        .getPublicUrl(fileName);
34      receiptUrl = urlData.publicUrl;
35    }
36  }
37
38  // Save expense record to database
39  const { error } = await supabase.from('expenses').insert({
40    user_id: userId,
41    merchant: data.merchant,
42    amount: data.amount,
43    currency: data.currency,
44    date: data.date || null,
45    tax: data.tax,
46    receipt_url: receiptUrl,
47    status: 'pending',
48  });
49
50  if (error) throw new Error(`Failed to save expense: ${error.message}`);
51  return { success: true, receiptUrl };
52}

During development in Bolt's WebContainer, outbound API calls to Mindee work correctly — the WebContainer can make HTTP requests to external services. This means you can test the receipt OCR flow in the preview without deploying. Upload a test receipt image (a clear photo of any receipt works), and the API route should call Mindee and return parsed fields within 2-3 seconds. Bolt's WebContainer does support file uploads in the browser preview — the browser's native file API and FormData work as expected. Supabase Storage uploads also work in the preview because they use HTTP. What does NOT work in the preview is receiving incoming webhooks from Mindee (Mindee doesn't have webhooks in any case for the standard API, so this isn't a concern here). For debugging, open browser DevTools (F12) while in the Bolt preview and check the Network tab to see the API route request and Mindee's response. If the API route returns an error, check the Console tab for error details. Common issues include forgetting to add the `MINDEE_API_KEY` to the .env file (the API route will return a 500 error with 'Mindee API key not configured'), sending the wrong file format (Mindee supports JPEG, PNG, PDF, and TIFF), or exceeding the 10MB file size limit. Test with a real receipt photograph rather than a screenshot — Mindee's OCR is trained on physical receipt images and performs better with photos that show the full receipt clearly. Ensure good lighting and minimal blur in test images for realistic accuracy results.

1// components/ReceiptUpload.tsx (excerpt)
2'use client';
3import { useState } from 'react';
4
5export function ReceiptUpload() {
6  const [file, setFile] = useState<File | null>(null);
7  const [preview, setPreview] = useState<string>('');
8  const [extractedData, setExtractedData] = useState<any>(null);
9  const [loading, setLoading] = useState(false);
10  const [error, setError] = useState('');
11
12  async function handleParse() {
13    if (!file) return;
14    setLoading(true);
15    setError('');
16
17    const formData = new FormData();
18    formData.append('file', file);
19
20    try {
21      const response = await fetch('/api/receipts/parse', {
22        method: 'POST',
23        body: formData,
24      });
25
26      if (!response.ok) {
27        const err = await response.json();
28        throw new Error(err.error || 'Parse failed');
29      }
30
31      const data = await response.json();
32      setExtractedData(data);
33    } catch (err: any) {
34      setError(err.message);
35    } finally {
36      setLoading(false);
37    }
38  }
39
40  return (
41    <div className="max-w-md mx-auto p-6 space-y-4">
42      <input
43        type="file"
44        accept="image/jpeg,image/png,application/pdf"
45        onChange={(e) => {
46          const f = e.target.files?.[0];
47          if (f) {
48            setFile(f);
49            setPreview(URL.createObjectURL(f));
50          }
51        }}
52        className="block w-full text-sm"
53      />
54      {preview && <img src={preview} alt="Receipt" className="max-h-48 object-contain rounded" />}
55      {error && <p className="text-red-500 text-sm">{error}</p>}
56      <button
57        onClick={handleParse}
58        disabled={!file || loading}
59        className="w-full bg-blue-600 text-white py-2 rounded disabled:opacity-50"
60      >
61        {loading ? 'Parsing...' : 'Parse Receipt'}
62      </button>
63      {extractedData && (
64        <div className="bg-gray-50 rounded p-4 space-y-2">
65          <p><strong>Merchant:</strong> {extractedData.merchant}</p>
66          <p><strong>Amount:</strong> {extractedData.currency} {extractedData.amount}</p>
67          <p><strong>Date:</strong> {extractedData.date}</p>
68          <p><strong>Tax:</strong> {extractedData.tax}</p>
69          <p className="text-xs text-gray-400">Confidence: {(extractedData.confidence * 100).toFixed(0)}%</p>
70        </div>
71      )}
72    </div>
73  );
74}

When you are ready to move from Bolt's preview to production, deploy your app to Netlify or Bolt Cloud. The deployment process is straightforward: click the Publish button in Bolt's top navigation for Bolt Cloud deployment, or connect to Netlify via Settings → Applications → Netlify. Both options handle the build process automatically. After deploying, you need to set production environment variables. In Netlify, go to Site Configuration → Environment Variables and add `MINDEE_API_KEY` with your Mindee API key value. Also add `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` if they are not already configured. In Bolt Cloud, these are managed through the Secrets panel in project settings. For production receipt storage, review your Supabase Storage bucket configuration. The receipts bucket should use Row Level Security to ensure users can only access their own receipt images. Also consider setting a maximum file size limit in Supabase Storage (10MB is reasonable for receipt photos). Test the full flow on your deployed URL — upload a receipt, verify OCR extracts the data correctly, save the expense, and confirm it appears in your Supabase database. Because Bolt's WebContainer cannot receive incoming connections, all testing of production-grade file persistence and database writes should be validated on the deployed URL rather than relying solely on preview testing.