Add Puppeteer and /embed route

package.json

@@ -20,6 +20,7 @@
   },
   "scripts": {
     ":build": "npx rimraf ./build && esbuild src/index.ts --bundle --packages=external --platform=node --format=esm --minify --outdir=build --sourcemap",
+    ":build:dev": "npx rimraf ./build && esbuild src/index.ts --bundle --packages=external --platform=node --format=esm --outdir=build --sourcemap",
     "build": "run-s :build exec-perms",
     "build:watch": "npm run :build -- --watch",
     "build:docker": "docker build -t tableau-mcp .",
@@ -54,6 +55,7 @@
     "express": "^5.1.0",
     "fast-levenshtein": "^3.0.0",
     "jose": "^6.0.12",
+    "puppeteer": "^24.23.0",
     "ts-results-es": "^5.0.1",
     "zod": "^3.24.3",
     "zod-validation-error": "^4.0.1"
@@ -63,6 +65,7 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.25.1",
     "@modelcontextprotocol/inspector": "^0.16.6",
+    "@tableau/embedding-api": "^3.14.2",
     "@types/cors": "^2.8.19",
     "@types/eslint__js": "^8.42.3",
     "@types/express": "^5.0.3",

src/config.ts

@@ -31,6 +31,7 @@ export class Config {
   maxResultLimit: number | null;
   disableQueryDatasourceFilterValidation: boolean;
   disableMetadataApiRequests: boolean;
+  useHeadedBrowser: boolean;
 
   constructor() {
     const cleansedVars = removeClaudeMcpBundleUserConfigTemplates(process.env);
@@ -58,6 +59,7 @@ export class Config {
       MAX_RESULT_LIMIT: maxResultLimit,
       DISABLE_QUERY_DATASOURCE_FILTER_VALIDATION: disableQueryDatasourceFilterValidation,
       DISABLE_METADATA_API_REQUESTS: disableMetadataApiRequests,
+      USE_HEADED_BROWSER: useHeadedBrowser,
     } = cleansedVars;
 
     const defaultPort = 3927;
@@ -76,6 +78,7 @@ export class Config {
     this.disableLogMasking = disableLogMasking === 'true';
     this.disableQueryDatasourceFilterValidation = disableQueryDatasourceFilterValidation === 'true';
     this.disableMetadataApiRequests = disableMetadataApiRequests === 'true';
+    this.useHeadedBrowser = useHeadedBrowser === 'true';
 
     const maxResultLimitNumber = maxResultLimit ? parseInt(maxResultLimit) : NaN;
     this.maxResultLimit =

src/index.ts

@@ -1,11 +1,13 @@
 #!/usr/bin/env node
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import dotenv from 'dotenv';
+import express from 'express';
 
 import { getConfig } from './config.js';
 import { isLoggingLevel, log, setLogLevel, writeToStderr } from './logging/log.js';
 import { Server, serverName, serverVersion } from './server.js';
 import { startExpressServer } from './server/express.js';
+import { embedHtml } from './tools/views/embed.html.js';
 import { getExceptionMessage } from './utils/getExceptionMessage.js';
 
 async function startServer(): Promise<void> {
@@ -20,6 +22,17 @@ async function startServer(): Promise<void> {
       server.registerTools();
       server.registerRequestHandlers();
 
+      const app = express();
+
+      app.get('/embed', (req, res) => {
+        res.set('Content-Type', 'text/html');
+        res.send(Buffer.from(embedHtml));
+      });
+
+      app.listen(config.httpPort, () => {
+        log.info(server, `Embed server running on port ${config.httpPort}`);
+      });
+
       const transport = new StdioServerTransport();
       await server.connect(transport);
 

src/restApiInstance.ts

@@ -16,6 +16,7 @@ import {
 import RestApi from './sdks/tableau/restApi.js';
 import { Server } from './server.js';
 import { getExceptionMessage } from './utils/getExceptionMessage.js';
+import { getJwtAdditionalPayload, getJwtSubClaim } from './utils/getJwt.js';
 import { isAxiosError } from './utils/isAxiosError.js';
 
 type JwtScopes =
@@ -196,12 +197,3 @@ function logResponse(
 
   log.info(server, messageObj, { logger: 'rest-api', requestId });
 }
-
-function getJwtSubClaim(config: Config): string {
-  return config.jwtSubClaim;
-}
-
-function getJwtAdditionalPayload(config: Config): Record<string, unknown> {
-  const json = config.jwtAdditionalPayload;
-  return JSON.parse(json || '{}');
-}

src/server/express.ts

@@ -9,6 +9,7 @@ import https from 'https';
 import { Config } from '../config.js';
 import { setLogLevel } from '../logging/log.js';
 import { Server } from '../server.js';
+import { embedHtml } from '../tools/views/embed.html.js';
 
 export async function startExpressServer({
   basePath,
@@ -43,6 +44,10 @@ export async function startExpressServer({
   app.post(path, createMcpServer);
   app.get(path, methodNotAllowed);
   app.delete(path, methodNotAllowed);
+  app.get('/embed', (req, res) => {
+    res.set('Content-Type', 'text/html');
+    res.send(Buffer.from(embedHtml));
+  });
 
   const useSsl = !!(config.sslKey && config.sslCert);
   if (!useSsl) {

src/tools/toolName.ts

@@ -14,6 +14,7 @@ export const toolNames = [
   'list-pulse-metric-subscriptions',
   'generate-pulse-metric-value-insight-bundle',
   'search-content',
+  'embed-workbook',
 ] as const;
 export type ToolName = (typeof toolNames)[number];
 
@@ -23,6 +24,7 @@ export const toolGroupNames = [
   'view',
   'pulse',
   'content-exploration',
+  'embedding',
 ] as const;
 export type ToolGroupName = (typeof toolGroupNames)[number];
 
@@ -39,6 +41,7 @@ export const toolGroups = {
     'generate-pulse-metric-value-insight-bundle',
   ],
   'content-exploration': ['search-content'],
+  embedding: ['embed-workbook'],
 } as const satisfies Record<ToolGroupName, Array<ToolName>>;
 
 export function isToolName(value: unknown): value is ToolName {

src/tools/views/embed.html.ts

@@ -0,0 +1,82 @@
+export const embedHtml = String.raw`<html>
+
+<head>
+  <style>
+    html, body, tableau-viz, tableau-authoring-viz, tableau-pulse {
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <tableau-viz id="viz"></tableau-viz>
+  <script type="module">
+    function showSuccess(message) {
+      const div = document.createElement('div');
+      div.id = 'success';
+      div.textContent = message;
+      div.style.display = 'none';
+      document.body.prepend(div);
+    }
+
+    function showError(message) {
+      const div = document.createElement('div');
+      div.id = 'error';
+      div.textContent = message;
+      div.style.display = 'none';
+      document.body.prepend(div);
+    }
+
+    function getExceptionMessage(error) {
+      if (typeof error === 'string') {
+        return error;
+      }
+
+      if (error instanceof Error) {
+        return error.message;
+      }
+
+      try {
+        return JSON.stringify(error) ?? 'undefined';
+      } catch {
+        return ${'`${error}`'};
+      }
+    }
+
+    const urlParams = new URLSearchParams(window.location.hash.substring(1));
+    const url = urlParams.get('url');
+    const token = urlParams.get('token');
+    const parsedUrl = new URL(url);
+
+    (async () => {
+      const { TableauEventType } = await import(${'`${parsedUrl.origin}'}/javascripts/api/tableau.embedding.3.latest.js${'`'});
+
+      viz.token = token;
+      viz.src = parsedUrl.toString();
+      document.body.appendChild(viz);
+
+      try {
+        await new Promise((resolve, reject) => {
+          const timeout = setTimeout(() => reject('firstinteractive event did not fire within 30 seconds'), 30000);
+
+          viz.addEventListener(TableauEventType.FirstInteractive, () => {
+            showSuccess('Viz is interactive!');
+            clearTimeout(timeout);
+            resolve();
+          });
+
+          viz.addEventListener(TableauEventType.VizLoadError, (e) => {
+            const detail = JSON.parse(e.detail.message);
+            clearTimeout(timeout);
+            reject(JSON.stringify({ status: detail.statusCode, errorCodes: JSON.parse(detail.errorMessage).result.errors.map(({ code }) => code) }));
+          });
+        });
+      } catch (e) {
+        showError(getExceptionMessage(e));
+      }
+    })();
+  </script>
+</body>
+
+</html>`;