Embed a React dashboard | QueryPanel docs

QueryPanel's primary product is its headful React SDK: a Notion-like dashboard workspace with an AI assistant, rendered as real React in your app tree—not an iframe on another origin. The component is QuerypanelEmbedded. Your workspace private key stays on the server; the browser only receives a short-lived tenant JWT.

What you pass in

Pass a dashboard id, the QueryPanel API base URL (the same host the Node SDK uses), and a JWT minted for the authenticated customer. Optional allowCustomization enables copy-on-write forks; darkMode, colorPreset, theme, and branding cover look-and-feel.

Server JWT, then one embed

API route mints the token; React renders the workspace

import { QueryPanelSdkAPI } from "@querypanel/node-sdk";
import { QuerypanelEmbedded } from "@querypanel/react-sdk";

const qp = new QueryPanelSdkAPI(
  process.env.QUERYPANEL_URL!,
  process.env.PRIVATE_KEY!,
  process.env.QUERYPANEL_WORKSPACE_ID!,
);

const jwt = await qp.createJwt({
  tenantId: req.user.tenantId, // from your auth layer
  userId: req.user.id,
  scopes: ["dashboards:read", "charts:read"],
});

export function CustomerAnalytics({ jwt }: { jwt: string }) {
  return (
    <QuerypanelEmbedded
      dashboardId="YOUR_DASHBOARD_UUID"
      apiBaseUrl="https://api.querypanel.io"
      jwt={jwt}
      allowCustomization
    />
  );
}

Callbacks: onLoad, onError, onCustomize (when a customer forks). See QuerypanelEmbeddedProps in the package for the full list.

Mint a tenant JWT — createJwt, claims, and why the private key never ships to the browser.
Tenant isolation — tenantId must come from authenticated backend context.
React SDK reference — provider-based NL UI, theming, and building blocks.

What you pass in

Server JWT, then one embed

Related