How to Integrate Lovable with Azure Machine Learning

Azure Machine Learning managed online endpoints provide an authentication key directly — no service account JWTs or OAuth2 flows required. The endpoint URL and key are available in the Azure ML Studio interface. For an Azure ML Managed Online Endpoint: Open Azure ML Studio at ml.azure.com. Select your workspace. In the left navigation, click 'Endpoints'. Click your endpoint name. Click the 'Consume' tab. Copy the REST endpoint URL and one of the authentication keys (Primary key or Secondary key — both work, using Secondary for rotation is a best practice). For Azure Cognitive Services: Open Azure Portal at portal.azure.com. Navigate to your Cognitive Services resource (Computer Vision, Text Analytics, etc.). In the left menu, click 'Keys and Endpoint'. Copy 'Endpoint' (the base URL) and 'Key 1' (the API key). The endpoint URL format for Azure ML is: https://{endpoint-name}.{region}.inference.ml.azure.com/score For Cognitive Services: https://{resource-name}.cognitiveservices.azure.com/ In Lovable, click '+' next to Preview to open the Cloud panel, then click 'Secrets'. Click 'Add new secret'. Add: - AZURE_ML_ENDPOINT_URL — the scoring endpoint URL - AZURE_ML_API_KEY — the authentication key For Cognitive Services add service-specific secrets: - AZURE_TEXT_ANALYTICS_URL and AZURE_TEXT_ANALYTICS_KEY - AZURE_VISION_URL and AZURE_VISION_KEY Lovable's security blocks approximately 1,200 hardcoded keys daily — always use the Secrets panel. Azure API keys grant access to your Azure billing for all API calls, so treat them with the same care as financial credentials.

Azure ML managed online endpoints accept scoring requests as either: a raw JSON body matching the model's input schema (for simple models), or a wrapper with 'input_data' containing a 'columns' array and 'data' array (for AutoML models using the MLTable input format). Check your model's Consume tab in Azure ML Studio for the exact request format and a sample input. Authentication uses a Bearer token — the Authorization header value is 'Bearer {your_api_key}'. This is simpler than Google's service account OAuth2 flow but the same pattern works for all Azure ML endpoints regardless of model type. The response format also varies by model type. AutoML regression and classification models return a JSON array with predicted values. Custom models return whatever format the scoring script outputs. Check the endpoint's test panel in Azure ML Studio to understand the response shape before wiring up the Edge Function. Use the code below as a starting point and customize the request body format to match your model's input schema from the Consume tab.

1// supabase/functions/azure-ml-predict/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
9
10  try {
11    const inputData = await req.json();
12
13    const endpointUrl = Deno.env.get('AZURE_ML_ENDPOINT_URL')!;
14    const apiKey = Deno.env.get('AZURE_ML_API_KEY')!;
15
16    // Azure ML AutoML format — adjust to match your model's input schema
17    // Check the 'Consume' tab in Azure ML Studio for the exact format
18    const scoringPayload = {
19      input_data: {
20        columns: Object.keys(inputData.features),
21        data: [Object.values(inputData.features)],
22      },
23    };
24
25    const azureResponse = await fetch(endpointUrl, {
26      method: 'POST',
27      headers: {
28        'Authorization': `Bearer ${apiKey}`,
29        'Content-Type': 'application/json',
30        'Accept': 'application/json',
31      },
32      body: JSON.stringify(scoringPayload),
33    });
34
35    if (!azureResponse.ok) {
36      const errText = await azureResponse.text();
37      console.error(`Azure ML error ${azureResponse.status}:`, errText);
38      return new Response(JSON.stringify({ error: `Azure ML returned ${azureResponse.status}` }), {
39        status: azureResponse.status,
40        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
41      });
42    }
43
44    const result = await azureResponse.json();
45    return new Response(JSON.stringify({ result }), {
46      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
47    });
48  } catch (error) {
49    console.error('azure-ml-predict error:', error);
50    return new Response(JSON.stringify({ error: String(error) }), {
51      status: 500,
52      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
53    });
54  }
55});

Azure Cognitive Services use a slightly different authentication pattern from Azure ML endpoints: instead of a Bearer token, they use an Ocp-Apim-Subscription-Key header containing the API key directly. Each Cognitive Services API also has its own URL path pattern and request body format. For Text Analytics (now part of Azure AI Language service): POST to {AZURE_TEXT_ANALYTICS_URL}/text/analytics/v3.1/sentiment with a body of { documents: [{ id: '1', text: '...', language: 'en' }] }. The response includes sentiment labels (positive/neutral/negative) and confidence scores per sentence. For Computer Vision: POST to {AZURE_VISION_URL}/vision/v3.2/analyze?visualFeatures=Categories,Description,Tags,Objects with a body of { url: 'https://...' } for URL-based image analysis, or the raw image bytes as application/octet-stream for direct upload. The Edge Function below handles Azure Text Analytics. For other Cognitive Services, change the endpoint path and request body format while keeping the authentication header pattern identical.

1// supabase/functions/azure-text-analytics/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
9
10  try {
11    const { text } = await req.json() as { text: string };
12
13    if (!text?.trim()) {
14      return new Response(JSON.stringify({ error: 'text is required' }), {
15        status: 400,
16        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
17      });
18    }
19
20    const analyticsUrl = Deno.env.get('AZURE_TEXT_ANALYTICS_URL')!;
21    const apiKey = Deno.env.get('AZURE_TEXT_ANALYTICS_KEY')!;
22
23    const requestBody = {
24      documents: [{ id: '1', text, language: 'en' }],
25    };
26
27    const headers = {
28      'Ocp-Apim-Subscription-Key': apiKey,
29      'Content-Type': 'application/json',
30    };
31
32    const [sentimentResp, entitiesResp] = await Promise.all([
33      fetch(`${analyticsUrl}/text/analytics/v3.1/sentiment`, {
34        method: 'POST', headers, body: JSON.stringify(requestBody),
35      }),
36      fetch(`${analyticsUrl}/text/analytics/v3.1/entities/recognition/general`, {
37        method: 'POST', headers, body: JSON.stringify(requestBody),
38      }),
39    ]);
40
41    const sentimentData = await sentimentResp.json();
42    const entitiesData = await entitiesResp.json();
43
44    const doc = sentimentData.documents?.[0];
45    const entDoc = entitiesData.documents?.[0];
46
47    return new Response(JSON.stringify({
48      sentiment: {
49        label: doc?.sentiment,
50        scores: doc?.confidenceScores,
51        sentences: doc?.sentences?.map((s: { text: string; sentiment: string; confidenceScores: unknown }) => ({
52          text: s.text,
53          sentiment: s.sentiment,
54          scores: s.confidenceScores,
55        })),
56      },
57      entities: entDoc?.entities ?? [],
58    }), {
59      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
60    });
61  } catch (error) {
62    console.error('azure-text-analytics error:', error);
63    return new Response(JSON.stringify({ error: String(error) }), {
64      status: 500,
65      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
66    });
67  }
68});

With the Azure Edge Functions deployed, build the React components that collect input, call the functions, and display Azure's AI results. The patterns described here work for both Azure ML scoring and Cognitive Services output. For Azure ML predictions: design a form with inputs matching your model's features. On submit, call supabase.functions.invoke('azure-ml-predict') with the feature values. The result format from Azure ML AutoML is typically an array like [0.76] for binary classification probability or ["ClassName"] for multiclass classification. Display the prediction prominently — a large percentage gauge for probability, or a labeled card for class predictions. For Azure Text Analytics: design a text input panel with an analysis results section. Map the sentiment label to a color (positive = green, negative = red, neutral = grey) and display the sentence-level breakdown as an annotated text view where hovering over a sentence shows its individual sentiment scores. For Computer Vision: display the uploaded image with bounding box overlays for detected objects (use a canvas element positioned over the image with coordinates from the API response). Show the description caption above the image and the confidence-ranked tags below. Ask Lovable to build any of these components by describing the Azure response format and the UI behavior you want. For enterprise Azure ML deployments with MLflow tracking, A/B testing between model versions, or real-time monitoring dashboards, RapidDev's team can help design the full Azure + Lovable integration architecture.