How to Integrate Looker with V0

Open V0 and design the page that will host your embedded Looker dashboard. This involves two parts: the surrounding application chrome (navigation, filter controls, header) and a placeholder container for the Looker iframe. At this stage, V0 doesn't know about Looker — you're building the frame that will surround the embedded dashboard. Describe the layout clearly to V0. A typical analytics portal page has a fixed navigation header with your app's branding, a filter bar below the header with date pickers and dimension selectors, a main content area that will hold the Looker iframe, and optionally a sidebar or bottom section with supplementary metrics pulled from the Looker API. Ask V0 to create the placeholder container as a div with a specific height (Looker dashboards need an explicit height to render properly — a good default is at least 600px or a full viewport height calculation). Also ask for a loading state that shows while the Looker Embed SDK initializes, since there's a brief delay before the dashboard becomes interactive. The filter controls V0 generates will later pass values to the embedded Looker dashboard via the Embed SDK's postMessage interface. Design the filters to match your Looker dashboard's filter fields — the filter field names need to match exactly what Looker expects.

Looker's Signed SSO embedding requires your server to generate a cryptographically signed URL for each embed session. The URL encodes the user's identity, their Looker permissions, any dashboard filters, and a timestamp — Looker verifies the signature before serving the embedded content. This signing process must happen server-side because it requires your Looker embed secret key. Create an API route at app/api/looker/embed-url/route.ts. The route uses the @looker/embed-sdk package or manual HMAC-SHA1 signing (the Looker embed URL format uses SHA1, not SHA256). The signed URL construction involves: the embed path (e.g., /embed/dashboards/42), the host domain of your application, the user's external ID and name, permissions array, model access, user attributes for row-level security, a session length in seconds, and a current timestamp. All these parameters are assembled into a specific query string, then HMAC-SHA1 signed with your embed secret. Install the @looker/embed-sdk package which includes URL generation utilities. Alternatively, build the URL manually using Node's crypto module with createHmac('sha1', embedSecret). The embed SDK approach is less error-prone because the parameter ordering is critical for the signature to validate — any deviation causes Looker to reject the embed with a 'Signature check failed' error. Return the signed URL from the API route. The frontend will use this URL as the src for the Looker Embed SDK's iframe initialization. Include an expiration check — signed URLs are only valid for the session_length you specify (typically 600 seconds for a 10-minute session), after which the dashboard will prompt for re-authentication.

1import { NextRequest, NextResponse } from 'next/server';
2import crypto from 'crypto';
3
4function signLookerUrl(params: {
5  host: string;
6  embedSecret: string;
7  dashboardId: string;
8  externalUserId: string;
9  userName: string;
10  permissions: string[];
11  models: string[];
12  sessionLength: number;
13  filters?: Record<string, string>;
14}): string {
15  const { host, embedSecret, dashboardId, externalUserId, userName, permissions, models, sessionLength, filters } = params;
16
17  const nonce = crypto.randomBytes(16).toString('hex');
18  const time = Math.floor(Date.now() / 1000);
19  const embedPath = `/embed/dashboards/${dashboardId}`;
20
21  const filterParams = filters
22    ? '?' + new URLSearchParams(filters).toString()
23    : '';
24
25  const stringToSign = [
26    host,
27    embedPath + filterParams,
28    nonce,
29    time.toString(),
30    sessionLength.toString(),
31    externalUserId,
32    userName,
33    JSON.stringify(permissions),
34    JSON.stringify(models),
35    '{}', // group_ids
36    '{}', // external_group_id
37    '{}', // user_attributes
38    '', // access_filters
39  ].join('\n');
40
41  const signature = crypto
42    .createHmac('sha1', embedSecret)
43    .update(stringToSign)
44    .digest('base64');
45
46  const url = new URL(`https://${host}${embedPath}${filterParams}`);
47  url.searchParams.set('nonce', nonce);
48  url.searchParams.set('time', time.toString());
49  url.searchParams.set('session_length', sessionLength.toString());
50  url.searchParams.set('external_user_id', externalUserId);
51  url.searchParams.set('first_name', userName.split(' ')[0]);
52  url.searchParams.set('last_name', userName.split(' ').slice(1).join(' '));
53  url.searchParams.set('permissions', JSON.stringify(permissions));
54  url.searchParams.set('models', JSON.stringify(models));
55  url.searchParams.set('signature', signature);
56
57  return url.toString();
58}
59
60export async function GET(req: NextRequest) {
61  const { searchParams } = new URL(req.url);
62  const dashboardId = searchParams.get('dashboard_id') ?? '1';
63
64  const embedSecret = process.env.LOOKER_EMBED_SECRET;
65  const host = process.env.LOOKER_HOST;
66
67  if (!embedSecret || !host) {
68    return NextResponse.json({ error: 'Looker credentials not configured' }, { status: 500 });
69  }
70
71  const embedUrl = signLookerUrl({
72    host,
73    embedSecret,
74    dashboardId,
75    externalUserId: 'user-001',
76    userName: 'Dashboard User',
77    permissions: ['access_data', 'see_looks', 'see_user_dashboards', 'explore'],
78    models: ['all'],
79    sessionLength: 600,
80  });
81
82  return NextResponse.json({ embedUrl });
83}

Now connect the V0-generated dashboard container to Looker using the Embed SDK. Install @looker/embed-sdk and initialize it in a 'use client' component. The Embed SDK manages the iframe lifecycle, cross-origin messaging between your app and the Looker iframe, and filter synchronization. In your component, fetch the signed embed URL from your API route and then initialize the Embed SDK targeting the container div. The SDK's LookerEmbedSDK.init() method takes your Looker host, and then you chain builder methods to specify the dashboard ID, container element, filter values, and event handlers. The most powerful feature of the Embed SDK is bidirectional communication. You can send filter updates to the Looker dashboard without reloading the iframe using dashboard.send('dashboard:filters:update', { filters }). You can also listen for events from the Looker dashboard — when a user clicks a data point, Looker fires a drilldown event that your app can intercept to show additional detail in your own components. Handle the iframe initialization in a useEffect that runs once on mount. The Embed SDK is not SSR-compatible (it uses window and document), so the component must be a client component. Pass the container ref to the SDK's appendTo() method. Clean up by storing the dashboard connection and calling dashboard.disconnect() when the component unmounts to prevent memory leaks. For the filter controls you designed in Step 1, wire the filter state to dashboard.send('dashboard:filters:update') calls — each time the user changes a filter, the embedded Looker dashboard updates without a full reload.

1'use client';
2
3import { useEffect, useRef, useState } from 'react';
4import { LookerEmbedSDK } from '@looker/embed-sdk';
5
6interface LookerDashboardProps {
7  dashboardId: string;
8  filters?: Record<string, string>;
9}
10
11export default function LookerDashboard({ dashboardId, filters = {} }: LookerDashboardProps) {
12  const containerRef = useRef<HTMLDivElement>(null);
13  const [loading, setLoading] = useState(true);
14  const [error, setError] = useState<string | null>(null);
15
16  useEffect(() => {
17    const lookerHost = process.env.NEXT_PUBLIC_LOOKER_HOST;
18    if (!lookerHost || !containerRef.current) return;
19
20    LookerEmbedSDK.init(lookerHost, '/api/looker/auth');
21
22    LookerEmbedSDK.createDashboardWithId(dashboardId)
23      .appendTo(containerRef.current)
24      .withFilters(filters)
25      .on('dashboard:run:complete', () => setLoading(false))
26      .build()
27      .connect()
28      .then(() => setLoading(false))
29      .catch((err) => {
30        setError('Failed to connect to Looker');
31        console.error(err);
32      });
33  }, [dashboardId]);
34
35  return (
36    <div style={{ position: 'relative', height: '700px' }}>
37      {loading && (
38        <div className="absolute inset-0 flex items-center justify-center bg-white">
39          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
40        </div>
41      )}
42      {error && <div className="p-4 text-red-600">{error}</div>}
43      <div ref={containerRef} style={{ height: '100%', width: '100%' }} />
44    </div>
45  );
46}

Looker embedding requires three environment variables. Two are server-only secrets used by your API route to generate signed embed URLs. One is a public variable needed by the Embed SDK running in the browser. The server-only variables are LOOKER_EMBED_SECRET (the embed secret from Looker Admin → Platform → Embedding → Embed Secret) and LOOKER_API_CLIENT_SECRET (the API key secret from Admin → Users → API Keys). Never add the NEXT_PUBLIC_ prefix to these — they're cryptographic secrets that must not appear in the browser. The public variable is NEXT_PUBLIC_LOOKER_HOST — your Looker instance hostname (e.g., yourcompany.cloud.looker.com without the https:// prefix). The Embed SDK needs this value client-side to initialize the cross-origin messaging channel. In the Vercel Dashboard, go to your project → Settings → Environment Variables. Add all three variables for both Production and Preview environments. For Preview environments, you can use the same Looker instance but consider restricting the Preview user's permissions in the embed URL generation to read-only access. After adding variables, trigger a redeployment. Visit the deployed URL and verify the Looker dashboard loads. If you see a blank iframe or 'Access Denied' from Looker, check that your deployed domain is in the Looker embed allowlist (Admin → Platform → Embedding → Embedded Domain Allowlist) and that the LOOKER_EMBED_SECRET matches exactly what Looker shows in the admin panel. For complex permission setups across multiple customer accounts, RapidDev can help structure the user attribute system for row-level security.

1# .env.local — never commit this file
2# Server-only Looker credentials (no NEXT_PUBLIC_ prefix)
3LOOKER_EMBED_SECRET=abc123...
4LOOKER_API_CLIENT_ID=xyz789
5LOOKER_API_CLIENT_SECRET=def456...
6LOOKER_HOST=yourcompany.cloud.looker.com
7
8# Public — needed by Embed SDK in browser
9NEXT_PUBLIC_LOOKER_HOST=yourcompany.cloud.looker.com