skills.rest
metabase
metabaseOFFICIAL
Explore all skills by this author →
Website𝕏@metabaseGitHub

metabase-data-app-semantic-layer

Build React data apps that query Metabase tables and metrics through generated TypeScript schema files.

49.0k|6.8k|Updated Feb 2, 2015
Search Tags:#schema generation#typeScript#metabase#data app#reAct#Semantic Layer#embedding sdk
One-click install
npx skills add https://github.com/metabase/metabase --skill metabase-data-app-semantic-layer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: metabase-data-app-semantic-layer
Source: https://github.com/metabase/metabase/tree/main/skills/metabase-data-app-semantic-layer
Command: npx skills add https://github.com/metabase/metabase --skill metabase-data-app-semantic-layer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @metabase/embedding-sdk-react, react-datepicker, and includes references (resource) components.

What problem does it solve?

Building React data apps on top of Metabase often leads to hand-written MBQL queries, hardcoded IDs, invented KPI values, and filters that silently break. This Skill enforces a strict separation between the semantic layer and the presentation layer so every query, filter, and chart is grounded in a generated schema file (metabase.data.ts) that reflects real Metabase tables, metrics, segments, and saved questions.

Core Features & Use Cases

  • Typed schema generation: Fetches a scoped TypeScript schema from the Metabase typed-schemas API using credentials sourced from a repo-root .env.local file, with explicit library, collection, database, and model scoping options.
  • Semantic query recipes: Provides patterns for table queries, metric aggregations, and saved-question queries using useMetabaseQuery, useMetabaseQueryObject, and helpers like filter, breakout, orderBy, and aggregations.
  • SDK rendering guidance: Shows how to render charts with InteractiveQuestion and StaticQuestion via the card prop, including visualization and visualizationSettings typed against the installed SDK declarations.
  • Filter UI patterns: Reference guides cover runtime categorical options, searchable entity comboboxes, date range pickers with react-datepicker, and filter state rules that default to showing data.
  • Use Case: A developer asked to build a revenue dashboard app generates a scoped schema, writes typed queries against schema.tables.orders and schema.metrics.revenue, and renders SDK charts with dashboard-level filters that visibly affect every card.

Quick Start

Ask the AI to build a data app that queries your Metabase tables and metrics through the generated metabase.data.ts schema, starting by confirming which library scope the schema should include.

Frequently Asked Questions about metabase-data-app-semantic-layer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I query Metabase tables from a React data app?▼

Use useMetabaseQuery from @metabase/embedding-sdk-react/data-app with the generated table object as source. Add filters, aggregations, breakouts, and orderBys built from generated fields, segments, and measures rather than hand-written MBQL or raw IDs.

How do I generate the metabase.data.ts schema file?▼

Source DATA_APP_MB_URL and DATA_APP_MB_API_KEY from the repo-root .env.local, then curl the Metabase /api/typed-schemas/v1/typescript endpoint with your chosen scope parameters such as include-data-library, question-collections, or include-models. Never print or paste the API key into chat.

What is the difference between useMetabaseQuery and useMetabaseQueryObject?▼

useMetabaseQuery returns typed row data for custom React rendering, while useMetabaseQueryObject returns { query, error, isLoading } for passing to InteractiveQuestion or StaticQuestion via card={{ query }}. Never pass the whole hook result as card.query.

Can I use Metabase metrics as a query source in data apps?▼

No, metrics are aggregation expressions, not query sources. Pass the generated table object as source and include the metric in aggregations; metric dimensions used in filters or breakouts must belong to a metric in the same query.

Why does my data app filter show no rows after options change?▼

Runtime option sets can change, leaving a stale selected value that filters everything out. Reset the filter to all when the selected value disappears from the latest options query, and keep the All option selectable during loading or errors.

Should I use native date inputs for data app filter bars?▼

No, native input type=date has browser-controlled placeholders and popovers that cannot be reliably themed. Use an existing repo date picker if available, otherwise install react-datepicker and pass Date or null values, never new Date("").

Related Skills

Explore More Software Engineering Skills→
pkoka888pkoka888
1

metabase-ai-assistant

Generate schema-aware SQL from natural language and automate Metabase dashboards and reports.

Community
Advanced
clawdataclawdata
24

metabase

Configure and query Metabase dashboards and questions via API.

Official
Intermediate
pipixia-labspipixia-labs
38

dating-web

Design a dating dashboard UI with KPI grid, bar chart, and trend panel.

Official
Intermediate
pkoka888pkoka888
1

metabase-embedding

Generate signed JWT embed URLs for Metabase dashboards and questions.

Community
Intermediate