How to Integrate H2O.ai with V0

Open V0 and describe the prediction form your business users will fill out. The form's input fields should correspond to the feature columns your H2O.ai model was trained on. Think about the data types carefully: numerical features (age, income, days since last purchase) become number inputs; categorical features (product category, region, risk tier) become select dropdowns; binary features (has_subscription, is_mobile) become checkboxes or toggle switches. Describe the form in V0 with the exact field names that match your H2O.ai model's feature columns. This matters because the API route will pass the form values directly to the H2O.ai scoring endpoint, and field names must match the model's training schema. Also ask V0 to generate the results display section — where the prediction value, confidence score, and feature importance will appear after scoring. The results should be conditionally rendered only after the API call succeeds. Ask V0 to add loading state (disabling the form and showing a spinner during prediction) and error state (showing the error message if the H2O.ai endpoint is unreachable). For classification models, the result typically shows the predicted class and the probability for each class. For regression models, the result is a single numeric value. Specify which type your model produces when prompting V0 so it generates the right results display layout.

Create a Next.js API route at app/api/predict/route.ts that receives feature data from the form and forwards it to your H2O.ai scoring endpoint. The exact request format depends on which H2O.ai deployment you're using. For the H2O-3 cluster REST API (running on port 54321), the scoring endpoint accepts a JSON body with a rows array containing one or more feature vectors. For H2O Steam deployed models, the endpoint format varies based on the deployment configuration — check your Steam dashboard for the specific endpoint URL and authentication method. For standalone MOJO scoring servers (the most common production deployment), the endpoint accepts JSON with a fields array (column names) and a rows array (feature values in matching order). Regardless of which H2O.ai deployment type you're using, your API route should: parse and validate the incoming form data, construct the correct request body format for your H2O.ai endpoint, make an authenticated HTTP request, parse the response, and return the prediction in a clean format your frontend can display. Add input validation before calling H2O.ai to catch range errors, missing fields, and type mismatches — these are far more informative than H2O.ai's generic scoring errors. Store the H2O.ai endpoint URL and any credentials as environment variables with no NEXT_PUBLIC_ prefix. The H2O.ai endpoint URL may contain a private server address that you don't want in the browser bundle.

1import { NextRequest, NextResponse } from 'next/server';
2
3interface PredictRequest {
4  annualIncome: number;
5  monthlyDebt: number;
6  creditScore: number;
7  yearsEmployed: number;
8  loanAmount: number;
9}
10
11interface H2OResponse {
12  predictions: Array<{
13    predict: string;
14    p0: number;
15    p1: number;
16  }>;
17}
18
19export async function POST(req: NextRequest) {
20  try {
21    const body: PredictRequest = await req.json();
22
23    // Validate inputs
24    const { annualIncome, monthlyDebt, creditScore, yearsEmployed, loanAmount } = body;
25    if (!annualIncome || !monthlyDebt || !creditScore || yearsEmployed === undefined || !loanAmount) {
26      return NextResponse.json({ error: 'All feature fields are required' }, { status: 400 });
27    }
28    if (creditScore < 300 || creditScore > 850) {
29      return NextResponse.json({ error: 'Credit score must be between 300 and 850' }, { status: 400 });
30    }
31
32    // Format for H2O MOJO scoring server
33    const h2oPayload = {
34      fields: ['annual_income', 'monthly_debt', 'credit_score', 'years_employed', 'loan_amount'],
35      rows: [[
36        String(annualIncome),
37        String(monthlyDebt),
38        String(creditScore),
39        String(yearsEmployed),
40        String(loanAmount),
41      ]],
42    };
43
44    const h2oResponse = await fetch(`${process.env.H2O_SCORING_ENDPOINT}/score`, {
45      method: 'POST',
46      headers: {
47        'Content-Type': 'application/json',
48        ...(process.env.H2O_API_KEY && { Authorization: `Bearer ${process.env.H2O_API_KEY}` }),
49      },
50      body: JSON.stringify(h2oPayload),
51    });
52
53    if (!h2oResponse.ok) {
54      const error = await h2oResponse.text();
55      console.error('H2O.ai error:', error);
56      return NextResponse.json({ error: 'Scoring endpoint error' }, { status: 502 });
57    }
58
59    const result: H2OResponse = await h2oResponse.json();
60    const prediction = result.predictions[0];
61
62    return NextResponse.json({
63      prediction: prediction.predict,
64      probability: prediction.p1,
65      riskScore: Math.round(prediction.p1 * 100),
66    });
67  } catch (error) {
68    console.error('Predict route error:', error);
69    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
70  }
71}

Update your V0-generated form component to call the /api/predict route and display the results. The component should use React state to track the prediction result and update the UI after the API call completes. For classification models, H2O.ai returns a predictions array where each item has a predict field (the winning class label), plus probability fields for each class (usually p0 for the negative class and p1 for the positive class). For regression models, the predictions array contains a predict field with the numeric value. Parse these fields and display them in your V0-generated results section. Add feature importance display if your H2O.ai endpoint returns it. H2O Steam deployments often include a contributions array in the response that shows each feature's Shapley value contribution to the prediction — positive contributions pushed the prediction toward the positive class, negative contributions pushed it away. Displaying these as a sorted bar chart (most impactful features at top) makes predictions far more interpretable for business users and is a major value-add for regulatory compliance in credit and risk applications. If your H2O.ai endpoint is slow (typical AutoML ensemble models take 50-500ms per prediction), add a timeout to your fetch call so the form doesn't hang indefinitely if the ML server is under load.

1'use client';
2
3import { useState } from 'react';
4
5interface PredictResult {
6  prediction: string;
7  probability: number;
8  riskScore: number;
9}
10
11export function PredictionForm() {
12  const [loading, setLoading] = useState(false);
13  const [result, setResult] = useState<PredictResult | null>(null);
14  const [error, setError] = useState<string | null>(null);
15
16  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
17    e.preventDefault();
18    setLoading(true);
19    setError(null);
20    setResult(null);
21
22    const formData = new FormData(e.currentTarget);
23    const features = {
24      annualIncome: Number(formData.get('annualIncome')),
25      monthlyDebt: Number(formData.get('monthlyDebt')),
26      creditScore: Number(formData.get('creditScore')),
27      yearsEmployed: Number(formData.get('yearsEmployed')),
28      loanAmount: Number(formData.get('loanAmount')),
29    };
30
31    try {
32      const res = await fetch('/api/predict', {
33        method: 'POST',
34        headers: { 'Content-Type': 'application/json' },
35        body: JSON.stringify(features),
36        signal: AbortSignal.timeout(15000), // 15 second timeout
37      });
38
39      const data = await res.json();
40      if (!res.ok) throw new Error(data.error || 'Prediction failed');
41      setResult(data);
42    } catch (err) {
43      setError(err instanceof Error ? err.message : 'Failed to get prediction');
44    } finally {
45      setLoading(false);
46    }
47  };
48
49  return (
50    <form onSubmit={handleSubmit}>
51      {/* Form inputs rendered by V0 */}
52      {error && <p className="text-red-600">{error}</p>}
53      {result && (
54        <div>
55          <p>Risk Score: {result.riskScore}%</p>
56          <p>Decision: {result.prediction}</p>
57        </div>
58      )}
59    </form>
60  );
61}

H2O.ai integration requires server-side environment variables that point to your scoring endpoint. The exact variables depend on your H2O.ai deployment type. H2O_SCORING_ENDPOINT is the base URL of your scoring server — for a standalone MOJO server it might be http://your-server:8080, for H2O Steam it's your Steam deployment URL. H2O_API_KEY is optional depending on your deployment — Steam deployments require an API token, while an internal H2O-3 cluster may not need authentication. Neither variable should have the NEXT_PUBLIC_ prefix since they are server-side only. For the MOJO scoring server URL, this is especially important if your H2O.ai model is deployed on an internal corporate network — the URL may be a private IP or VPN address you don't want in the browser's JavaScript bundle. Add both variables to Vercel Dashboard → Settings → Environment Variables for the Production environment. If your H2O.ai server is inside a corporate firewall or VPC, Vercel's serverless functions need network access to reach it — consider deploying a public-facing H2O.ai endpoint or using a VPN-compatible hosting setup. After deploying, test the prediction flow end-to-end with known inputs where you know the expected output from your H2O.ai model training phase. Verify that the API route reaches H2O.ai by checking the Vercel Function Logs in Vercel Dashboard → your deployment → Functions.

1# .env.local
2# H2O.ai scoring endpoint URL (MOJO server, Steam, or H2O-3 cluster)
3# No NEXT_PUBLIC_ prefix — server-side only, keeps endpoint URL out of browser bundle
4H2O_SCORING_ENDPOINT=https://your-h2o-mojo-server.com:8080
5
6# Optional: H2O Steam API key or Bearer token for authenticated endpoints
7H2O_API_KEY=your_steam_api_key_or_token