README.md

docker run -d -p 3000:3000 --name metabase metabase/metabase-enterprise:v1.50.24
java -jar metabase.jar
const metabaseConfig = {
    ...
    apiKey: "YOUR_API_KEY"
    ...
};
const express = require("express");

const jwt = require("jsonwebtoken");
const fetch = require("node-fetch");

async function metabaseAuthHandler(req, res) {
    const {user} = req.session;

    if (!user) {
        return res.status(401).json({
            status: "error",
            message: "not authenticated",
        });
    }

    const token = jwt.sign(
        {
            email: user.email,
            first_name: user.firstName,
            last_name: user.lastName,
            groups: [user.group],
            exp: Math.round(Date.now() / 1000) + 60 * 10, // 10 minutes expiration
        },
        // This is the JWT signing secret in your Metabase JWT authentication setting
        METABASE_JWT_SHARED_SECRET,
    );
    const ssoUrl = `${METABASE_INSTANCE_URL}/auth/sso?token=true&jwt=${token}`;

    try {
        const response = await fetch(ssoUrl, {method: "GET"});
        const token = await response.json();

        return res.status(200).json(token);
    } catch (error) {
        if (error instanceof Error) {
            res.status(401).json({
                status: "error",
                message: "authentication failed",
                error: error.message,
            });
        }
    }
}

const app = express();

// Middleware

// If your FE application is on a different domain from your BE, you need to enable CORS
// by setting Access-Control-Allow-Credentials to true and Access-Control-Allow-Origin
// to your FE application URL.
//
// Limitation: We currently only support setting one origin in Authorized Origins in Metabase for CORS.
app.use(
    cors({
        credentials: true,
    }),
);

app.use(
    session({
        secret: SESSION_SECRET,
        resave: false,
        saveUninitialized: true,
        cookie: {secure: false},
    }),
);
app.use(express.json());

// routes
app.get("/sso/metabase", metabaseAuthHandler);
app.listen(PORT, () => {
    console.log(`API running at http://localhost:${PORT}`);
});
npm install @metabase/embedding-sdk-react
yarn add @metabase/embedding-sdk-react
import React from "react";
import {MetabaseProvider, defineEmbeddingSdkConfig, defineEmbeddingSdkTheme} from "@metabase/embedding-sdk-react";

// Configuration
const config = defineEmbeddingSdkConfig({
    metabaseInstanceUrl: "https://metabase.example.com", // Required: Your Metabase instance URL
    jwtProviderUri: "https://app.example.com/sso/metabase", // Required: An endpoint in your app that returns signs the user in and delivers a token
});

// See the "Customizing appearance" section for more information
const theme = defineEmbeddingSdkTheme({
    // Optional: Specify a font to use from the set of fonts supported by Metabase
    fontFamily: "Lato",

    // Optional: Match your application's color scheme
    colors: {
        brand: "#9B5966",
        "text-primary": "#4C5773",
        "text-secondary": "#696E7B",
        "text-tertiary": "#949AAB",
    },
});

export default function App() {
    return (
        <MetabaseProvider config={config} theme={theme} className="optional-class">
            Hello World!
        </MetabaseProvider>
    );
}
import React from "react";
import {MetabaseProvider, StaticQuestion, defineEmbeddingSdkConfig} from "@metabase/embedding-sdk-react";

const config = defineEmbeddingSdkConfig({...})

export default function App() {
    const questionId = 1; // This is the question ID you want to embed

    return (
        <MetabaseProvider config={config}>
            <StaticQuestion questionId={questionId} showVisualizationSelector={false}/>
        </MetabaseProvider>
    );
}
<StaticQuestion questionId={questionId} parameterValues={{product_id: 50}}/>
import React from "react";
import {MetabaseProvider, InteractiveQuestion,defineEmbeddingSdkConfig} from "@metabase/embedding-sdk-react";

const config = defineEmbeddingSdkConfig({...})

export default function App() {
    const questionId = 1; // This is the question ID you want to embed

    return (
        <MetabaseProvider config={config}>
            <InteractiveQuestion questionId={questionId}/>
        </MetabaseProvider>
    );
}
const questionId = 1; // This is the question ID you want to embed

<InteractiveQuestion questionId={95}/>
<InteractiveQuestion questionId={95}>
    <div
        style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
        }}
    >
        <div style={{display: "grid", placeItems: "center"}}>
            <InteractiveQuestion.Title/>
            <InteractiveQuestion.ResetButton/>
        </div>
        <div
            style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "flex-start",
                overflow: "hidden",
            }}
        >
            <div style={{width: "100%"}}>
                <InteractiveQuestion.QuestionVisualization/>
            </div>
            <div style={{display: "flex", flex: 1, overflow: "scroll"}}>
                <InteractiveQuestion.Summarize/>
            </div>
        </div>
        <div style={{display: "flex", flexDirection: "column"}}>
            <InteractiveQuestion.Filter/>
        </div>
    </div>
</InteractiveQuestion>
import React from "react";
import {MetabaseProvider, StaticDashboard,defineEmbeddingSdkConfig} from "@metabase/embedding-sdk-react";

const config = defineEmbeddingSdkConfig({...})

export default function App() {
    const dashboardId = 1; // This is the dashboard ID you want to embed
    const initialParameterValues = {}; // Define your query parameters here

    // choose parameter names that are in your dashboard
    const hiddenParameters = ["location", "city"]

    return (
        <MetabaseProvider config={config}>
            <StaticDashboard
                dashboardId={dashboardId}
                initialParameterValues={initialParameterValues}
                withTitle={false}
                withDownloads={false}
                hiddenParameters={hideParameters}
            />
        </MetabaseProvider>
    );
}
import React from "react";
import {MetabaseProvider, InteractiveDashboard,defineEmbeddingSdkConfig} from "@metabase/embedding-sdk-react";

const config = defineEmbeddingSdkConfig({...})

export default function App() {
    const dashboardId = 1; // This is the dashboard ID you want to embed
    const initialParameterValues = {}; // Define your query parameters here

    // choose parameter names that are in your dashboard
    const hiddenParameters = ["location", "city"]

    return (
        <MetabaseProvider config={config}>
            <InteractiveDashboard
                dashboardId={dashboardId}
                initialParameterValues={initialParameterValues}
                withTitle={false}
                withDownloads={false}
                hiddenParameters={hideParameters}
            />
        </MetabaseProvider>
    );
}
import React from "react";
import {MetabaseProvider, CreateQuestion, defineEmbeddingSdkConfig} from "@metabase/embedding-sdk-react";

const config = defineEmbeddingSdkConfig({...})

export default function App() {
    return (
        <MetabaseProvider config={config}>
            <CreateQuestion/>
        </MetabaseProvider>
    );
}

import React from "react";
import {MetabaseProvider, ModifyQuestion, defineEmbeddingSdkConfig} from "@metabase/embedding-sdk-react";

const config = defineEmbeddingSdkConfig({...})

export default function App() {
    return (
        <MetabaseProvider config={config}>
            <ModifyQuestion questionId={1}/>
        </MetabaseProvider>
    );
}

const {createDashboard} = useCreateDashboardApi();

const handleDashboardCreate = async () => {
    const dashboard = await createDashboard(props);

    // do something with created empty dashboard, e.g. use it in EditableDashboard component
};

return <Button onClick={handleDashboardCreate}>Create new dashboard</Button>
const [dashboard, setDashboard] = useState<Dashboard | null>(null);

if (dashboard) {
    return <EditableDashboard dashboardId={dashboard.id}/>;
}

return (
    <CreateDashboardModal onClose={handleClose} onCreate={setDashboard}/>
);
import React from "react";
import {CollectionBrowser} from "metabase-types/api";

export default function App() {
    const collectionId = 123; // This is the collection ID you want to browse
    const handleItemClick = item => {
        console.log("Clicked item:", item);
    };

    // Define the collection item types you want to be visible
    const visibleEntityTypes = ["dashboard", "question"];

    return (
        <CollectionBrowser
            collectionId={collectionId}
            onClick={handleItemClick}
            pageSize={10}
            visibleEntityTypes={visibleEntityTypes}
        />
    );
}
import {defineEmbeddingSdkTheme} from "@metabase/embedding-sdk-react";
const theme = defineEmbeddingSdkTheme({
    // Specify a font to use from the set of fonts supported by Metabase.
    // You can set the font to "Custom" to use the custom font
    // configured in your Metabase instance.
    fontFamily: "Lato",

    // Override the base font size for every component.
    // This does not usually need to be set, as the components
    // inherit the font size from the parent container, such as the body.
    fontSize: "16px",

    // Override the base line height for every component.
    lineHeight: 1.5,

    // Match your application's color scheme
    colors: {
        // The primary color of your application
        brand: "#9B5966",

        // The color of text that is most prominent
        "text-primary": "#4C5773",

        // The color of text that is less prominent
        "text-secondary": "#696E7B",

        // The color of text that is least prominent
        "text-tertiary": "#949AAB",

        // Default background color
        background: "#FFFFFF",

        // Slightly darker background color used for hover and accented elements
        "background-hover": "#F9FBFC",

        // Color used for borders
        border: "#EEECEC",

        // Color used for filters context
        filter: "#7172AD",

        // Color used for aggregations and breakouts context
        summarize: "#88BF4D",

        // Color used to indicate successful actions and positive values/trends
        positive: "#BADC58",

        // Color used to indicate dangerous actions and negative values/trends
        negative: "#FF7979",

        /** Color used for popover shadows */
        shadow: "rgba(0,0,0,0.08)",

        // Overrides the chart colors. Supports up to 8 colors
        // Limitation: this does not affect charts with custom series color
        charts: [
            // can either be a hex code
            "#9B59B6",

            // or a color object. tint and shade represents lighter and darker variations
            // only base color is required, while tint and shade are optional
            {base: "#E74C3C", tint: "#EE6B56", shade: "#CB4436"},
        ],
    },

    components: {
        // Dashboard
        dashboard: {
            // Background color for all dashboards
            backgroundColor: "#2F3640",

            card: {
                // Background color for all dashboard cards
                backgroundColor: "#2D2D30",

                // Apply a border color instead of shadow for dashboard cards.
                // Unset by default.
                border: "1px solid #EEECEC",
            },
        },

        // Question
        question: {
            // Background color for all questions
            backgroundColor: "#2D2D30",
        },

        // Data table
        table: {
            cell: {
                // Text color of cells, defaults to `text-primary`
                textColor: "#4C5773",

                // Default background color of cells, defaults to `background`
                backgroundColor: "#FFFFFF",

                // Font size of cell values, defaults to ~12.5px
                fontSize: "12.5px",
            },

            idColumn: {
                // Text color of ID column, defaults to `brand`
                textColor: "#9B5966",

                // Background color of ID column, defaults to a lighter shade of `brand`
                backgroundColor: "#F5E9EB",
            },
        },

        // Number chart
        number: {
            // Value displayed on number charts.
            // This also applies to the primary value in trend charts.
            value: {
                fontSize: "24px",
                lineHeight: "21px",
            },
        },

        // Cartesian chart
        cartesian: {
            // Padding around the cartesian charts.
            // Uses CSS's `padding` property format.
            padding: "4px 8px",
        },

        // Pivot table
        pivotTable: {
            cell: {
                // Font size of cell values, defaults to ~12px
                fontSize: "12px",
            },

            // Pivot row toggle to expand or collapse row
            rowToggle: {
                textColor: "#FFFFFF",
                backgroundColor: "#95A5A6",
            },
        },

        collectionBrowser: {
            breadcrumbs: {
                expandButton: {
                    textColor: "#8118F4",
                    backgroundColor: "#767D7C",
                    hoverTextColor: "#CE8C8C",
                    hoverBackgroundColor: "#69264B",
                },
            },
        },

        // Popover are used in components such as click actions in interactive questions.
        popover: {
            // z-index of the popover. Useful for embedding components in a modal. defaults to 4.
            zIndex: 4,
        },
    },
});
<MetabaseProvider
    config={config}
    theme={theme}
    pluginsConfig={{
        mapQuestionClickActions: [...] // Add your custom actions here
    }}
>
    {children}
</MetabaseProvider>
<InteractiveQuestion
    questionId={1}
    plugins={{
        mapQuestionClickActions: [...],
    }}
/>
// You can provide a custom action with your own `onClick` logic.
const createCustomAction = clicked => ({
    buttonType: "horizontal",
    name: "client-custom-action",
    section: "custom",
    type: "custom",
    icon: "chevronright",
    title: "Hello from the click app!!!",
    onClick: ({closePopover}) => {
        alert(`Clicked ${clicked.column?.name}: ${clicked.value}`);
        closePopover();
    },
});

// Or customize the appearance of the custom action to suit your need.
const createCustomActionWithView = clicked => ({
    name: "client-custom-action-2",
    section: "custom",
    type: "custom",
    view: ({closePopover}) => (
        <button
            className="tw-text-base tw-text-yellow-900 tw-bg-slate-400 tw-rounded-lg"
            onClick={() => {
                alert(`Clicked ${clicked.column?.name}: ${clicked.value}`);
                closePopover();
            }}
        >
            Custom element
        </button>
    ),
});

const plugins = {
    /**
     * You will have access to default `clickActions` that Metabase render by default.
     * So you could decide if you want to add custom actions, remove certain actions, etc.
     */
    mapQuestionClickActions: (clickActions, clicked) => {
        return [
            ...clickActions,
            createCustomAction(clicked),
            createCustomActionWithView(clicked),
        ];
    },
};

const questionId = 1; // This is the question ID you want to embed

return (
    <MetabaseProvider config={config} pluginsConfig={plugins}>
        <InteractiveQuestion questionId={questionId}/>
    </MetabaseProvider>
);
const plugins = {
    dashboard: {
        dashcardMenu: {
            withDownloads: true,
            withEditLink: true,
            customItems: [],
        },
    },
};
<InteractiveDashboard
    questionId={1}
    plugins={{
        dashboard: {
            dashcardMenu: null,
        },
    }}
/>
const plugins = {
    dashboard: {
        dashcardMenu: {
            withDownloads: false,
            withEditLink: false,
            customItems: [],
        },
    },
};
{
    iconName: string;
    label: string;
    onClick: () => void;
    disabled ? : boolean;
}
const plugins: SdkPluginsConfig = {
    dashboard: {
        dashcardMenu: {
            customItems: [
                {
                    iconName: "chevronright",
                    label: "Custom action",
                    onClick: () => {
                        alert(`Custom action clicked`);
                    },
                },
                ({question}) => {
                    return {
                        iconName: "chevronright",
                        label: "Custom action",
                        onClick: () => {
                            alert(`Custom action clicked ${question.name}`);
                        },
                    };
                },
            ],
        },
    },
};
const plugins: SdkPluginsConfig = {
    dashboard: {
        dashcardMenu: ({question}) => (
            <button onClick={() => console.log(question.name)}>Click me</button>
        ),
    },
};
const handleDashboardLoad: SdkDashboardLoadEvent = dashboard => {
    /* do whatever you need to do - e.g. send analytics events, show notifications */
};

const eventHandlers = {
    onDashboardLoad: handleDashboardLoad,
    onDashboardLoadWithoutCards: handleDashboardLoad,
};

return (
    <MetabaseProvider config={config} eventHandlers={eventHandlers}>
        {children}
    </MetabaseProvider>
);
const auth = useMetabaseAuthStatus();

if (auth.status === "error") {
    return <div>Failed to authenticate: {auth.error.message}</div>;
}

if (auth.status === "success") {
    return <InteractiveQuestion questionId={110}/>;
}
// Inside your application component
const [data, setData] = useState({});
// This is used to force reloading Metabase components
const [counter, setCounter] = useState(0);

// This ensures we only change the `data` reference when it's actually changed
const handleDataChange = newData => {
    setData(prevData => {
        if (isEqual(prevData, newData)) {
            return prevData;
        }

        return newData;
    });
};

useEffect(() => {
    /**
     * When you set `data` as the `useEffect` hook's dependency, it will trigger the effect
     * and increment the counter which is used in a Metabase component's `key` prop, forcing it to reload.
     */
    if (data) {
        setCounter(counter => counter + 1);
    }
}, [data]);

return <InteractiveQuestion key={counter} questionId={yourQuestionId}/>;
import {defineEmbeddingSdkConfig} from "@metabase/embedding-sdk-react";
/**
 * This is the default implementation used in the SDK.
 * You can customize this function to fit your needs, such as adding headers or excluding cookies.

 * The function must return a JWT token object, or return "null" if the user is not authenticated.

 * @returns {Promise<{id: string, exp: number} | null>}
 */
async function fetchRequestToken(url) {
    const response = await fetch(url, {
        method: "GET",
        credentials: "include",
    });

    return await response.json();
}

// Pass this configuration to MetabaseProvider.
// Wrap the fetchRequestToken function in useCallback if it has dependencies to prevent re-renders.
const config = defineEmbeddingSdkConfig({fetchRequestToken});
"use client";

import { MetabaseProvider, StaticQuestion, defineEmbeddingSdkConfig } from "@metabase/embedding-sdk-react";

const config = defineEmbeddingSdkConfig({...}); // Your Metabase SDK configuration

export default function MetabaseComponents() {
  return (
    <MetabaseProvider config={config}>
      <StaticQuestion questionId={QUESTION_ID} />
    </MetabaseProvider>
  );
// page.tsx

const MetabaseComponentsNoSsr = dynamic(() => import("@/components/MetabaseComponents"), {
  ssr: false
});

export default function HomePage() {
  return (
    <>
      <MetabaseComponentsNoSsr />
    </>
  );
}
const DynamicAnalytics = dynamic(
  () => import("@/components/MetabaseComponents").then((module) => module.MetabaseComponents),
  {
    ssr: false,
  }
);
import jwt from "jsonwebtoken";

const METABASE_JWT_SHARED_SECRET = process.env.METABASE_JWT_SHARED_SECRET || "";
const METABASE_INSTANCE_URL = process.env.METABASE_INSTANCE_URL || "";

export async function GET() {
  const token = jwt.sign(
    {
      email: user.email,
      first_name: user.firstName,
      last_name: user.lastName,
      groups: [user.group],
      exp: Math.round(Date.now() / 1000) + 60 * 10, // 10 minutes expiration
    },
    // This is the JWT signing secret in your Metabase JWT authentication setting
    METABASE_JWT_SHARED_SECRET
  );
  const ssoUrl = `${METABASE_INSTANCE_URL}/auth/sso?token=true&jwt=${token}`;

  try {
    const ssoResponse = await fetch(ssoUrl, { method: "GET" });
    const ssoResponseBody = await ssoResponse.json();

    return Response.json(ssoResponseBody);
  } catch (error) {
    if (error instanceof Error) {
      return Response.json(
        {
          status: "error",
          message: "authentication failed",
          error: error.message,
        },
        {
          status: 401,
        }
      );
    }
  }
}
import {defineEmbeddingSdkConfig} from "@metabase/embedding-sdk-react";
const config = defineEmbeddingSdkConfig({
  metabaseInstanceUrl: "https://metabase.example.com", // Required: Your Metabase instance URL
  jwtProviderUri: "/sso/metabase", // Required: An endpoint in your app that returns signs the user in and delivers a token
});
import type { NextApiRequest, NextApiResponse } from "next";
import jwt from "jsonwebtoken";

const METABASE_JWT_SHARED_SECRET = process.env.METABASE_JWT_SHARED_SECRET || "";
const METABASE_INSTANCE_URL = process.env.METABASE_INSTANCE_URL || "";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const token = jwt.sign(
    {
      email: user.email,
      first_name: user.firstName,
      last_name: user.lastName,
      groups: [user.group],
      exp: Math.round(Date.now() / 1000) + 60 * 10, // 10 minutes expiration
    },
    // This is the JWT signing secret in your Metabase JWT authentication setting
    METABASE_JWT_SHARED_SECRET
  );
  const ssoUrl = `${METABASE_INSTANCE_URL}/auth/sso?token=true&jwt=${token}`;

  try {
    const ssoResponse = await fetch(ssoUrl, { method: "GET" });
    const ssoResponseBody = await ssoResponse.json();

    res.status(200).json(ssoResponseBody);
  } catch (error) {
    if (error instanceof Error) {
      res.status(401).json({
        status: "error",
        message: "authentication failed",
        error: error.message,
      });
    }
  }
}
import {defineEmbeddingSdkConfig} from "@metabase/embedding-sdk-react";
const config = defineEmbeddingSdkConfig({
  metabaseInstanceUrl: "https://metabase.example.com", // Required: Your Metabase instance URL
  jwtProviderUri: "/api/sso/metabase", // Required: An endpoint in your app that returns signs the user in and delivers a token
});
yarn storybook-embedding-sdk
yarn build-release:cljs
yarn build-embedding-sdk:watch
"dependencies": {
"@metabase/embedding-sdk-react": "file:../metabase/resources/embedding-sdk"
}
npm install
# or
yarn