How to Integrate Tableau with V0

Open V0 at v0.dev and describe the analytics portal interface you want to build around your Tableau dashboards. The portal needs a container for the embedded visualization plus surrounding UI elements — navigation, filter controls, dashboard selectors, and metadata display. The embedded Tableau view renders inside a designated div or custom element, so ask V0 to include a prominent content area with an id attribute (like id='tableau-viz-container') where the visualization will be injected. For the sidebar or navigation, describe the dashboard list structure including how you want to navigate between workbooks. For custom filter controls (one of the main reasons to build a custom portal), describe each filter widget (dropdowns, date pickers, multi-selects) and tell V0 they call a handleFilterChange function when changed — you will implement this function using Tableau's API in the next step. The container for the embedded Tableau view should have explicit dimensions (width and height) since the Tableau embed needs a sized container to render correctly. After generating, push to GitHub via V0's Git panel.

The Tableau Embedding API v3 uses a web component approach — you load the Tableau JavaScript library from a CDN or npm package, then use a `<tableau-viz>` custom HTML element with attributes specifying the workbook URL, size, and authentication token. In Next.js, this requires careful handling since web components use browser APIs not available during server rendering. Create a Client Component that loads the Tableau embedding library dynamically and renders the viz. The official approach is to install @salesforce/tableau-embedding-sdk from npm and use the TableauViz class, or alternatively load the library via a script tag and use the custom element directly. Authentication for embedded views uses JSON Web Tokens (JWTs) generated server-side with your Connected App credentials — this is the recommended approach for Tableau Embedding API v3. The JWT includes your client ID, secret ID, secret value, and the Tableau username to authenticate as. Your Next.js API route generates this token, and the client component passes it to the embedded viz as the token prop. The `<tableau-viz>` element accepts src (the workbook view URL), token, width, height, hide-toolbar (boolean), and hide-tabs (boolean) as attributes. You can also use the JavaScript API to interact with the viz after it loads: applying filters with workbook.applyFilterAsync(), changing parameters, getting selected marks, and subscribing to events like filter changes and marks selection.

1// components/TableauEmbed.tsx
2'use client';
3
4import { useEffect, useRef } from 'react';
5
6interface TableauEmbedProps {
7  workbookUrl: string;
8  token: string;
9  height?: number;
10  hideToolbar?: boolean;
11  hideTabs?: boolean;
12  onFilter?: (field: string, values: string[]) => void;
13}
14
15declare global {
16  namespace JSX {
17    interface IntrinsicElements {
18      'tableau-viz': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
19        src?: string;
20        token?: string;
21        width?: string;
22        height?: string;
23        'hide-toolbar'?: string;
24        'hide-tabs'?: string;
25      };
26    }
27  }
28}
29
30export function TableauEmbed({
31  workbookUrl,
32  token,
33  height = 700,
34  hideToolbar = false,
35  hideTabs = false,
36}: TableauEmbedProps) {
37  const containerRef = useRef<HTMLDivElement>(null);
38
39  useEffect(() => {
40    // Load the Tableau Embedding API v3 script dynamically
41    if (!document.querySelector('script[data-tableau-embed]')) {
42      const script = document.createElement('script');
43      const baseUrl = workbookUrl.split('/views/')[0];
44      script.src = `${baseUrl}/javascripts/api/tableau.embedding.3.latest.min.js`;
45      script.type = 'module';
46      script.setAttribute('data-tableau-embed', 'true');
47      document.head.appendChild(script);
48    }
49  }, [workbookUrl]);
50
51  if (!workbookUrl) {
52    return (
53      <div className="flex items-center justify-center h-96 bg-muted rounded-lg">
54        <p className="text-muted-foreground">Select a dashboard to view</p>
55      </div>
56    );
57  }
58
59  return (
60    <div ref={containerRef} className="w-full rounded-lg overflow-hidden border">
61      <tableau-viz
62        src={workbookUrl}
63        token={token}
64        width="100%"
65        height={String(height)}
66        hide-toolbar={hideToolbar ? 'true' : undefined}
67        hide-tabs={hideTabs ? 'true' : undefined}
68      />
69    </div>
70  );
71}

Create two API routes: one for generating Tableau JWT tokens for embedding authentication, and one for querying the Tableau REST API for workbook lists and metadata. The JWT token route is security-critical — it signs a token with your Connected App credentials that grants the specified Tableau user access to embedded views. Use the jsonwebtoken npm package to create the JWT. The token payload includes the Tableau username (the user in your Tableau account to authenticate as), your Connected App client ID, and a scopes array specifying permissions (tableau:views:embed is the minimum for embedding). The token expires quickly (5-10 minutes) for security, so your frontend should refresh it before it expires when users are actively viewing dashboards. The workbooks REST API route uses your Tableau Server authentication (username + password or personal access token) to call the Tableau REST API and retrieve the list of published workbooks, their view URLs, thumbnails, and metadata. Tableau's REST API uses session-based auth — you sign in to get a token, use it for subsequent requests, then sign out. For the workbooks list, call POST /api/sessions to authenticate, then GET /api/sites/{siteId}/workbooks to list workbooks with their views and permissions.

1// app/api/tableau/token/route.ts
2import { NextResponse } from 'next/server';
3import { SignJWT } from 'jose';
4
5export async function GET() {
6  const clientId = process.env.TABLEAU_CONNECTED_APP_CLIENT_ID;
7  const secretId = process.env.TABLEAU_CONNECTED_APP_SECRET_ID;
8  const secretValue = process.env.TABLEAU_CONNECTED_APP_SECRET_VALUE;
9  const tableauUsername = process.env.TABLEAU_EMBED_USERNAME;
10
11  if (!clientId || !secretId || !secretValue || !tableauUsername) {
12    return NextResponse.json({ error: 'Tableau credentials not configured' }, { status: 500 });
13  }
14
15  try {
16    // Generate JWT for Tableau Connected App embedding
17    const secret = new TextEncoder().encode(secretValue);
18    const now = Math.floor(Date.now() / 1000);
19
20    const token = await new SignJWT({
21      sub: tableauUsername,
22      iss: clientId,
23      jti: crypto.randomUUID(),
24      aud: 'tableau',
25      scp: ['tableau:views:embed', 'tableau:views:embed_authoring'],
26    })
27      .setProtectedHeader({ alg: 'HS256', kid: secretId, iss: clientId })
28      .setIssuedAt(now)
29      .setExpirationTime(now + 300) // 5 minute expiry
30      .sign(secret);
31
32    return NextResponse.json({ token, expiresAt: now + 300 });
33  } catch (error) {
34    const message = error instanceof Error ? error.message : 'Unknown error';
35    console.error('Tableau token generation failed:', message);
36    return NextResponse.json({ error: message }, { status: 500 });
37  }
38}

Configure all Tableau credentials in Vercel before deploying. Open the Vercel Dashboard, navigate to your project, and go to Settings → Environment Variables. Add the following server-only variables (no NEXT_PUBLIC_ prefix): TABLEAU_CONNECTED_APP_CLIENT_ID (the Client ID of your Connected App from Tableau Site Settings → Connected Apps), TABLEAU_CONNECTED_APP_SECRET_ID (the Secret ID from the Connected App), TABLEAU_CONNECTED_APP_SECRET_VALUE (the secret value — treat this as a password, it signs your embedding tokens), TABLEAU_EMBED_USERNAME (the Tableau username to authenticate embedded sessions as — typically a service account user), TABLEAU_SERVER_URL (your Tableau Server or Cloud URL, e.g., https://prod-useast-a.online.tableau.com), and TABLEAU_SITE_ID (your Tableau site's name, found in the URL when logged in). If you're also using the Tableau REST API for workbook listing, add TABLEAU_API_TOKEN (a Personal Access Token from your Tableau profile settings). Set all variables for Production, Preview, and Development, then save and trigger a redeployment. For complex multi-tenant analytics portals where different users see different workbooks, RapidDev's team can help implement row-level security and user-scoped workbook access on top of this embedding pattern. After deploying, open your live URL and verify an embedded Tableau visualization loads correctly.