Custom Dashboards

apps/dashboard/.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Generated files
+src/generated

apps/dashboard/package.json

@@ -4,11 +4,14 @@
   "repository": "https://github.com/stack-auth/stack-auth",
   "private": true,
   "scripts": {
-    "clean": "rimraf .next && rimraf node_modules",
+    "clean": "rimraf .next && rimraf node_modules && rimraf src/generated",
     "typecheck": "tsc --noEmit",
     "with-env": "dotenv -c development --",
     "with-env:prod": "dotenv -c --",
     "dev": "next dev --turbopack --port ${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}01",
+    "predev": "pnpm run bundle-type-definitions",
+    "bundle-type-definitions": "tsx scripts/bundle-type-definitions.ts",
+    "prebuild": "pnpm run bundle-type-definitions",
     "build": "next build",
     "docker-build": "next build --experimental-build-mode compile",
     "analyze-bundle": "next experimental-analyze",
@@ -17,6 +20,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.41",
     "@ai-sdk/openai": "^3.0.25",
     "@ai-sdk/react": "^3.0.72",
     "@assistant-ui/react": "^0.10.24",

apps/dashboard/scripts/bundle-type-definitions.ts

@@ -0,0 +1,64 @@
+import { writeFileSyncIfChanged } from '@stackframe/stack-shared/dist/utils/fs';
+import { glob } from 'glob';
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+
+type TypeDefinitionFile = {
+  path: string,
+  content: string,
+};
+
+async function main() {
+  console.log('[Bundle Type Definitions] Finding Stack SDK type definition files...');
+
+  const rootPath = path.resolve(process.cwd(), '../..');
+  const stackAppPath = path.join(rootPath, 'packages/template/src/lib/stack-app');
+  const outputPath = path.join(rootPath, 'apps/dashboard/src/generated/bundled-type-definitions.ts');
+
+  const files = await glob(`${stackAppPath}/**/*.ts`, {
+    ignore: [
+      `${stackAppPath}/**/implementations/**`,
+      `${stackAppPath}/**/utils/**`,
+      `${stackAppPath}/**/*.d.ts`,
+      `${stackAppPath}/**/global.css`,
+    ],
+  });
+
+  console.log(`[Bundle Type Definitions] Found ${files.length} type definition files`);
+
+  const bundledFiles: TypeDefinitionFile[] = [];
+
+  for (const filePath of files) {
+    const relativePath = path.relative(stackAppPath, filePath);
+    const content = await fs.readFile(filePath, 'utf8');
+
+    bundledFiles.push({
+      path: relativePath,
+      content,
+    });
+  }
+
+  console.log('[Bundle Type Definitions] Generating bundled-type-definitions.ts...');
+
+  const output = `// This file is auto-generated by scripts/bundle-type-definitions.ts
+// Do not edit manually - changes will be overwritten
+
+export type TypeDefinitionFile = {
+  path: string,
+  content: string,
+};
+
+export const BUNDLED_TYPE_DEFINITIONS: TypeDefinitionFile[] = ${JSON.stringify(bundledFiles, null, 2)};
+`;
+
+  await fs.mkdir(path.dirname(outputPath), { recursive: true });
+  writeFileSyncIfChanged(outputPath, output);
+
+  console.log(`[Bundle Type Definitions] Generated ${outputPath}`);
+  console.log(`[Bundle Type Definitions] Total size: ${(output.length / 1024).toFixed(2)} KB, ${bundledFiles.length} files bundled`);
+}
+
+main().catch((...args) => {
+  console.error('[Bundle Type Definitions] ERROR! Failed to bundle type definitions:', ...args);
+  process.exit(1);
+});

apps/dashboard/src/app/api/create-dashboard/route.ts

@@ -0,0 +1,28 @@
+import { generateDashboardRuntimeCodegen } from "@/lib/ai-dashboard/model";
+import { stackServerApp } from "@/stack";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+
+const requestSchema = yupObject({
+  projectId: yupString().defined().nonEmpty(),
+  prompt: yupString().defined().nonEmpty(),
+}).defined();
+
+export async function POST(req: Request) {
+  const user = await stackServerApp.getUser({ or: "redirect" });
+  const payload = await requestSchema.validate(await req.json());
+
+  const projects = await user.listOwnedProjects();
+  const project = projects.find((p: { id: string }) => p.id === payload.projectId);
+  if (!project) {
+    return Response.json({ error: "You do not own this project" }, { status: 403 });
+  }
+
+  const runtimeCodegen = await generateDashboardRuntimeCodegen(payload.prompt);
+
+  return Response.json({
+    prompt: payload.prompt,
+    projectId: payload.projectId,
+    runtimeCodegen,
+  });
+}

apps/dashboard/src/components/cmdk-commands.tsx

@@ -12,6 +12,7 @@ import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/
 import Image from "next/image";
 import React, { memo, useEffect, useMemo } from "react";
 import { AIChatPreview } from "./commands/ask-ai";
+import { CreateDashboardPreview } from "./commands/create-dashboard/create-dashboard-preview";
 import { RunQueryPreview } from "./commands/run-query";
 
 export type CmdKPreviewProps = {
@@ -31,38 +32,6 @@ export type CmdKPreviewProps = {
   pathname: string,
 };
 
-// Create Dashboard Preview Component - shows a TODO message for now
-const CreateDashboardPreview = memo(function CreateDashboardPreview({
-  query,
-}: CmdKPreviewProps) {
-  return (
-    <div className="flex flex-col h-full w-full items-center justify-center p-6">
-      <div className="flex flex-col items-center gap-4 max-w-md text-center">
-        <div className="w-16 h-16 rounded-2xl bg-cyan-500/10 flex items-center justify-center">
-          <LayoutIcon className="h-8 w-8 text-cyan-500" />
-        </div>
-        <div>
-          <h3 className="text-lg font-semibold text-foreground mb-2">Create Dashboard</h3>
-          <p className="text-sm text-muted-foreground mb-4">
-            Generate custom dashboards for your users.
-          </p>
-        </div>
-        <div className="w-full p-4 rounded-xl bg-cyan-500/5 border border-cyan-500/20">
-          <p className="text-xs text-cyan-600 dark:text-cyan-400 font-medium mb-2">Your query:</p>
-          <p className="text-sm text-foreground italic">&ldquo;{query}&rdquo;</p>
-        </div>
-        <div className="mt-4 p-4 rounded-xl bg-muted/50 border border-border">
-          <p className="text-xs text-muted-foreground">
-            🚧 <span className="font-medium">Coming Soon</span> — This feature is under development.
-            Soon you&apos;ll be able to create custom dashboards like &ldquo;analytics overview&rdquo;,
-            &ldquo;user management panel&rdquo;, or &ldquo;team activity feed&rdquo;.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-});
-
 // Available App Preview Component - shows app store page in preview panel
 const AvailableAppPreview = memo(function AvailableAppPreview({
   appId,

apps/dashboard/src/components/commands/create-dashboard/create-dashboard-preview.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useProjectId } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
+import { Button } from "@/components/ui";
+import { useDebouncedAction } from "@/hooks/use-debounced-action";
+import {
+  CreateDashboardResponse,
+  CreateDashboardResponseSchema,
+} from "@/lib/ai-dashboard/contracts";
+import { cn } from "@/lib/utils";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { memo, useCallback, useState } from "react";
+import { CmdKPreviewProps } from "../../cmdk-commands";
+import { DashboardSandboxHost } from "./dashboard-sandbox-host";
+
+type GenerationState = "idle" | "generating" | "ready" | "error";
+
+export function CreateDashboardPreview({ query, ...rest }: CmdKPreviewProps) {
+  return <CreateDashboardPreviewInner key={query} query={query} {...rest} />;
+}
+
+const CreateDashboardPreviewInner = memo(function CreateDashboardPreviewInner({
+  query,
+}: CmdKPreviewProps) {
+  const projectId = useProjectId();
+  const prompt = query.trim();
+
+  const [state, setState] = useState<GenerationState>("idle");
+  const [errorText, setErrorText] = useState<string | null>(null);
+  const [artifact, setArtifact] = useState<CreateDashboardResponse | null>(null);
+
+  const generateDashboard = useCallback(async () => {
+    if (!projectId || !prompt) {
+      return;
+    }
+    setState("generating");
+    setErrorText(null);
+    setArtifact(null);
+
+    const response = await fetch("/api/create-dashboard", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        projectId,
+        prompt,
+      }),
+    });
+    if (!response.ok) {
+      const responseText = await response.text();
+      setState("error");
+      setErrorText(responseText || `Request failed with status ${response.status}`);
+      return;
+    }
+
+    const json = await response.json();
+    const parsed = CreateDashboardResponseSchema.safeParse(json);
+    if (!parsed.success) {
+      setState("error");
+      setErrorText(`Failed to parse generation response: ${parsed.error.issues[0]?.message ?? "Unknown error"}`);
+      return;
+    }
+    setArtifact(parsed.data);
+    setState("ready");
+  }, [projectId, prompt]);
+
+  useDebouncedAction({
+    action: generateDashboard,
+    delayMs: 500,
+    skip: !projectId || !prompt,
+  });
+
+  if (!prompt) {
+    return (
+      <div className="flex flex-col h-full w-full items-center justify-center p-6 text-center">
+        <h3 className="text-base font-semibold text-foreground">Create Dashboard</h3>
+        <p className="text-xs text-muted-foreground mt-1">Describe the dashboard you want and we will generate it in a sandbox.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full w-full flex-col">
+      <div className="px-3 py-2 border-b border-foreground/[0.08] space-y-2">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <div className="text-[12px] font-medium text-foreground">Create Dashboard</div>
+            <div className="text-[10px] text-muted-foreground truncate">{prompt}</div>
+          </div>
+          <Button
+            size="sm"
+            variant="secondary"
+            disabled={state === "generating"}
+            onClick={() => runAsynchronouslyWithAlert(generateDashboard())}
+          >
+            {state === "generating" ? "Generating..." : "Regenerate"}
+          </Button>
+        </div>
+        {state === "error" && errorText && (
+          <div className={cn("rounded-md border px-2 py-1.5 text-[10px]", "border-red-500/30 bg-red-500/10 text-red-200")}>
+            {errorText}
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1 min-h-0 p-2">
+        {state === "generating" && (
+          <div className="flex h-full items-center justify-center text-xs text-muted-foreground">Generating dashboard...</div>
+        )}
+        {state !== "generating" && artifact && (
+          <DashboardSandboxHost artifact={artifact} />
+        )}
+        {state !== "generating" && !artifact && state !== "error" && (
+          <div className="flex h-full items-center justify-center text-xs text-muted-foreground">Waiting for generation...</div>
+        )}
+      </div>
+    </div>
+  );
+});