Connect your Lovable app to H2O.ai's AutoML platform by creating a Supabase Edge Function that calls H2O's REST API prediction endpoints with your API key. H2O automatically trains the best ML model on your tabular data — no ML expertise required. Use H2O when you want automated model selection and training on your own data, unlike Vertex AI which is a full managed ML lifecycle platform.
Add H2O AutoML predictions to your Lovable app without ML expertise
H2O.ai's AutoML capability is specifically designed for non-ML-experts who have labeled business data and need accurate predictions without hiring a data scientist. You provide a CSV dataset with your target variable (the column you want to predict), H2O automatically runs dozens of algorithms (gradient boosted machines, deep learning, generalized linear models, stacked ensembles), evaluates them on held-out validation data, and surfaces the best-performing model. The whole training process can complete in minutes for datasets under 100,000 rows.
Once a model is trained in H2O Driverless AI or H2O-3, it can be deployed as a REST scoring endpoint. H2O's MOJO (Model Object Optimized) format allows scoring endpoints to run predictions at millisecond latency. The REST API accepts prediction instances in JSON format and returns predicted class labels, probabilities, and regression values. For a Lovable app, a Supabase Edge Function acts as the secure proxy: it authenticates with the H2O endpoint using credentials from Cloud → Secrets and returns predictions to the frontend.
H2O is the right tool when your ML challenge is tabular data classification or regression — predicting customer churn from CRM records, credit risk from financial features, equipment failure from sensor readings, or sales forecast from historical transactions. These are structured data problems where AutoML typically matches or exceeds manually tuned models. Unlike Vertex AI which is a full MLOps platform with many services, H2O is specialized for this automated model training and scoring workflow, making it faster to get from data to predictions.
Integration method
H2O.ai integrates with Lovable through a Supabase Edge Function that calls H2O's REST prediction API endpoints. Your H2O API key or deployment URL is stored in Cloud → Secrets. The Edge Function receives input data from the React frontend, formats it as a prediction request, calls the H2O scoring endpoint, and returns the prediction results. H2O Wave, H2O Driverless AI, and H2O-3 all expose REST prediction APIs that follow this same proxy pattern.
Prerequisites
- An H2O.ai account — H2O-3 (free open source), H2O Driverless AI (commercial), or H2O AI Cloud with a deployed scoring endpoint
- A trained AutoML model deployed as a REST scoring endpoint in H2O (note the scoring endpoint URL and API token)
- The input feature schema of your deployed model (exact column names and data types used during training)
- A Lovable account with an active Lovable Cloud project
Step-by-step guide
Deploy your H2O model as a REST scoring endpoint and capture the URL
Deploy your H2O model as a REST scoring endpoint and capture the URL
Before writing any Lovable code, your H2O AutoML model needs to be deployed and accessible as a REST API. The deployment process differs slightly between H2O-3, Driverless AI, and H2O AI Cloud, but all result in an HTTPS endpoint that accepts JSON POST requests. In H2O Driverless AI: Navigate to your experiment, click 'Deploy', then 'Deploy to Local REST Server' or 'Deploy to H2O AI Cloud'. Copy the scoring endpoint URL — it typically looks like https://your-instance.h2o.ai/model/{model-key}/score. In H2O-3 with the Java scoring API: Export your model as a MOJO file, run the MOJO scoring server (java -cp h2o-genmodel.jar hex.genmodel.tools.MojoScorer), and expose it via your hosting environment. For production use, consider H2O Wave or a dedicated scoring server. In H2O AI Cloud: Use the scoring service which provides a managed REST endpoint with built-in authentication. The endpoint URL appears in the deployment details panel. Note the API token or authentication header required. H2O endpoints typically use either a Bearer token in the Authorization header or an X-Api-Key header — check your specific deployment type's documentation for the exact format. Also note the exact input schema: the column names and data types your model expects. Prediction requests that include column names not present in training, or that omit required columns, return errors.
Pro tip: Use H2O's built-in 'Score on Test Data' feature before deploying to confirm predictions are reasonable. If AutoML accuracy metrics look good in training but predictions are nonsensical on new data, check for data leakage in the training dataset.
Expected result: You have an HTTPS scoring endpoint URL and an API token. A test curl request to the endpoint (curl -X POST {url} -H 'X-Api-Key: {token}' -d '{...}') returns a prediction response.
Store the H2O endpoint URL and API key in Cloud → Secrets
Store the H2O endpoint URL and API key in Cloud → Secrets
Your H2O scoring endpoint URL and authentication credentials must be stored server-side in Cloud → Secrets, never in frontend code. The API key for H2O cloud endpoints grants access to all predictions on your deployed models — exposing it in client-side JavaScript would allow anyone to run predictions against your model at your expense. To store the secrets, click the '+' icon next to the Preview label at the top of the Lovable editor to open the Cloud panel. Click the 'Secrets' tab. Click 'Add new secret'. Add the following: - Name: H2O_SCORING_URL — Value: your full H2O scoring endpoint URL (e.g., https://your-instance.h2o.ai/score) - Name: H2O_API_KEY — Value: your API token or bearer token from H2O console If your H2O deployment uses a different authentication mechanism (HTTP Basic Auth with username and password, or a specific header name), add the corresponding secrets with descriptive names like H2O_USERNAME and H2O_PASSWORD or H2O_AUTH_HEADER_NAME and H2O_AUTH_HEADER_VALUE. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys daily, but the only truly safe storage is the Secrets panel. Secrets are encrypted at rest, only accessible in Edge Functions via Deno.env.get(), and never appear in client-side code, Git history, or Lovable's chat.
Pro tip: If you are testing with H2O-3 running locally before production deployment, use a tunnel tool like ngrok to expose the local scoring server temporarily and use the ngrok URL as H2O_SCORING_URL during development.
Expected result: H2O_SCORING_URL and H2O_API_KEY are stored in Cloud → Secrets with masked values. Neither value appears anywhere in code or chat history.
Create the H2O prediction proxy Edge Function
Create the H2O prediction proxy Edge Function
The Edge Function receives input data from the React frontend, formats it as an H2O scoring request, authenticates with the H2O endpoint, and returns the prediction response. H2O REST scoring endpoints accept a JSON body with a 'fields' array (column names) and a 'rows' array (arrays of values in the same order as fields). This is different from the named-fields format used by some other prediction APIs. The response from H2O contains a 'score' field with the prediction, and for classification models a 'label' field with the predicted class name plus 'classProbabilities' with confidence scores per class. For regression models, just a numerical score. The Edge Function below handles the standard H2O scoring request format. Adapt the fields array to match your model's exact column names. If your model expects 20 feature columns, the fields array must have exactly those 20 column names in the order H2O expects them (check your Driverless AI experiment's feature importance panel for the column list, or review the MOJO model's feature columns).
Create a Supabase Edge Function at supabase/functions/h2o-predict/index.ts that calls an H2O scoring endpoint. Read H2O_SCORING_URL and H2O_API_KEY from Deno.env.get(). Accept a POST request with a 'features' object containing named feature key-value pairs. Convert it to H2O's scoring format with a 'fields' array and 'rows' array. Call the scoring URL with an X-Api-Key header. Return the prediction label, score, and class probabilities as JSON. Include CORS headers.
Paste this in Lovable chat
1// supabase/functions/h2o-predict/index.ts2const corsHeaders = {3 'Access-Control-Allow-Origin': '*',4 'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',5};67// Define the exact feature columns your H2O model expects, in order8// Update this to match your model's training features9const MODEL_FEATURES = [10 'feature_1',11 'feature_2',12 'feature_3',13 // ... add all your model features here14];1516Deno.serve(async (req) => {17 if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });1819 try {20 const { features } = await req.json() as { features: Record<string, string | number | null> };2122 if (!features || typeof features !== 'object') {23 return new Response(JSON.stringify({ error: 'features object is required' }), {24 status: 400,25 headers: { ...corsHeaders, 'Content-Type': 'application/json' },26 });27 }2829 const h2oUrl = Deno.env.get('H2O_SCORING_URL')!;30 const apiKey = Deno.env.get('H2O_API_KEY')!;3132 // Convert named features to H2O's fields/rows format33 const fields = MODEL_FEATURES;34 const row = fields.map((f) => features[f] ?? null);3536 const h2oPayload = {37 fields,38 rows: [row],39 };4041 const h2oResponse = await fetch(h2oUrl, {42 method: 'POST',43 headers: {44 'X-Api-Key': apiKey,45 'Content-Type': 'application/json',46 },47 body: JSON.stringify(h2oPayload),48 });4950 if (!h2oResponse.ok) {51 const errText = await h2oResponse.text();52 console.error(`H2O scoring error ${h2oResponse.status}:`, errText);53 return new Response(JSON.stringify({ error: `H2O returned ${h2oResponse.status}: ${errText}` }), {54 status: h2oResponse.status,55 headers: { ...corsHeaders, 'Content-Type': 'application/json' },56 });57 }5859 const result = await h2oResponse.json();60 // H2O response format: { score: [[...values...]], label: ['ClassName'], classProbabilities: {...} }61 const predictions = result.score?.[0] ?? result;62 const label = result.label?.[0] ?? null;63 const probabilities = result.classProbabilities?.[0] ?? null;6465 return new Response(JSON.stringify({ predictions, label, probabilities }), {66 headers: { ...corsHeaders, 'Content-Type': 'application/json' },67 });68 } catch (error) {69 console.error('h2o-predict error:', error);70 return new Response(JSON.stringify({ error: String(error) }), {71 status: 500,72 headers: { ...corsHeaders, 'Content-Type': 'application/json' },73 });74 }75});Pro tip: Log the raw H2O response body in Cloud → Logs during development to understand the exact prediction response shape. Different H2O deployment types and model types return slightly different JSON structures.
Expected result: The h2o-predict Edge Function deploys successfully. A test POST request with a sample features object returns a predictions array and label from H2O. Cloud → Logs confirms the H2O scoring endpoint returned 200 OK.
Build the prediction UI and display results
Build the prediction UI and display results
With the Edge Function running, build the React frontend that collects the input features and displays H2O's predictions. The UI design depends on your use case — a simple tabular classifier might use a form with one input per feature, while a real-time scoring app might collect data from other parts of the app and trigger prediction automatically. For a classification model, the key results to display are the predicted class label (the most likely category) and the confidence score (probability for that class). H2O's class probabilities give you the full distribution across all classes — a bar chart or table showing all class probabilities is useful for users who need to understand model confidence across all outcomes. For a regression model, display the predicted value with appropriate formatting, the relevant unit (dollars, days, percentage, etc.), and optionally a comparison to baseline or average values from your Supabase database to give the prediction context. Ask Lovable to generate the prediction UI by describing your model's inputs and outputs. For example: 'Build a lead scoring form with fields for company_size (dropdown: 1-10, 11-50, 51-200, 200+), industry (text input), and annual_revenue (number). On submit, call the h2o-predict Edge Function. Display the predicted conversion_probability as a large percentage and a colored gauge chart from 0-100%.' For complex AutoML deployments with many features or Shapley explanation values, RapidDev's team can help build a rich prediction explanation UI.
Build a prediction form that calls the h2o-predict Supabase Edge Function. Include input fields for [list your model features here]. On submit, show a loading spinner, then display the prediction results: the predicted class label in a large badge, and class probabilities as a horizontal bar chart with percentages. If the top prediction confidence is below 60%, show a warning: 'Low confidence — verify manually.' Add a Reset button to clear the form and results.
Paste this in Lovable chat
Pro tip: Consider caching recent prediction results in Supabase with the input features and timestamp. This lets you track model usage, build a history view, and analyze whether the model's predictions are accurate by comparing them to actual outcomes later.
Expected result: The prediction form collects feature inputs, calls H2O through the Edge Function, and displays the predicted class label and confidence scores. The UI handles loading and error states cleanly.
Common use cases
Predict customer churn from subscription and usage data
Your CRM data contains subscription tier, last login date, feature usage counts, and support ticket history. An H2O AutoML model trained on historical churn labels predicts whether each active customer is likely to cancel in the next 30 days. The Lovable app calls the H2O scoring endpoint via Edge Function and displays churn risk scores in a customer dashboard, helping your sales team prioritize outreach.
Create a Supabase Edge Function called 'h2o-churn-predict' that calls an H2O scoring endpoint with customer features. Read H2O_SCORING_URL and H2O_API_KEY from Deno.env.get(). Accept a POST request with fields: subscription_tier, days_since_last_login, feature_usage_count, support_tickets_last_30d. Format as an H2O REST prediction request and return the predicted churn probability. Build a customer detail page showing the churn risk score as a percentage with a red/yellow/green badge.
Copy this prompt to try it in Lovable
Score leads in real time as they fill out a signup form
As a potential customer fills in a lead capture form (company size, industry, job title, referral source), the app calls H2O's scoring endpoint in real time to predict lead quality score. High-scoring leads are immediately routed to a calendar booking flow; low-scoring leads get a self-serve onboarding path. The prediction happens before the form is submitted, creating a dynamic branching experience.
Build a lead capture form where H2O predicts lead quality as the user fills in fields. After each field loses focus, send the current form values to the h2o-lead-score Edge Function and update a hidden lead quality score. When the score changes tier (cold/warm/hot), animate the CTA button text changing from 'Get Started' to 'Book a Demo'. On form submit, save the predicted lead_score to the Supabase leads table alongside the form data.
Copy this prompt to try it in Lovable
Detect anomalies in user-submitted data
An H2O isolation forest or anomaly detection model trained on normal transaction patterns flags unusual activity in real time. Users submit transaction or sensor data through the Lovable app, the Edge Function scores it against the H2O anomaly model, and the frontend highlights anomalies with an explanation of which features contributed most to the anomaly score. H2O Driverless AI provides MLI (machine learning interpretability) explanations automatically.
Create an anomaly detection feature: users paste a CSV row of transaction data into a textarea. Call the h2o-anomaly-predict Edge Function which sends the data to H2O's scoring endpoint. If the anomaly score is above 0.7, show a red alert card with the message 'High anomaly probability' and list the top contributing features returned by the H2O prediction response. Below 0.3, show a green 'Normal' badge.
Copy this prompt to try it in Lovable
Troubleshooting
Edge Function returns 'H2O returned 401' or 'Unauthorized'
Cause: The H2O_API_KEY secret does not match the API token expected by the H2O scoring endpoint, or the token has expired if your H2O deployment uses time-limited session tokens.
Solution: Open your H2O Driverless AI or H2O AI Cloud console and regenerate the API token. Copy the new token value and update the H2O_API_KEY secret in Cloud → Secrets. If your H2O deployment uses session-based authentication (token expires after inactivity), consider switching to a non-expiring API key if your H2O version supports it, or implement token refresh logic in the Edge Function.
H2O returns predictions but they are all the same class regardless of input
Cause: The features object sent to H2O does not contain the expected column names, causing H2O to treat all feature values as null/missing and predict using only the model's prior distribution.
Solution: Log the h2oPayload variable in Cloud → Logs before the fetch call. Verify that the fields array exactly matches the column names your H2O model was trained on (case-sensitive, including spaces if the original column names had them). Compare your MODEL_FEATURES array in the Edge Function with the feature list in your H2O experiment's feature importance chart. Also check that feature values are the correct data types — H2O may reject or ignore values of the wrong type.
1// Add logging before the H2O fetch to debug feature format2console.log('H2O payload fields:', JSON.stringify(fields));3console.log('H2O payload row:', JSON.stringify(row));4console.log('Null features:', fields.filter((f, i) => row[i] === null || row[i] === undefined));Edge Function times out — H2O scoring takes over 30 seconds
Cause: The H2O scoring endpoint is running on an underprovisioned server, the model is very complex (large stacked ensemble), or the H2O instance is cold-starting (the scoring server was idle and is reinitializing).
Solution: H2O scoring latency depends on model complexity and hardware. Stacked ensembles and deep learning models score slower than GBM or GLM models. If latency is consistently high, retrain the model with a simpler algorithm or reduce the AutoML training time to limit ensemble complexity. For H2O AI Cloud deployments, check the scoring server's resource allocation — upgrade to a larger instance or enable always-warm scaling to eliminate cold starts.
H2O returns a 422 error with 'Unknown columns' in the error body
Cause: The features array sent in the request contains column names that were not present in the model's training data.
Solution: Check the H2O error response body logged in Cloud → Logs — it lists the unrecognized column names. Remove those columns from your MODEL_FEATURES array or rename them to match the training data column names exactly. H2O treats any column in the request that was not in training as an error when using strict schema validation.
Best practices
- Store the exact feature column names expected by your H2O model in the MODEL_FEATURES constant in your Edge Function — H2O requires field names to match the training data exactly (case-sensitive) and silently treats missing or misnamed columns as null values.
- Log H2O prediction requests and responses to Cloud → Logs during development to understand the exact response shape — different H2O deployment types and model versions return different JSON structures.
- Cache predictions in Supabase with the input feature hash and timestamp — if the same or similar inputs are requested frequently, you can return cached predictions instantly and save H2O scoring API costs.
- Validate input feature values server-side before calling H2O — check that all required features are present, numerical features are within the expected range, and categorical features contain valid category values.
- Monitor prediction latency in Cloud → Logs and alert if scoring takes over 5 seconds — slow predictions indicate an H2O scaling issue that should be addressed before it affects user experience.
- Test your AutoML model with held-out data before connecting it to production — H2O AutoML can overfit, especially on small datasets. Review the validation metrics in the H2O experiment leaderboard and check predictions on a sample of real data.
- Use H2O Driverless AI's MLI (Machine Learning Interpretability) Shapley explanations endpoint alongside predictions — displaying which features contributed to a prediction significantly increases user trust and helps validate the model is reasoning correctly.
Alternatives
Choose Google Vertex AI if you want a full MLOps platform with model training, monitoring, and serving within the Google Cloud ecosystem, rather than H2O's specialized AutoML-focused workflow.
Choose TensorFlow.js if you want to run custom neural network models you trained yourself, rather than relying on H2O's automated algorithm selection and MOJO model format.
Choose Azure Machine Learning if you are in a Microsoft-centric organization and prefer Azure's AutoML capability within the broader Azure ecosystem over H2O's independent platform.
Frequently asked questions
Do I need to understand machine learning to use H2O AutoML with Lovable?
No — that is H2O AutoML's main value proposition. You provide a CSV dataset with labeled examples, H2O automatically selects and trains the best algorithm, and you get a scoring endpoint. You do not choose the algorithm, set hyperparameters, or write training code. The main requirements are having enough labeled training data (typically 1,000+ rows for tabular classification) and knowing which column you want to predict. Interpreting prediction confidence scores and deciding on acceptable accuracy thresholds for your use case does require some judgment, but no ML coding knowledge is needed.
What is H2O's REST API scoring format, and how does it differ from other ML APIs?
H2O's scoring API accepts a 'fields' array (ordered list of column names) and a 'rows' array (list of value arrays in the same column order). This is different from named-object formats used by Vertex AI and Azure ML where each instance is a JSON object with named fields. The Edge Function converts your frontend's named-field input into H2O's column-ordered format automatically. The response contains 'score', 'label' (for classification), and 'classProbabilities' fields.
How is H2O.ai different from Google Cloud AutoML on Vertex AI?
H2O AutoML is a specialized platform focused on automated model training and tabular data scoring. It is faster to get started with (especially for on-premise or private cloud deployment) and is particularly strong for gradient boosted machine (GBM) and stacked ensemble models. Vertex AI AutoML is a component within Google's full-featured MLOps platform and integrates tightly with Google Cloud Storage, BigQuery, and other Google services. H2O is platform-agnostic and can run on any cloud or on-premise, while Vertex AI is Google Cloud-specific.
Can I use H2O's free open-source version instead of the commercial Driverless AI?
Yes. H2O-3 is completely open source and free. You can run H2O AutoML using the Python or R client to train models, export them as MOJO files, and serve them via the MOJO scoring REST server. The integration pattern in Lovable is identical — you just point H2O_SCORING_URL at your self-hosted scoring server instead of a commercial H2O AI Cloud instance. The main difference is that H2O-3 requires more manual setup and does not include enterprise features like MLI explanations or built-in deployment management.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation