How to Integrate Bolt.new with Tableau

1// components/TableauEmbed.tsx
2'use client';
3import { useEffect, useRef } from 'react';
4
5interface TableauEmbedProps {
6  viewUrl: string;
7  height?: number;
8  filters?: Record<string, string>;
9  token?: string; // Optional: Connected App token for SSO
10}
11
12export function TableauEmbed({
13  viewUrl,
14  height = 600,
15  filters = {},
16  token,
17}: TableauEmbedProps) {
18  const containerRef = useRef<HTMLDivElement>(null);
19
20  useEffect(() => {
21    // Load Tableau Embedding API v3
22    if (!document.querySelector('script[src*="tableau.embedding.3"]')) {
23      const script = document.createElement('script');
24      script.type = 'module';
25      script.src =
26        'https://embedding.tableauusercontent.com/tableau.embedding.3.latest.min.js';
27      document.head.appendChild(script);
28    }
29  }, []);
30
31  // Build filter parameters as URL query string
32  const filterParams = Object.entries(filters)
33    .map(([key, value]) => `:${key}=${encodeURIComponent(value)}`)
34    .join('&');
35
36  const finalUrl = filterParams ? `${viewUrl}?${filterParams}` : viewUrl;
37
38  return (
39    <div ref={containerRef} style={{ width: '100%' }}>
40      {/* @ts-ignore — custom element not in TS types */}
41      <tableau-viz
42        src={finalUrl}
43        height={`${height}px`}
44        width="100%"
45        toolbar="bottom"
46        hide-tabs
47        {...(token ? { token } : {})}
48      />
49    </div>
50  );
51}
52
53// Usage in a page:
54// <TableauEmbed
55//   viewUrl="https://public.tableau.com/views/WorldIndicators/GDPpercapita"
56//   height={700}
57//   filters={{ 'Region': 'Europe' }}
58// />

1// app/api/tableau/embed-token/route.ts
2import { NextResponse } from 'next/server';
3import { SignJWT } from 'jose';
4import { randomUUID } from 'crypto';
5
6export async function GET() {
7  const clientId = process.env.TABLEAU_CONNECTED_APP_CLIENT_ID!;
8  const secretKey = process.env.TABLEAU_CONNECTED_APP_SECRET_KEY!;
9  const secretId = process.env.TABLEAU_CONNECTED_APP_SECRET_ID!;
10
11  const secret = new TextEncoder().encode(secretKey);
12
13  // JWT claims required by Tableau Connected Apps
14  const token = await new SignJWT({
15    jti: randomUUID(),
16    iss: clientId,
17    sub: 'user@yourcompany.com', // Replace with actual user identifier
18    aud: 'tableau',
19    scp: ['tableau:views:embed'], // Embedding scope
20  })
21    .setProtectedHeader({ alg: 'HS256', kid: secretId, iss: 'tableau' })
22    .setIssuedAt()
23    .setExpirationTime('10m')
24    .sign(secret);
25
26  return NextResponse.json({ token });
27}

1// lib/tableau-rest.ts
2interface TableauSession {
3  token: string;
4  siteId: string;
5  expiresAt: number;
6}
7
8let session: TableauSession | null = null;
9
10const BASE_URL = process.env.TABLEAU_SERVER_URL!; // e.g., https://prod-useast.online.tableau.com
11const SITE_NAME = process.env.TABLEAU_SITE_NAME ?? ''; // Empty string for default site
12const API_VERSION = '3.22';
13
14export async function getTableauSession(): Promise<TableauSession> {
15  if (session && Date.now() < session.expiresAt - 300_000) return session;
16
17  const response = await fetch(`${BASE_URL}/api/${API_VERSION}/auth/signin`, {
18    method: 'POST',
19    headers: {
20      'Content-Type': 'application/json',
21      Accept: 'application/json',
22    },
23    body: JSON.stringify({
24      credentials: {
25        personalAccessTokenName: process.env.TABLEAU_PAT_NAME!,
26        personalAccessTokenSecret: process.env.TABLEAU_PAT_SECRET!,
27        site: { contentUrl: SITE_NAME },
28      },
29    }),
30  });
31
32  if (!response.ok) throw new Error(`Tableau sign-in failed: ${response.status}`);
33
34  const data = await response.json();
35  session = {
36    token: data.credentials.token,
37    siteId: data.credentials.site.id,
38    expiresAt: Date.now() + 4 * 60 * 60 * 1000, // 4 hours
39  };
40  return session;
41}
42
43// app/api/tableau/workbooks/route.ts
44import { NextResponse } from 'next/server';
45import { getTableauSession } from '@/lib/tableau-rest';
46
47export async function GET() {
48  const { token, siteId } = await getTableauSession();
49
50  const response = await fetch(
51    `${process.env.TABLEAU_SERVER_URL}/api/3.22/sites/${siteId}/workbooks?pageSize=100`,
52    {
53      headers: {
54        'x-tableau-auth': token,
55        Accept: 'application/json',
56      },
57    }
58  );
59
60  const data = await response.json();
61  return NextResponse.json({
62    workbooks: data.workbooks?.workbook ?? [],
63    total: data.workbooks?.pagination?.totalAvailable ?? 0,
64  });
65}