How to Integrate Bolt.new with H2O.ai

1// lib/h2o.ts
2const SCORING_URL = process.env.H2O_SCORING_URL;
3const API_KEY = process.env.H2O_API_KEY;
4
5interface H2OPredictionResponse {
6  // H2O MOJO scorer format
7  score?: number[][];             // regression: [[predicted_value]]
8  label?: string;                 // classification: predicted class
9  classProbabilities?: number[];  // classification: per-class probabilities
10  // Alternative H2O-3 format
11  predictions?: Array<{ predict: string; p0?: number; p1?: number; value?: number }>;
12  [key: string]: unknown;
13}
14
15export async function scoreWithH2O(
16  features: Record<string, string | number>
17): Promise<H2OPredictionResponse> {
18  if (!SCORING_URL || !API_KEY) {
19    throw new Error('H2O_SCORING_URL and H2O_API_KEY must be set in .env');
20  }
21
22  // H2O MOJO scorer format: { fields: [col names], rows: [[values]] }
23  const requestBody = {
24    fields: Object.keys(features),
25    rows: [Object.values(features).map(String)], // H2O expects string values
26  };
27
28  const response = await fetch(SCORING_URL, {
29    method: 'POST',
30    headers: {
31      Authorization: `Bearer ${API_KEY}`,
32      'Content-Type': 'application/json',
33      Accept: 'application/json',
34    },
35    body: JSON.stringify(requestBody),
36  });
37
38  if (!response.ok) {
39    const error = await response.text();
40    throw new Error(`H2O scoring error ${response.status}: ${error}`);
41  }
42
43  return response.json() as Promise<H2OPredictionResponse>;
44}

1// app/api/predict/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { scoreWithH2O } from '@/lib/h2o';
4
5// Define your model's required features and their types
6const REQUIRED_FEATURES: Record<string, 'number' | 'string'> = {
7  monthly_usage: 'number',
8  feature_adoption_pct: 'number',
9  support_tickets_30d: 'number',
10  account_age_months: 'number',
11  contract_type: 'string',
12};
13
14function validateFeatures(features: Record<string, unknown>): string[] {
15  const errors: string[] = [];
16  for (const [field, type] of Object.entries(REQUIRED_FEATURES)) {
17    if (features[field] === undefined || features[field] === '') {
18      errors.push(`${field} is required`);
19    } else if (type === 'number' && isNaN(Number(features[field]))) {
20      errors.push(`${field} must be a number`);
21    }
22  }
23  return errors;
24}
25
26export async function POST(request: NextRequest) {
27  const body = await request.json();
28  const { features } = body;
29
30  const validationErrors = validateFeatures(features);
31  if (validationErrors.length > 0) {
32    return NextResponse.json({ error: 'Validation failed', details: validationErrors }, { status: 400 });
33  }
34
35  try {
36    const h2oResponse = await scoreWithH2O(features);
37
38    // Handle both H2O-3 and MOJO scorer response formats
39    let predictedClass: string | null = null;
40    let probability: number | null = null;
41    let predictedValue: number | null = null;
42
43    if (h2oResponse.predictions?.[0]) {
44      // H2O-3 format
45      const pred = h2oResponse.predictions[0];
46      predictedClass = pred.predict;
47      probability = pred.p1 ?? null; // p1 = probability of positive class
48    } else if (h2oResponse.classProbabilities) {
49      // MOJO scorer format
50      probability = Math.max(...h2oResponse.classProbabilities);
51    } else if (h2oResponse.score?.[0]?.[0] !== undefined) {
52      // Regression
53      predictedValue = h2oResponse.score[0][0];
54    }
55
56    return NextResponse.json({
57      predicted_class: predictedClass,
58      predicted_value: predictedValue,
59      probability,
60      raw_response: h2oResponse,
61    });
62  } catch (error) {
63    return NextResponse.json(
64      { error: error instanceof Error ? error.message : 'Scoring failed' },
65      { status: 500 }
66    );
67  }
68}

1// components/PredictionForm.tsx
2'use client';
3import { useState } from 'react';
4
5interface PredictResponse {
6  predicted_class: string | null;
7  probability: number | null;
8  predicted_value: number | null;
9  error?: string;
10}
11
12interface Features {
13  monthly_usage: number;
14  feature_adoption_pct: number;
15  support_tickets_30d: number;
16  account_age_months: number;
17  contract_type: string;
18}
19
20const INITIAL_FEATURES: Features = {
21  monthly_usage: 200,
22  feature_adoption_pct: 45,
23  support_tickets_30d: 2,
24  account_age_months: 18,
25  contract_type: 'monthly',
26};
27
28export function PredictionForm() {
29  const [features, setFeatures] = useState<Features>(INITIAL_FEATURES);
30  const [result, setResult] = useState<PredictResponse | null>(null);
31  const [loading, setLoading] = useState(false);
32
33  const set = (key: keyof Features) => (value: number | string) =>
34    setFeatures((f) => ({ ...f, [key]: value }));
35
36  const handlePredict = async () => {
37    setLoading(true);
38    setResult(null);
39    try {
40      const res = await fetch('/api/predict', {
41        method: 'POST',
42        headers: { 'Content-Type': 'application/json' },
43        body: JSON.stringify({ features }),
44      });
45      const data: PredictResponse = await res.json();
46      setResult(data);
47    } finally {
48      setLoading(false);
49    }
50  };
51
52  const riskTier = (p: number) =>
53    p >= 0.7 ? { label: 'High Risk', color: 'bg-red-500 text-white' }
54    : p >= 0.3 ? { label: 'Medium Risk', color: 'bg-yellow-400 text-yellow-900' }
55    : { label: 'Low Risk', color: 'bg-green-500 text-white' };
56
57  const sliders: Array<{ key: keyof Features; label: string; min: number; max: number }> = [
58    { key: 'monthly_usage', label: 'Monthly Usage', min: 0, max: 1000 },
59    { key: 'feature_adoption_pct', label: 'Feature Adoption %', min: 0, max: 100 },
60    { key: 'support_tickets_30d', label: 'Support Tickets (30d)', min: 0, max: 20 },
61    { key: 'account_age_months', label: 'Account Age (months)', min: 1, max: 120 },
62  ];
63
64  return (
65    <div className="max-w-lg mx-auto p-6 space-y-5">
66      <h2 className="text-2xl font-bold">Churn Risk Predictor</h2>
67      <p className="text-sm text-gray-500">Powered by H2O AutoML • Decision support tool — requires human review</p>
68
69      {sliders.map(({ key, label, min, max }) => (
70        <div key={key}>
71          <div className="flex justify-between text-sm font-medium mb-1">
72            <span>{label}</span>
73            <span className="text-blue-600">{features[key as keyof Features]}</span>
74          </div>
75          <input type="range" min={min} max={max}
76            value={features[key as keyof Features] as number}
77            onChange={(e) => set(key)(Number(e.target.value))}
78            className="w-full" />
79        </div>
80      ))}
81
82      <div>
83        <label className="block text-sm font-medium mb-1">Contract Type</label>
84        <select value={features.contract_type} onChange={(e) => set('contract_type')(e.target.value)}
85          className="w-full border rounded px-3 py-2">
86          <option value="monthly">Monthly</option>
87          <option value="annual">Annual</option>
88        </select>
89      </div>
90
91      <button onClick={handlePredict} disabled={loading}
92        className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 disabled:opacity-50">
93        {loading ? 'Predicting...' : 'Predict Churn Risk'}
94      </button>
95
96      {result?.error && <p className="text-red-600 text-sm">{result.error}</p>}
97
98      {result?.probability != null && (() => {
99        const tier = riskTier(result.probability);
100        const pct = (result.probability * 100).toFixed(1);
101        return (
102          <div className="border rounded-lg p-4 space-y-3">
103            <div className="flex items-center gap-3">
104              <span className="text-4xl font-bold">{pct}%</span>
105              <span className={`px-3 py-1 rounded-full text-sm font-semibold ${tier.color}`}>{tier.label}</span>
106            </div>
107            <div className="w-full bg-gray-200 rounded-full h-3">
108              <div className="bg-blue-600 h-3 rounded-full transition-all" style={{ width: `${pct}%` }} />
109            </div>
110            <p className="text-xs text-gray-400">Churn probability score: {result.probability.toFixed(4)}</p>
111          </div>
112        );
113      })()}
114    </div>
115  );
116}

1// app/api/predictions/stats/route.ts
2// In production (Netlify/Bolt Cloud), replace in-memory storage with a real DB
3import { NextResponse } from 'next/server';
4
5// In-memory log (persists for lifetime of server process)
6// Replace with Supabase/database for production persistence
7const predictionLog: Array<{
8  timestamp: number;
9  probability: number;
10  responseTimeMs: number;
11}> = [];
12
13export function logPrediction(probability: number, responseTimeMs: number) {
14  predictionLog.push({ timestamp: Date.now(), probability, responseTimeMs });
15  // Keep only last 1000 predictions in memory
16  if (predictionLog.length > 1000) predictionLog.shift();
17}
18
19export async function GET() {
20  const today = new Date();
21  today.setHours(0, 0, 0, 0);
22  const todayTs = today.getTime();
23
24  const todayPredictions = predictionLog.filter((p) => p.timestamp >= todayTs);
25
26  const stats = {
27    total_today: todayPredictions.length,
28    avg_probability: todayPredictions.length > 0
29      ? (todayPredictions.reduce((sum, p) => sum + p.probability, 0) / todayPredictions.length).toFixed(3)
30      : null,
31    high_risk_count: todayPredictions.filter((p) => p.probability >= 0.7).length,
32    avg_response_ms: todayPredictions.length > 0
33      ? Math.round(todayPredictions.reduce((sum, p) => sum + p.responseTimeMs, 0) / todayPredictions.length)
34      : null,
35    last_prediction: predictionLog.length > 0
36      ? new Date(predictionLog[predictionLog.length - 1].timestamp).toISOString()
37      : null,
38  };
39
40  return NextResponse.json(stats);
41}