- Notifications
You must be signed in to change notification settings - Fork0
mongoosejs/studio
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.
Mongoose Studio is meant to run as asidecar to your Node.js application, using the same Mongoose connection config.If your app runs onacme.app, Studio will be onacme.app/studio or whichever path you prefer.For local dev, if your app runs onlocalhost:3000, Studio will be onlocalhost:3000/studio.
By default, Mongoose Studio doesnot provide any authentication or authorization.You can use Mongoose Studio for free for local development, but we recommendMongoose Studio Pro for when you want to go into production.
First,npm install @mongoosejs/studio.
Mongoose Studio can be mounted as Express middleware as follows.
constmongoose=require('mongoose');conststudio=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',awaitstudio('/studio/api',mongoose));
If you have a Mongoose Studio Pro API key, you can set it as follows:
constopts=process.env.MONGOOSE_STUDIO_API_KEY ?{apiKey:process.env.MONGOOSE_STUDIO_API_KEY} :{};// Optionally specify which ChatGPT model to use for chat messagesopts.model='gpt-4o-mini';// Provide your own OpenAI, Anthropic, or Google Gemini API key to run chat completions locallyopts.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',awaitstudio('/studio/api',mongoose,opts));
First, addwithMongooseStudio to yournext.config.js file:
importwithMongooseStudiofrom'@mongoosejs/studio/next';// Mount Mongoose Studio frontend on /studioexportdefaultwithMongooseStudio({// Your Next.js config herereactStrictMode:true,});
Then, addpages/api/studio.js to your Next.js project to host the Mongoose Studio API:
// Make sure to import the database connectionimportdbfrom'../../src/db';importstudiofrom'@mongoosejs/studio/backend/next';consthandler=studio(db,// Mongoose connection or Mongoose global. Or null to use `import mongoose`.{apiKey:process.env.MONGOOSE_STUDIO_API_KEY,// optionalconnection: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});exportdefaulthandler;
Here is a full example of how to add Mongoose Studio to a Netlify repo.
- Copy the Mongoose Studio frontend into
public/studioautomatically innpm run build.
const{ execSync}=require('child_process');// Sign up for Mongoose Studio Pro to get an API key, or omit `apiKey` for local dev.constopts={apiKey:process.env.MONGOOSE_STUDIO_API_KEY,// Optionally specify which ChatGPT model to use for chat messagesmodel:'gpt-4o-mini',// Provide your own OpenAI, Anthropic, or Google Gemini API key to run chat completions locallyopenAIAPIKey: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/ `);});
- Create a
/studioNetlify function innetlify/functions/studio.js, or wherever your Netlify functions directory is. The function path should match the/.netlify/functions/studioparameter in the build script above.
constmongoose=require('mongoose');consthandler=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;letconn=null;module.exports={handler:asyncfunctionstudioHandler(params){if(conn==null){conn=awaitmongoose.connect(process.env.MONGODB_CONNECTION_STRING,{serverSelectionTimeoutMS:3000});}returnhandler.apply(null,arguments);}};
- Redeploy and you're live!
Tryour IMDB demo for an example of Mongoose Studio running on Netlify, or check out thestudio.mongoosejs.io GitHub repo for the full source code.
About
The AI-enabled MongoDB GUI
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.