https://github.com/mongoosejs/studio
A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.
https://github.com/mongoosejs/studio
mongodb mongodb-gui mongodb-orm mongoose mongoose-plugin
Last synced: about 2 months ago
JSON representation
A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.
- Host: GitHub
- URL: https://github.com/mongoosejs/studio
- Owner: mongoosejs
- License: apache-2.0
- Created: 2022-08-28T20:29:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2026-01-22T01:18:02.000Z (2 months ago)
- Last Synced: 2026-01-22T11:26:48.428Z (2 months ago)
- Topics: mongodb, mongodb-gui, mongodb-orm, mongoose, mongoose-plugin
- Language: JavaScript
- Homepage: https://mongoosestudio.app
- Size: 1.31 MB
- Stars: 16
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Mongoose Studio
A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.
## Getting Started
Mongoose Studio is meant to run as a [sidecar](https://learn.microsoft.com/en-us/azure/architecture/patterns/sidecar) to your Node.js application, using the same Mongoose connection config.
If your app runs on `acme.app`, Studio will be on `acme.app/studio` or whichever path you prefer.
For local dev, if your app runs on `localhost:3000`, Studio will be on `localhost:3000/studio`.
By default, Mongoose Studio does **not** provide any authentication or authorization.
You can use Mongoose Studio for free for local development, but we recommend [Mongoose Studio Pro](https://studio.mongoosejs.io/#pricing) for when you want to go into production.
First, `npm install @mongoosejs/studio`.
### Express
Mongoose Studio can be mounted as Express middleware as follows.
```javascript
const mongoose = require('mongoose');
const studio = require('@mongoosejs/studio/express');
// Mount Mongoose Studio on '/studio'
// If your models are registered on a different connection, pass in the connection instead of `mongoose`
app.use('/studio', await studio('/studio/api', mongoose));
````
If you have a Mongoose Studio Pro API key, you can set it as follows:
```javascript
const opts = process.env.MONGOOSE_STUDIO_API_KEY ? { apiKey: process.env.MONGOOSE_STUDIO_API_KEY } : {};
// Optionally specify which ChatGPT model to use for chat messages
opts.model = 'gpt-4o-mini';
// Provide your own OpenAI, Anthropic, or Google Gemini API key to run chat completions locally
opts.openAIAPIKey = process.env.OPENAI_API_KEY;
opts.anthropicAPIKey = process.env.ANTHROPIC_API_KEY;
opts.googleGeminiAPIKey = process.env.GOOGLE_GEMINI_API_KEY;
// Mount Mongoose Studio on '/studio'
app.use('/studio', await studio('/studio/api', mongoose, opts));
```
### Next.js
First, add `withMongooseStudio` to your `next.config.js` file:
```javascript
import withMongooseStudio from '@mongoosejs/studio/next';
// Mount Mongoose Studio frontend on /studio
export default withMongooseStudio({
// Your Next.js config here
reactStrictMode: true,
});
```
Then, add `pages/api/studio.js` to your Next.js project to host the Mongoose Studio API:
```javascript
// Make sure to import the database connection
import db from '../../src/db';
import studio from '@mongoosejs/studio/backend/next';
const handler = studio(
db, // Mongoose connection or Mongoose global. Or null to use `import mongoose`.
{
apiKey: process.env.MONGOOSE_STUDIO_API_KEY, // optional
connection: db, // Optional: Connection or Mongoose global. If omitted, will use `import mongoose`
connectToDB: async () => { /* connection logic here */ }, // Optional: if you need to call a function to connect to the database put it here
}
);
export default handler;
```
### Netlify
[Here is a full example of how to add Mongoose Studio to a Netlify repo](https://github.com/mongoosejs/studio.mongoosejs.io/commit/8b02ea367c8a1b7b4bcab290708f57d58f08210b).
1) Copy the Mongoose Studio frontend into `public/studio` automatically in `npm run build`.
```javascript
const { execSync } = require('child_process');
// Sign up for Mongoose Studio Pro to get an API key, or omit `apiKey` for local dev.
const opts = {
apiKey: process.env.MONGOOSE_STUDIO_API_KEY,
// Optionally specify which ChatGPT model to use for chat messages
model: 'gpt-4o-mini',
// Provide your own OpenAI, Anthropic, or Google Gemini API key to run chat completions locally
openAIAPIKey: process.env.OPENAI_API_KEY,
anthropicAPIKey: process.env.ANTHROPIC_API_KEY,
googleGeminiAPIKey: process.env.GOOGLE_GEMINI_API_KEY
};
console.log('Creating Mongoose studio', opts);
require('@mongoosejs/studio/frontend')(`/.netlify/functions/studio`, true, opts).then(() => {
execSync(`
mkdir -p ./public/imdb
cp -r ./node_modules/@mongoosejs/studio/frontend/public/* ./public/imdb/
`);
});
```
2) Create a `/studio` Netlify function in `netlify/functions/studio.js`, or wherever your Netlify functions directory is. The function path should match the `/.netlify/functions/studio` parameter in the build script above.
```javascript
const mongoose = require('mongoose');
const handler = require('@mongoosejs/studio/backend/netlify')({
apiKey: process.env.MONGOOSE_STUDIO_API_KEY,
model: 'gpt-4o-mini',
openAIAPIKey: process.env.OPENAI_API_KEY,
anthropicAPIKey: process.env.ANTHROPIC_API_KEY,
googleGeminiAPIKey: process.env.GOOGLE_GEMINI_API_KEY
}).handler;
let conn = null;
module.exports = {
handler: async function studioHandler(params) {
if (conn == null) {
conn = await mongoose.connect(process.env.MONGODB_CONNECTION_STRING, { serverSelectionTimeoutMS: 3000 });
}
return handler.apply(null, arguments);
}
};
```
3) Redeploy and you're live!
Try [our IMDB demo](https://studio.mongoosejs.io/imdb/#/) for an example of Mongoose Studio running on Netlify, or check out the [studio.mongoosejs.io GitHub repo](https://github.com/mongoosejs/studio.mongoosejs.io) for the full source code.