How to Integrate Bolt.new with Google Cloud AI Platform

1// lib/google-auth.ts
2import { GoogleAuth } from 'google-auth-library';
3
4let cachedToken: { token: string; expiry: number } | null = null;
5
6export async function getGoogleAccessToken(): Promise<string> {
7  // Return cached token if still valid (with 5-minute buffer)
8  if (cachedToken && Date.now() < cachedToken.expiry - 5 * 60 * 1000) {
9    return cachedToken.token;
10  }
11
12  const auth = new GoogleAuth({
13    credentials: {
14      type: 'service_account',
15      project_id: process.env.GOOGLE_PROJECT_ID,
16      client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
17      // Replace escaped \n with actual newlines for PEM format
18      private_key: process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY?.replace(/\\n/g, '\n'),
19    },
20    scopes: ['https://www.googleapis.com/auth/cloud-platform'],
21  });
22
23  const client = await auth.getClient();
24  const tokenResponse = await client.getAccessToken();
25
26  if (!tokenResponse.token) {
27    throw new Error('Failed to get Google access token');
28  }
29
30  // Cache token (Google access tokens expire in 1 hour)
31  cachedToken = {
32    token: tokenResponse.token,
33    expiry: Date.now() + 60 * 60 * 1000,
34  };
35
36  return tokenResponse.token;
37}

1// app/api/predict/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { getGoogleAccessToken } from '@/lib/google-auth';
4
5export async function POST(request: NextRequest) {
6  const { features } = await request.json();
7
8  const projectId = process.env.GOOGLE_PROJECT_ID;
9  const region = process.env.VERTEX_AI_REGION ?? 'us-central1';
10  const endpointId = process.env.VERTEX_AI_ENDPOINT_ID;
11
12  if (!endpointId) {
13    return NextResponse.json({ error: 'VERTEX_AI_ENDPOINT_ID not configured' }, { status: 500 });
14  }
15
16  try {
17    const accessToken = await getGoogleAccessToken();
18
19    const endpoint = `https://${region}-aiplatform.googleapis.com/v1/projects/${projectId}/locations/${region}/endpoints/${endpointId}:predict`;
20
21    const response = await fetch(endpoint, {
22      method: 'POST',
23      headers: {
24        Authorization: `Bearer ${accessToken}`,
25        'Content-Type': 'application/json',
26      },
27      body: JSON.stringify({
28        instances: [features],
29      }),
30    });
31
32    if (!response.ok) {
33      const error = await response.text();
34      return NextResponse.json({ error: `Vertex AI error: ${error}` }, { status: response.status });
35    }
36
37    const result = await response.json();
38    return NextResponse.json({
39      prediction: result.predictions?.[0],
40      deployedModelId: result.deployedModelId,
41    });
42  } catch (error) {
43    return NextResponse.json({ error: 'Prediction failed' }, { status: 500 });
44  }
45}

1// app/api/vision/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function POST(request: NextRequest) {
5  const { imageBase64 } = await request.json();
6  const apiKey = process.env.GOOGLE_API_KEY;
7
8  try {
9    const response = await fetch(
10      `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`,
11      {
12        method: 'POST',
13        headers: { 'Content-Type': 'application/json' },
14        body: JSON.stringify({
15          requests: [{
16            image: { content: imageBase64 },
17            features: [
18              { type: 'LABEL_DETECTION', maxResults: 5 },
19              { type: 'TEXT_DETECTION' },
20              { type: 'SAFE_SEARCH_DETECTION' },
21            ],
22          }],
23        }),
24      }
25    );
26
27    if (!response.ok) {
28      const error = await response.json();
29      return NextResponse.json({ error: error.error?.message }, { status: response.status });
30    }
31
32    const data = await response.json();
33    const annotations = data.responses?.[0];
34
35    return NextResponse.json({
36      labels: annotations?.labelAnnotations ?? [],
37      text: annotations?.fullTextAnnotation?.text ?? '',
38      safeSearch: annotations?.safeSearchAnnotation ?? {},
39    });
40  } catch (error) {
41    return NextResponse.json({ error: 'Vision API call failed' }, { status: 500 });
42  }
43}

1// components/PredictionDashboard.tsx
2'use client';
3import { useState } from 'react';
4
5interface PredictionResult {
6  prediction: number[] | number;
7  deployedModelId?: string;
8}
9
10export function PredictionDashboard() {
11  const [features, setFeatures] = useState({ feature1: 50, feature2: 'A', feature3: 25 });
12  const [result, setResult] = useState<PredictionResult | null>(null);
13  const [loading, setLoading] = useState(false);
14  const [error, setError] = useState<string | null>(null);
15
16  const handlePredict = async () => {
17    setLoading(true);
18    setError(null);
19    try {
20      const response = await fetch('/api/predict', {
21        method: 'POST',
22        headers: { 'Content-Type': 'application/json' },
23        body: JSON.stringify({ features }),
24      });
25
26      if (!response.ok) {
27        const err = await response.json();
28        throw new Error(err.error ?? `API error ${response.status}`);
29      }
30
31      const data = await response.json();
32      setResult(data);
33    } catch (err) {
34      setError(err instanceof Error ? err.message : 'Prediction failed');
35    } finally {
36      setLoading(false);
37    }
38  };
39
40  const getConfidence = () => {
41    if (!result?.prediction) return 0;
42    const pred = Array.isArray(result.prediction) ? result.prediction[1] : result.prediction;
43    return Math.round((pred as number) * 100);
44  };
45
46  const getRiskLabel = (confidence: number) =>
47    confidence >= 70 ? 'High Risk' : confidence >= 40 ? 'Medium Risk' : 'Low Risk';
48
49  return (
50    <div className="max-w-xl mx-auto p-6 space-y-6">
51      <h2 className="text-2xl font-bold">Model Prediction</h2>
52
53      <div className="space-y-4">
54        <div>
55          <label className="block text-sm font-medium mb-1">Feature 1: {features.feature1}</label>
56          <input type="range" min="0" max="100" value={features.feature1}
57            onChange={(e) => setFeatures((f) => ({ ...f, feature1: Number(e.target.value) }))}
58            className="w-full" />
59        </div>
60        <div>
61          <label className="block text-sm font-medium mb-1">Feature 2</label>
62          <select value={features.feature2}
63            onChange={(e) => setFeatures((f) => ({ ...f, feature2: e.target.value }))}
64            className="w-full border rounded px-3 py-2">
65            {['A', 'B', 'C'].map((opt) => <option key={opt}>{opt}</option>)}
66          </select>
67        </div>
68        <button onClick={handlePredict} disabled={loading}
69          className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 disabled:opacity-50">
70          {loading ? 'Predicting...' : 'Run Prediction'}
71        </button>
72      </div>
73
74      {error && <p className="text-red-600 text-sm">{error}</p>}
75
76      {result && (
77        <div className="border rounded-lg p-4 bg-gray-50 space-y-2">
78          <p className="text-lg font-semibold">{getRiskLabel(getConfidence())}</p>
79          <div className="w-full bg-gray-200 rounded-full h-4">
80            <div className="bg-blue-600 h-4 rounded-full transition-all"
81              style={{ width: `${getConfidence()}%` }} />
82          </div>
83          <p className="text-sm text-gray-600">{getConfidence()}% confidence</p>
84        </div>
85      )}
86    </div>
87  );
88}