Dynamic AI Dashboard

Drop a full AI-powered analytics dashboard into any Next.js app. Your users build live charts over their own data with no SQL — and can simply ask a question in plain English, and the AI writes the query for them.

Ships as a Webpack Module Federation remote (dist/) + a one-line Next.js SDK (withMacDashboard) + a setup CLI. Works for any product/team (MAC, HRMS, LMS, …) — it scopes everything to the product + tenant you pass in.

🚀 Quick start (3 steps)

1. Install

npm install @chaturyamokshitha/fd-mac-dashboard

2. Run the setup command

npx fd-mac-dashboard init

This one command:

• copies the dashboard build into your app's public/dashboard-mac/
• writes a dashboard.env.example you can copy values from
• prints the exact next.config line to paste

3. Wire it up (paste 3 small things)

a) next.config.mjs — wrap your config:

import { createRequire } from "module";
const require = createRequire(import.meta.url);
const { withMacDashboard } = require("@chaturyamokshitha/fd-mac-dashboard/next");

export default withMacDashboard(
  { reactStrictMode: true, basePath: "/hrms" },          // your app's basePath
  { federationHostName: "hrms", basePathForRewrites: "/hrms" }
);

b) Set window.ENV on the page that shows the dashboard (values are in dashboard.env.example):

if (typeof window !== "undefined") {
  window.ENV = {
    API_BASE_PATH: "/your-app/api",         // same-origin path you proxy to the dashboard API
    PRODUCT_ID: "<your-product-uuid>",      // required
    TENANT_ID: "<tenant-uuid>",
    DASHBOARD_MODE: "designer",             // or "viewer"
    DASHBOARD_ACCESS_TOKEN: "<jwt>",
  };
}

c) Render it:

import React, { Suspense } from "react";
const DashboardApp = React.lazy(() => import("dashboard/App"));

export default function DashboardPage() {
  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <Suspense fallback={<div>Loading…</div>}>
        <DashboardApp />
      </Suspense>
    </div>
  );
}

✅ That's it — charts and the AI features work, because the hosted backend already runs the AI agents.

🔄 Updating later (one command)

npm update @chaturyamokshitha/fd-mac-dashboard

To refresh assets automatically on every install, add this once to your package.json:

"scripts": { "postinstall": "fd-mac-dashboard copy-assets" }

(Otherwise just re-run npx fd-mac-dashboard copy-assets after updating.)

⚙️ Environment variables

Required — window.ENV (set per page, at runtime)

| Key | What it does | |---|---| | API_BASE_PATH | Where the dashboard API lives. Prefer a same-origin path your app proxies (e.g. /your-app/api) to avoid CORS. A full hosted URL works only if that backend allows CORS for your origin. | | PRODUCT_ID | Required. Scopes all data + saved dashboards to your product. |

Recommended — window.ENV

| Key | What it does | |---|---| | TENANT_ID | Tenant the data belongs to (sent as X-Tenant-Id). | | DASHBOARD_ACCESS_TOKEN | JWT bearer token for the logged-in user. | | DASHBOARD_MODE | designer (build/edit) or viewer (read-only). | | DASHBOARD_PERSONA | Role/persona of the current user. | | KEYCLOAK_SUBJECT | Keycloak subject id. |

Build-time (host shell / .env.local)

| Key | What it does | |---|---| | NEXT_PRIVATE_LOCAL_WEBPACK=true | Enables Module Federation in the build. | | NEXT_PUBLIC_REMOTE_DASHBOARD_URL | Where remoteEntry.js is served from. | | NEXT_PUBLIC_APP_ORIGIN | Your app's public origin. |

Optional — self-host the backend + AI agents

Most teams don't need this — point API_BASE_PATH at the shared hosted backend (via your proxy, or directly if it allows CORS for your origin) and you're done. Only if you run your own fd-mac-dashboard-api-svc do you set the agent/DB vars (REPORT_AGENT_URL, DICTIONARY_AGENT_URL, DB_AGENT_*, …). See dashboard.env.example.

🧩 What you get

• 9 chart types + StatCard + Table, drag/resize designer
• Guided query builder (no SQL) — tables, filters, group-by, aggregates
• AI: ask in English → SQL (Report Agent) and auto data-dictionary (AI Agent)
• Designer vs Viewer modes, role-aware, multi-tenant by product/tenant

🛠️ CLI reference

npx fd-mac-dashboard init         # copy assets + write env sample + print config
npx fd-mac-dashboard copy-assets  # copy the build into ./public/dashboard-mac/
npx fd-mac-dashboard print-env    # print the sample env block

Repository: bitbucket.org/5datainc/fd-mac-dashboard-ui