Frontend Setup

Ask the Upsolve AI team for “a key to the private NPM library”. Use the key in your .npmrc or .yarnrc file. You can then import the SDK into your application. Use the key as follows:

Now you may run npm i @upsolve-labs/sdk or yarn add @upsolve-labs/sdk to install the SDK.

If you don’t already have Tailwind installed, please follow the setup instructions here. In your tailwind.config.js you will need to make 2 changes:

module.exports = {
  content: [
    ...
    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@upsolve-labs/**/*.{js,ts,jsx,tsx}",
    "./node_modules/flowbite-react/lib/esm/**/*.{js,ts,jsx,tsx}",
  ],
  ...
  presets: [require("@upsolve-labs/sdk/tailwind.config.js")],
};

And make sure, per the instructions, that in your root.tsx file you have imported ./output.css with the output.css file you generated in step 4 of the Tailwind setup.

In your main layout.tsx or page.tsx, add this line to import the Upsolve CSS. For example, if you have a RootLayout it will look like this:

"use client";
...
import '@upsolve-labs/common/styles/global.css';
...

export default function RootLayout({
  children,
}:
...

You will need to get the JWT for the current user and the dashboard ID to render the correct dashboard. The JWT is generated by following the steps in Backend Setup. The dashboard ID could be found in the URL when you are viewing the dashboard you want to embed.

Below is an example of deploying component with JWT using Clerk middleware:

"use client";
import React from "react";
import { UpsolveDashboard } from "@upsolve-labs/sdk";
import { useUser } from "@clerk/nextjs";

const Analytics: React.FC = () => {
  // Get the user information from Clerk and extract the Upsolve token from the metadata
  const { user } = useUser();
  const upsolveToken = user?.publicMetadata?.["upsolveToken"];

  // Embed the component into your app
  return (
    <>
      {upsolveToken != null && typeof upsolveToken === "string" && (
        <UpsolveDashboard
          dashboardId={"4cc12f51-1db4-474c-ac14-ba7574ed4ff3"}
          tenantJWT={upsolveToken}
        />
      )}
    </>
  );
};

export default Analytics;

Make sure that your .npmrc or .yarnrc.yml values are provided to your deployment as env variables, otherwise the deployment will not work.