How to Integrate Bolt.new with Azure Machine Learning

Before writing any code in Bolt, you need two values from your Azure ML managed online endpoint: the scoring URI and the primary API key. Log in to the Azure portal at portal.azure.com and navigate to your Machine Learning workspace. Inside the workspace, open Azure ML Studio by clicking 'Launch studio'. In the left navigation, click 'Endpoints' under the Assets section. Find your deployed online endpoint in the list and click on it. On the endpoint detail page, click the 'Consume' tab. Here you'll see the REST endpoint URL — the scoring URI, which looks like https://your-endpoint-name.eastus.inference.ml.azure.com/score — and the Primary key. Copy both values. The scoring URI is the URL your API route will POST to. The primary key goes in the Authorization header as 'Bearer YOUR_KEY'. Keep this page open — you'll also want to check the 'Test' tab to see example input and output payloads for your specific model. Understanding the expected payload format, including column names, data types, and whether the endpoint expects the standard input_data format or a custom schema, before prompting Bolt will make the generated code work correctly on the first attempt rather than requiring corrections.

In Bolt.new, environment variables are stored in a .env file in the project root. Open the file tree in your Bolt project by clicking the folder icon in the sidebar or using the Files panel, then open the .env file. If it does not exist yet, create it in the project root. Add two variables: AZURE_ML_SCORING_URI with your endpoint's scoring URI, and AZURE_ML_API_KEY with your primary key. In a Next.js project in Bolt, server-side environment variables used in API routes do not need a prefix — just AZURE_ML_SCORING_URI and AZURE_ML_API_KEY are correct. Never use a NEXT_PUBLIC_ prefix for these values, as that would expose them to the browser. Important Bolt.new caveat: the .env file is visible in the Bolt file tree and is NOT encrypted. It is suitable for development credentials but you must set environment variables in your hosting platform (Netlify or Vercel) separately before deploying, and you should never commit the .env file to a public GitHub repository. After saving the .env file, you may need to restart the Bolt dev server for the new variables to be picked up by the running Next.js instance.

1# .env (project root — do NOT commit to public repos)
2AZURE_ML_SCORING_URI=https://your-endpoint-name.eastus.inference.ml.azure.com/score
3AZURE_ML_API_KEY=your-primary-key-here

With credentials in place, use the Bolt chat to generate the API route and frontend components in a single prompt. Be specific about your model's input schema — list the exact column names and types your Azure ML endpoint expects. The more detail you provide about the input and output format, the more accurate the generated code will be. Bolt will create a Next.js API route at app/api/predict/route.ts that reads the scoring URI and API key from process.env, formats the request payload in the structure your Azure ML endpoint expects — usually { input_data: { columns: [...], data: [[...]] } } for tabular data — sends a POST request to the Azure ML scoring URI with the Authorization header, and returns the prediction result as JSON to the frontend. The API route acts as a proxy: the browser never sees your Azure ML credentials. The frontend component Bolt generates sends user input to /api/predict, receives the prediction, and displays the result. Because the Azure ML scoring URI is a standard HTTPS endpoint, the outbound call from the Bolt WebContainer works during development — you can see real predictions in the preview before deploying.

1// app/api/predict/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function POST(request: NextRequest) {
5  const scoringUri = process.env.AZURE_ML_SCORING_URI;
6  const apiKey = process.env.AZURE_ML_API_KEY;
7
8  if (!scoringUri || !apiKey) {
9    return NextResponse.json(
10      { error: 'Azure ML credentials not configured' },
11      { status: 500 }
12    );
13  }
14
15  const inputData = await request.json();
16
17  // Format payload for Azure ML tabular endpoint
18  const payload = {
19    input_data: {
20      columns: Object.keys(inputData),
21      data: [Object.values(inputData)],
22    },
23  };
24
25  const response = await fetch(scoringUri, {
26    method: 'POST',
27    headers: {
28      'Content-Type': 'application/json',
29      Authorization: `Bearer ${apiKey}`,
30    },
31    body: JSON.stringify(payload),
32  });
33
34  if (!response.ok) {
35    const errorText = await response.text();
36    console.error('Azure ML error:', response.status, errorText);
37    return NextResponse.json(
38      { error: `Azure ML endpoint returned ${response.status}` },
39      { status: response.status }
40    );
41  }
42
43  const result = await response.json();
44  return NextResponse.json({ prediction: result });
45}

For scenarios where users need to score many records at once — uploading a CSV of customers, properties, or transactions — Azure ML managed online endpoints support batch payloads containing multiple rows in a single request. The payload structure extends the same input_data format: the data array contains multiple sub-arrays, one per record. This is far more efficient than making one API call per record and avoids hitting Azure ML's per-minute rate limits. In Bolt, prompt the AI to add a CSV parsing step before the API call. The frontend reads the uploaded file using the browser's File API, parses it into an array of row objects, maps the values into the Azure ML batch payload format, and sends a single POST request to /api/predict. The API route formats all rows into one Azure ML payload and returns an array of predictions — one per input row. Important: Azure ML managed online endpoints have a default payload size limit of approximately 1.5MB and a request timeout of around 60 seconds. For truly large datasets, Azure ML batch endpoints are the better choice — they run asynchronously as jobs and are designed for bulk scoring. For real-time online endpoints, keep batch requests under a few hundred rows to stay within limits and maintain acceptable response times.

1// app/api/predict/route.ts — handles both single and batch predictions
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function POST(request: NextRequest) {
5  const scoringUri = process.env.AZURE_ML_SCORING_URI;
6  const apiKey = process.env.AZURE_ML_API_KEY;
7
8  if (!scoringUri || !apiKey) {
9    return NextResponse.json(
10      { error: 'Azure ML credentials not configured' },
11      { status: 500 }
12    );
13  }
14
15  const body = await request.json();
16
17  // Support both single prediction and batch
18  const isBatch = Array.isArray(body.rows);
19  const columns: string[] = body.columns ?? Object.keys(isBatch ? body.rows[0] : body);
20  const data: unknown[][] = isBatch
21    ? body.rows.map((row: Record<string, unknown>) => columns.map((col) => row[col]))
22    : [columns.map((col) => body[col])];
23
24  const payload = { input_data: { columns, data } };
25
26  const response = await fetch(scoringUri, {
27    method: 'POST',
28    headers: {
29      'Content-Type': 'application/json',
30      Authorization: `Bearer ${apiKey}`,
31    },
32    body: JSON.stringify(payload),
33  });
34
35  if (!response.ok) {
36    const errorText = await response.text();
37    return NextResponse.json(
38      { error: `Azure ML returned ${response.status}: ${errorText}` },
39      { status: response.status }
40    );
41  }
42
43  const result = await response.json();
44  // Azure ML returns an array for batch; normalize to array for consistent frontend handling
45  const predictions = Array.isArray(result) ? result : [result];
46  return NextResponse.json({ predictions });
47}

When you're ready to move from the Bolt preview to a public URL, deploy the app to Netlify or Vercel. The Azure ML integration works perfectly in the Bolt WebContainer preview for outbound API calls, but a deployed URL is required for sharing the app with users. In Netlify: click Deploy in Bolt or connect your GitHub repo in the Netlify dashboard, then go to Site Configuration → Environment Variables and add AZURE_ML_SCORING_URI and AZURE_ML_API_KEY with your actual values. Do not rely on the .env file for production — hosting platform environment variables are encrypted and injected at build and runtime, unlike the plain-text .env file visible in Bolt's file tree. In Vercel: go to your project Settings → Environment Variables, add both variables for the Production environment. After adding the variables, trigger a new deployment — the running functions on an existing deployment do not automatically pick up newly added environment variables. Test your deployed prediction form to confirm the API route calls the Azure ML endpoint correctly from the production serverless function. The Next.js API route that Bolt generated runs as a Netlify Function or Vercel Serverless Function — the Azure ML API key stays server-side and never appears in the browser network tab or page source. Keep in mind that Azure ML endpoints remain active and billed as long as you have compute allocated. If this app is for a demo or low-traffic use case, consider scaling the endpoint to zero instances when not in use via Azure ML Studio to avoid ongoing compute charges.

1// components/PredictionForm.tsx — with loading and error states for production
2'use client';
3import { useState } from 'react';
4
5interface PredictionResult {
6  predictions: number[];
7}
8
9export function PredictionForm() {
10  const [inputs, setInputs] = useState({
11    age: '',
12    annual_income: '',
13    credit_score: '',
14    loan_amount: '',
15  });
16  const [result, setResult] = useState<PredictionResult | null>(null);
17  const [loading, setLoading] = useState(false);
18  const [error, setError] = useState<string | null>(null);
19
20  async function handleSubmit(e: React.FormEvent) {
21    e.preventDefault();
22    setLoading(true);
23    setError(null);
24    setResult(null);
25
26    try {
27      const response = await fetch('/api/predict', {
28        method: 'POST',
29        headers: { 'Content-Type': 'application/json' },
30        body: JSON.stringify({
31          age: Number(inputs.age),
32          annual_income: Number(inputs.annual_income),
33          credit_score: Number(inputs.credit_score),
34          loan_amount: Number(inputs.loan_amount),
35        }),
36      });
37
38      if (!response.ok) {
39        const err = await response.json();
40        throw new Error(err.error ?? 'Prediction failed');
41      }
42
43      const data: PredictionResult = await response.json();
44      setResult(data);
45    } catch (err) {
46      setError(err instanceof Error ? err.message : 'An unexpected error occurred');
47    } finally {
48      setLoading(false);
49    }
50  }
51
52  return (
53    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
54      {(Object.keys(inputs) as Array<keyof typeof inputs>).map((key) => (
55        <div key={key}>
56          <label className="block text-sm font-medium capitalize">
57            {key.replace(/_/g, ' ')}
58          </label>
59          <input
60            type="number"
61            value={inputs[key]}
62            onChange={(e) => setInputs((prev) => ({ ...prev, [key]: e.target.value }))}
63            className="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
64            required
65          />
66        </div>
67      ))}
68      <button
69        type="submit"
70        disabled={loading}
71        className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 disabled:opacity-50"
72      >
73        {loading ? 'Getting prediction...' : 'Get Prediction'}
74      </button>
75      {error && <p className="text-red-600 text-sm mt-2">{error}</p>}
76      {result && (
77        <div className="p-4 bg-green-50 rounded border border-green-200 mt-4">
78          <p className="font-semibold">Prediction: {result.predictions[0]}</p>
79        </div>
80      )}
81    </form>
82  );
83}