feat: add prisma plugin to start

Author: AlemTuzlak

examples/react/start/.gitignore

@@ -10,3 +10,5 @@ count.txt
 .output
 .vinxi
 todos.json
+
+/generated/prisma

examples/react/start/package.json

@@ -6,9 +6,16 @@
     "dev": "vite dev --port 3000",
     "start": "node .output/server/index.mjs",
     "serve": "vite preview",
-    "test": "vitest run"
+    "test": "vitest run",
+    "db:migrate": "prisma migrate dev --name init",
+    "db:reset": " prisma migrate reset",
+    "db:gen": "prisma generate",
+    "db:studio": "prisma studio"
   },
   "dependencies": {
+    "@prisma/client": "^6.13.0",
+    "@prisma/extension-accelerate": "^2.0.2",
+    "@prisma/studio-core": "^0.5.1",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-devtools": "^0.0.0",
     "@tanstack/react-query": "^5.83.0",
@@ -18,6 +25,7 @@
     "@tanstack/react-router-with-query": "^1.130.2",
     "@tanstack/react-start": "^1.130.2",
     "@tanstack/router-plugin": "^1.121.2",
+    "prisma": "^6.13.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.0.6",
@@ -35,4 +43,4 @@
     "vitest": "^3.1.2",
     "web-vitals": "^4.2.4"
   }
-}
+}

examples/react/start/prisma/migrations/20250731103932_init/migration.sql

@@ -0,0 +1,29 @@
+-- CreateTable
+CREATE TABLE "public"."User" (
+    "id" TEXT NOT NULL,
+    "name" TEXT,
+    "email" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "public"."Post" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT,
+    "published" BOOLEAN NOT NULL DEFAULT false,
+    "authorId" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Post_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "public"."User"("email");
+
+-- AddForeignKey
+ALTER TABLE "public"."Post" ADD CONSTRAINT "Post_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "public"."User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

examples/react/start/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"

examples/react/start/prisma/schema.prisma

@@ -0,0 +1,36 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
+
+generator client {
+  provider = "prisma-client-js"
+  output   = "../generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id        String   @id @default(cuid())
+  name      String?
+  email     String?  @unique
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  Post Post[]
+}
+
+model Post {
+  id        String   @id @default(cuid())
+  title     String
+  content   String?
+  published Boolean  @default(false)
+  authorId  String?
+  author    User?    @relation(fields: [authorId], references: [id])
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}

examples/react/start/src/components/devtools.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import { Devtools } from '@tanstack/react-devtools'
-import { createRouter } from '@/router'
+import { StudioPlugin } from './prisma-plugin'
 
 const queryClient = new QueryClient()
 
@@ -18,7 +18,11 @@ export default function DevtoolsExample() {
             },
             {
               name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel router={createRouter()} />,
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+            {
+              name: 'Prisma Studio',
+              render: <StudioPlugin />,
             },
           ]}
         />

examples/react/start/src/components/prisma-plugin.tsx

@@ -0,0 +1,21 @@
+import { Studio } from '@prisma/studio-core/ui'
+import { createPostgresAdapter } from '@prisma/studio-core/data/postgres-core'
+import { createStudioBFFClient } from '@prisma/studio-core/data/bff'
+import { useMemo } from 'react'
+
+import '@prisma/studio-core/ui/index.css'
+
+export function StudioPlugin() {
+  const adapter = useMemo(() => {
+    // 1. Create a client that points to your backend endpoint
+    const executor = createStudioBFFClient({
+      url: 'http://localhost:3000/studio',
+    })
+
+    // 2. Create a Postgres adapter with the executor
+    const adapter = createPostgresAdapter({ executor })
+    return adapter
+  }, [])
+
+  return <Studio adapter={adapter} />
+}

examples/react/start/src/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as DemoStartServerFuncsRouteImport } from './routes/demo.start.server-funcs'
 import { Route as DemoStartApiRequestRouteImport } from './routes/demo.start.api-request'
+import { ServerRoute as StudioServerRouteImport } from './routes/studio'
 import { ServerRoute as ApiDemoNamesServerRouteImport } from './routes/api.demo-names'
 
 const rootServerRouteImport = createServerRootRoute()
@@ -33,6 +34,11 @@ const DemoStartApiRequestRoute = DemoStartApiRequestRouteImport.update({
   path: '/demo/start/api-request',
   getParentRoute: () => rootRouteImport,
 } as any)
+const StudioServerRoute = StudioServerRouteImport.update({
+  id: '/studio',
+  path: '/studio',
+  getParentRoute: () => rootServerRouteImport,
+} as any)
 const ApiDemoNamesServerRoute = ApiDemoNamesServerRouteImport.update({
   id: '/api/demo-names',
   path: '/api/demo-names',
@@ -69,24 +75,28 @@ export interface RootRouteChildren {
   DemoStartServerFuncsRoute: typeof DemoStartServerFuncsRoute
 }
 export interface FileServerRoutesByFullPath {
+  '/studio': typeof StudioServerRoute
   '/api/demo-names': typeof ApiDemoNamesServerRoute
 }
 export interface FileServerRoutesByTo {
+  '/studio': typeof StudioServerRoute
   '/api/demo-names': typeof ApiDemoNamesServerRoute
 }
 export interface FileServerRoutesById {
   __root__: typeof rootServerRouteImport
+  '/studio': typeof StudioServerRoute
   '/api/demo-names': typeof ApiDemoNamesServerRoute
 }
 export interface FileServerRouteTypes {
   fileServerRoutesByFullPath: FileServerRoutesByFullPath
-  fullPaths: '/api/demo-names'
+  fullPaths: '/studio' | '/api/demo-names'
   fileServerRoutesByTo: FileServerRoutesByTo
-  to: '/api/demo-names'
-  id: '__root__' | '/api/demo-names'
+  to: '/studio' | '/api/demo-names'
+  id: '__root__' | '/studio' | '/api/demo-names'
   fileServerRoutesById: FileServerRoutesById
 }
 export interface RootServerRouteChildren {
+  StudioServerRoute: typeof StudioServerRoute
   ApiDemoNamesServerRoute: typeof ApiDemoNamesServerRoute
 }
 
@@ -117,6 +127,13 @@ declare module '@tanstack/react-router' {
 }
 declare module '@tanstack/react-start/server' {
   interface ServerFileRoutesByPath {
+    '/studio': {
+      id: '/studio'
+      path: '/studio'
+      fullPath: '/studio'
+      preLoaderRoute: typeof StudioServerRouteImport
+      parentRoute: typeof rootServerRouteImport
+    }
     '/api/demo-names': {
       id: '/api/demo-names'
       path: '/api/demo-names'
@@ -136,6 +153,7 @@ export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
 const rootServerRouteChildren: RootServerRouteChildren = {
+  StudioServerRoute: StudioServerRoute,
   ApiDemoNamesServerRoute: ApiDemoNamesServerRoute,
 }
 export const serverRouteTree = rootServerRouteImport

examples/react/start/src/routes/studio.ts

@@ -0,0 +1,32 @@
+import { createServerFileRoute } from '@tanstack/react-start/server'
+import { createPrismaPostgresHttpClient } from '@prisma/studio-core/data/ppg'
+import { serializeError } from '@prisma/studio-core/data/bff'
+
+export const ServerRoute = createServerFileRoute('/studio').methods({
+  POST: async ({ request }) => {
+    const { query } = await request.json()
+    // 2. Read DB URL from env vars
+    const url = process.env.DATABASE_URL!
+
+    // 3. Execute the query against Prisma Postgres
+    const [error, results] = await createPrismaPostgresHttpClient({
+      url,
+    }).execute(query)
+
+    if (error) {
+      console.log(error)
+      return new Response(JSON.stringify([serializeError(error)]), {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+    }
+    return new Response(JSON.stringify([null, results]), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  },
+})