Feature request: mountable dashboard for next.js routes like npx workflow inspect runs --web

[imWildCat]

[pranaygp]

I'm not sure what this means

[imWildCat]

Hey @pranaygp , apologies, I should've been more clear:

I would love something like Prisma Studio to embed the workflow management UI (dashboard) into my next.js app. Is that possible?

Their doc: https://www.prisma.io/docs/guides/embed-studio-nextjs

Sample code:

'use client';

import dynamic from "next/dynamic";
import { createPostgresAdapter } from "@prisma/studio-core/data/postgres-core";
import { createStudioBFFClient } from "@prisma/studio-core/data/bff";
import { useMemo, Suspense } from "react";
import StudioWrapper from "@/components/StudioWrapper";

// Dynamically import Studio with no SSR to avoid hydration issues
const Studio = dynamic(
  () => import("@prisma/studio-core/ui").then(mod => mod.Studio),
  {
    ssr: false
  }
);

// Loading component
const StudioLoading = () => (
  <div className="flex items-center justify-center h-full">
    <div className="text-center">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
      <p className="mt-4 text-gray-600">Loading Studio...</p>
    </div>
  </div>
);

// Client-only Studio component
const ClientOnlyStudio = () => {
  const adapter = useMemo(() => {
    // Create the HTTP client that communicates with our API endpoint
    const executor = createStudioBFFClient({
      url: "/api/studio",
    });

    // Create the Postgres adapter using the executor
    return createPostgresAdapter({ executor });
  }, []);

  return <Studio adapter={adapter} />;
};

export default function App() {
  return (
    <StudioWrapper>
      <Suspense fallback={<StudioLoading />}>
        <ClientOnlyStudio />
      </Suspense>
    </StudioWrapper>
  );
}

[reasv]

I second this. Give users of the application a way to directly inspect workflows inside your app, without having to essentially remake the same UI. Would be a lot better than only being able to see it by logging onto Vercel

[pranaygp]

100%! good news is you can kinda already do that with with @workflow/web package - cc @VaguelySerious

[VaguelySerious]

Hi! We're in the process of packaging observability UI and tooling into a package that can be imported into any NextJS app to provide this, see #125. Once that's merged and published, you'll be able to import @workflow/web-shared in your existing NextJS deployment, add your project environment variables, and then get components to display the observability UI

[pranaygp]

Should we also add a README on @workflow/web to document self-hosting that web dashboard?

[reasv]

Thanks, that sounds great