Prisma Studio can be embedded directly into your Next.js application using the @prisma/studio-core package. This guide walks you through the setup so you can manage your database from within your app instead of running Prisma Studio separately.
After completing the guide, you'll have a Next.js app with Prisma Studio embedded, allowing you to browse and edit your database directly from your application interface:
Embedding Prisma Studio can be useful in scenarios such as:
Building a quick admin dashboard for editing data
Supporting multi-tenant applications where each user has their own database
bunx --bun prisma init --datasource-provider mysql --output ../app/generated/prisma
Bash
pnpm prisma init --datasource-provider mysql --output ../app/generated/prisma
Bash
yarn prisma init --datasource-provider mysql --output ../app/generated/prisma
Bash
npx prisma init --datasource-provider mysql --output ../app/generated/prisma
[!NOTE]
prisma init creates the Prisma scaffolding and a local DATABASE_URL. If you choose Prisma Postgres below, create a database in the next step and replace that value with a direct postgres://... connection string.
The prisma init command creates:
A prisma/ directory with your schema.prisma file
A prisma.config.ts file for configuring Prisma
A .env file with your DATABASE_URL
An output directory at app/generated/prisma for the Prisma Client
If you're using Prisma Postgres, create a database and replace the generated DATABASE_URL in your .env file with the postgres://... connection string from the CLI output:
The prisma init command creates:
A prisma/ directory with your schema.prisma file
A prisma.config.ts file for configuring Prisma
A .env file with your DATABASE_URL
An output directory at app/generated/prisma for the Prisma Client
If you're using Prisma Postgres, create a database and replace the generated DATABASE_URL in your .env file with the postgres://... connection string from the CLI output:
Open prisma/schema.prisma and replace the content with:
title="prisma/schema.prisma"
generator client {
provider = "prisma-client"
output = "../app/generated/prisma"
}
datasource db {
provider = "postgresql" // this will change depending on the --datasource-provider flag used in the init command
}
model User {
id Int @id @default(autoincrement())
name String
email String @unique
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
authorId Int
author User @relation(fields: [authorId], references: [id])
createdAt DateTime @default(now())
}
To get access to the variables in the .env file, they can either be loaded by your runtime, or by using dotenv. Include an import for dotenv at the top of the prisma.config.ts
If you are using yarn, pnpm, or another package manager, use the equivalent flag for your tool.
The @prisma/studio-core provides Studio, a React component which renders Prisma Studio for your database. The Studio component accepts an executor which accesses a custom endpoint in your backend. The backend uses your API key to identify the correct Prisma Postgres instance and sends the SQL query to it.
The @prisma/studio-core provides Studio, a React component which renders Prisma Studio for your database. The Studio component accepts an executor which accesses a custom endpoint in your backend. The backend uses your API key to identify the correct Prisma Postgres instance and sends the SQL query to it.
Next, set up a backend endpoint that Prisma Studio can communicate with. This endpoint receives SQL queries from the embedded Studio UI, forwards them to your Prisma Postgres database, and then returns the results (or errors) back to the frontend.
To do this, create a new folder called api inside the app directory. Inside it, add a studio folder with a route.ts file. This file will handle all requests sent to /api/studio and act as the bridge between the Studio component in your frontend and the database in your backend:
title="PostgreSQL"
import "dotenv/config";
import { createPrismaPostgresHttpClient } from "@prisma/studio-core/data/ppg";
import { serializeError } from "@prisma/studio-core/data/bff";
const CORS_HEADERS = {
"Access-Control-Allow-Origin": "*", // Change to your domain in production
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Authorization",
};
// Use dynamic rendering for database operations
export const dynamic = "force-dynamic";
export async function GET() {
return Response.json({ message: "Studio API endpoint is running" }, { headers: CORS_HEADERS });
}
export async function POST(request: Request) {
try {
const body = await request.json();
const query = body.query;
if (!query) {
return Response.json([serializeError(new Error("Query is required"))], {
status: 400,
headers: CORS_HEADERS,
});
}
const url = process.env.DATABASE_URL;
if (!url) {
const message = "❌ Environment variable DATABASE_URL is missing.";
return Response.json([serializeError(new Error(message))], {
status: 500,
headers: CORS_HEADERS,
});
}
const [error, results] = await createPrismaPostgresHttpClient({
url,
}).execute(query);
if (error) {
return Response.json([serializeError(error)], {
headers: CORS_HEADERS,
});
}
return Response.json([null, results], { headers: CORS_HEADERS });
} catch (err) {
return Response.json([serializeError(err)], {
status: 400,
headers: CORS_HEADERS,
});
}
}
// Handle preflight requests for CORS
export async function OPTIONS() {
return new Response(null, { status: 204, headers: CORS_HEADERS });
}
At this point you have Prisma Studio running inside your Next.js application and connected to your database. You can browse, edit, and manage your data without leaving your app. To make this setup production-ready, consider these improvements:
Add authentication: Currently, anyone who can open your app has access to Prisma Studio. Add user authentication and only allow specific roles (for example, admins) to use the embedded Studio. You can do this by checking authentication tokens in your /api/studio endpoint before running queries.
Use environment-specific configuration: In development you may want a test database, while in production you'll need a separate live database. Update your .env file to use different DATABASE_URL values for each environment, and confirm that your /api/studio endpoint is reading the correct one.
Apply custom styling: The Studio component ships with a default look. Pass in your own theme and adjust colors, typography, or branding to match the rest of your application. This helps Studio feel like a native part of your app rather than a standalone tool.
By adding authentication, environment-specific settings, and styling, you move from a working demo to a production setup.
