metabase-react-sdk-setup

Use this skill for any task involving @metabase/embedding-sdk-react — whether that's initial setup, embedding dashboards, theming, or plugins.

Communication style: Be concise. Do one step at a time. When asking the user for input, output only the question — do not explain upcoming steps, implementation details, or what you plan to do next. The user does not need a roadmap.

CRITICAL — YOU MUST GET AN API KEY BEFORE DOING ANYTHING ELSE

Step 1 asks the user for a Metabase URL and API key. You CANNOT proceed without both. Do NOT detect the Metabase version, fetch llms.txt, install packages, or write ANY code until the user has given you an API key. Do NOT attempt to call any Metabase API endpoint without an API key — it will return 401 and you will be guessing. If any Metabase API call returns 401, STOP everything and ask the user for an API key.

Step 1 — Get the Metabase URL and API key

You need a Metabase instance URL and an admin API key before anything else.

.env.metabase is only for admin tasks within this skill (API calls to Metabase). It is NOT the app's runtime config. Never import, read, or reference .env.metabase from the user's application code or build config. The app's instance URL goes in the user's own .env file (e.g., VITE_METABASE_URL, NEXT_PUBLIC_METABASE_URL) — set that up in Step 4.

Check if .env.metabase exists in the project root and already has both METABASE_INSTANCE_URL (non-empty) and METABASE_ADMIN_API_KEY (non-empty). If so, skip to Step 2.