How to Integrate Bolt.new with Looker

1// lib/looker.ts
2let cachedToken: string | null = null;
3let tokenExpiresAt: number = 0;
4
5export async function getLookerToken(): Promise<string> {
6  // Return cached token if still valid (with 60s buffer)
7  if (cachedToken && Date.now() < tokenExpiresAt - 60_000) {
8    return cachedToken;
9  }
10
11  const baseUrl = process.env.LOOKER_BASE_URL;
12  const response = await fetch(`${baseUrl}/api/4.0/login`, {
13    method: 'POST',
14    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
15    body: new URLSearchParams({
16      client_id: process.env.LOOKER_CLIENT_ID!,
17      client_secret: process.env.LOOKER_CLIENT_SECRET!,
18    }),
19  });
20
21  if (!response.ok) {
22    throw new Error(`Looker auth failed: ${response.status} ${await response.text()}`);
23  }
24
25  const data = await response.json();
26  cachedToken = data.access_token;
27  tokenExpiresAt = Date.now() + data.token_ttl * 1000;
28  return cachedToken!;
29}

1// app/api/looker/look/[lookId]/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { getLookerToken } from '@/lib/looker';
4
5export async function GET(
6  request: NextRequest,
7  { params }: { params: { lookId: string } }
8) {
9  const { lookId } = params;
10  const baseUrl = process.env.LOOKER_BASE_URL;
11
12  try {
13    const token = await getLookerToken();
14    const response = await fetch(
15      `${baseUrl}/api/4.0/looks/${lookId}/run/json`,
16      {
17        headers: {
18          'Authorization': `token ${token}`,
19          'Content-Type': 'application/json',
20        },
21      }
22    );
23
24    if (response.status === 401) {
25      // Token expired — this shouldn't happen with caching, but handle it
26      return NextResponse.json(
27        { error: 'Looker authentication expired. Please retry.' },
28        { status: 401 }
29      );
30    }
31
32    if (!response.ok) {
33      const text = await response.text();
34      return NextResponse.json(
35        { error: `Looker API error: ${response.status}`, detail: text },
36        { status: response.status }
37      );
38    }
39
40    const data = await response.json();
41    return NextResponse.json({ data, count: data.length });
42  } catch (error) {
43    return NextResponse.json(
44      { error: 'Failed to fetch Look results' },
45      { status: 500 }
46    );
47  }
48}

1// app/api/looker/embed-url/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import * as crypto from 'crypto';
4
5function sign(stringToSign: string, secret: string): string {
6  return crypto.createHmac('sha1', secret).update(stringToSign).digest('hex');
7}
8
9export async function POST(request: NextRequest) {
10  const { dashboardId, externalUserId, userDisplayName } = await request.json();
11  const secret = process.env.LOOKER_EMBED_SECRET!;
12  const baseUrl = process.env.LOOKER_BASE_URL!;
13  const host = new URL(baseUrl).host;
14
15  const nonce = crypto.randomBytes(16).toString('hex');
16  const time = Math.floor(Date.now() / 1000);
17  const sessionLength = 3600; // 1 hour
18  const embedPath = `/embed/dashboards/${dashboardId}`;
19
20  const permissions = JSON.stringify(['access_data', 'see_looks', 'see_user_dashboards']);
21  const models = JSON.stringify(['all']); // Or specific model names
22  const userAttributes = JSON.stringify({});
23  const accessFilters = JSON.stringify({});
24
25  const stringToSign = [
26    host,
27    embedPath,
28    nonce,
29    time,
30    sessionLength,
31    externalUserId,
32    permissions,
33    models,
34    userAttributes,
35    accessFilters,
36    userDisplayName,
37    '', // group_ids
38    '', // external_group_id
39  ].join('\n');
40
41  const signature = sign(stringToSign, secret);
42
43  const params = new URLSearchParams({
44    nonce,
45    time: time.toString(),
46    session_length: sessionLength.toString(),
47    external_user_id: externalUserId,
48    permissions,
49    models,
50    user_attributes: userAttributes,
51    access_filters: accessFilters,
52    first_name: userDisplayName.split(' ')[0] || userDisplayName,
53    last_name: userDisplayName.split(' ')[1] || '',
54    force_logout_login: 'true',
55    signature,
56  });
57
58  const embedUrl = `${baseUrl}/login/embed/${encodeURIComponent(embedPath)}?${params.toString()}`;
59  return NextResponse.json({ embedUrl });
60}

1// components/LookerChart.tsx
2import { useState, useEffect } from 'react';
3import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
4
5interface LookerBarChartProps {
6  lookId: string;
7  xField: string;
8  yField: string;
9  xLabel?: string;
10  yLabel?: string;
11}
12
13export function LookerBarChart({ lookId, xField, yField, xLabel, yLabel }: LookerBarChartProps) {
14  const [data, setData] = useState<Record<string, unknown>[]>([]);
15  const [loading, setLoading] = useState(true);
16  const [error, setError] = useState<string | null>(null);
17
18  useEffect(() => {
19    fetch(`/api/looker/look/${lookId}`)
20      .then(res => res.json())
21      .then(({ data: rawData, error }) => {
22        if (error) { setError(error); return; }
23        // Normalize Looker field names to simple keys
24        const normalized = rawData.map((row: Record<string, unknown>) => ({
25          x: row[xField],
26          y: Number(row[yField]) || 0,
27        }));
28        setData(normalized);
29      })
30      .catch(err => setError(err.message))
31      .finally(() => setLoading(false));
32  }, [lookId, xField, yField]);
33
34  if (loading) return <div className="h-64 bg-gray-100 animate-pulse rounded" />;
35  if (error) return <div className="text-red-500">Error loading chart: {error}</div>;
36
37  return (
38    <ResponsiveContainer width="100%" height={300}>
39      <BarChart data={data}>
40        <CartesianGrid strokeDasharray="3 3" />
41        <XAxis dataKey="x" label={{ value: xLabel, position: 'insideBottom', offset: -5 }} />
42        <YAxis label={{ value: yLabel, angle: -90, position: 'insideLeft' }} />
43        <Tooltip />
44        <Bar dataKey="y" fill="#3b82f6" />
45      </BarChart>
46    </ResponsiveContainer>
47  );
48}