@mongoosejs/studio 0.5.14 → 0.6.0

package/frontend/public/tw.css

@@ -1173,6 +1173,10 @@ video {
   height: 45vh;
 }
 
+.h-\[55vh\] {
+  height: 55vh;
+}
+
 .h-full {
   height: 100%;
 }
@@ -1205,6 +1209,10 @@ video {
   max-height: 55vh;
 }
 
+.max-h-\[65vh\] {
+  max-height: 65vh;
+}
+
 .min-h-0 {
   min-height: 0px;
 }

package/frontend/src/api.js

@@ -164,6 +164,17 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('', { action: 'ChatMessage.executeScript', ...params }).then(res => res.data);
     }
   };
+  exports.Script = {
+    createScript(params) {
+      return client.post('', { action: 'Script.createScript', ...params }).then(res => res.data);
+    },
+    executeScript(params) {
+      return client.post('', { action: 'Script.executeScript', ...params }).then(res => res.data);
+    },
+    getScript(params) {
+      return client.post('', { action: 'Script.getScript', ...params }).then(res => res.data);
+    }
+  };
   exports.Model = {
     addField(params) {
       return client.post('', { action: 'Model.addField', ...params }).then(res => res.data);
@@ -363,6 +374,17 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('/ChatMessage/executeScript', params).then(res => res.data);
     }
   };
+  exports.Script = {
+    createScript: function createScript(params) {
+      return client.post('/Script/createScript', params).then(res => res.data);
+    },
+    executeScript: function executeScript(params) {
+      return client.post('/Script/executeScript', params).then(res => res.data);
+    },
+    getScript: function getScript(params) {
+      return client.post('/Script/getScript', params).then(res => res.data);
+    }
+  };
   exports.Model = {
     addField(params) {
       return client.post('/Model/addField', params).then(res => res.data);

package/frontend/src/index.js

@@ -20,7 +20,7 @@ const {
 } = require('./_util/recent-pages-history');
 appendCSS(require('vue-toastification/dist/index.css'));
 
-const TRACKED_RECENT_PAGE_ROUTE_NAMES = new Set(['model', 'document', 'dashboard', 'chat']);
+const TRACKED_RECENT_PAGE_ROUTE_NAMES = new Set(['model', 'document', 'dashboard', 'chat', 'script']);
 const CHAT_ROUTE_NAMES = new Set(['chat index', 'chat']);
 
 function formatHistoryLabel(route) {
@@ -42,6 +42,9 @@ function formatHistoryLabel(route) {
   if (route.name === 'chat') {
     return route.params?.threadId ? `Chat: ${route.params.threadId}` : 'Chat';
   }
+  if (route.name === 'script') {
+    return route.params?.scriptId ? `Script: ${route.params.scriptId}` : 'Script';
+  }
   const normalizedPath = route.path.replace(/^\//, '');
   return normalizedPath || 'Home';
 }
@@ -332,6 +335,11 @@ const router = VueRouter.createRouter({
 
 // Add global navigation guard
 router.beforeEach((to, from, next) => {
+  if (to.name === 'mcp' && window.MONGOOSE_STUDIO_CONFIG.mcp === false) {
+    next({ name: window.state?.roles?.[0] === 'dashboards' ? 'dashboards' : 'root' });
+    return;
+  }
+
   // Skip auth check for authorized (public) routes
   if (to.meta.authorized) {
     next();

package/frontend/src/mcp/mcp.html

@@ -0,0 +1,55 @@
+<div class="mx-auto max-w-5xl py-6 px-2">
+  <h1 class="text-xl font-bold text-content">MCP</h1>
+  <p class="mt-2 text-sm text-content-secondary">
+    Connect an MCP client such as Claude or ChatGPT to this Mongoose Studio workspace.
+  </p>
+
+  <div class="mt-6 rounded-lg border border-edge bg-surface p-4">
+    <label for="mcp-url" class="block text-sm font-medium text-content">MCP URL</label>
+    <div class="mt-2 flex gap-2">
+      <input
+        id="mcp-url"
+        type="text"
+        readonly
+        :value="mcpUrl"
+        class="min-w-0 flex-1 rounded-md bg-muted px-3 py-2 font-mono text-sm text-content outline outline-1 -outline-offset-1 outline-edge-strong"
+      />
+      <async-button
+        type="button"
+        @click="copyMCPUrl"
+        class="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover">
+        Copy
+      </async-button>
+    </div>
+  </div>
+
+  <div class="mt-8 grid gap-6 text-sm text-content-secondary">
+    <section>
+      <h2 class="text-base font-semibold text-content">Authentication and network access</h2>
+      <p class="mt-2">
+        Without a Mongoose Studio API key, the MCP endpoint uses the deployment's
+        <code class="rounded bg-muted px-1 py-0.5">bindIp</code> restrictions. By default, this means an MCP client can only connect from localhost.
+      </p>
+      <p class="mt-2">
+        With an API key, MCP clients such as Claude and ChatGPT connect through OAuth. You will be prompted to sign in to Mongoose Studio and approve the connection before the client receives access.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="text-base font-semibold text-content">Permissions</h2>
+      <p class="mt-2">
+        When an API key is configured, MCP access is scoped to the signed-in user's workspace permissions. During authorization, the user can explicitly grant fewer permissions, such as read-only access or a lower execution time limit. An MCP connection can never receive more access than that user already has.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="text-base font-semibold text-content">Supported operations</h2>
+      <p class="mt-2">
+        The MCP server supports database CRUD operations, dashboards, and script creation. It does not execute standalone scripts directly.
+      </p>
+      <p class="mt-2">
+        An MCP client can create a script and return a Mongoose Studio URL. A person can then open that URL, review or edit the code, and choose whether to dry run or execute it.
+      </p>
+    </section>
+  </div>
+</div>

package/frontend/src/mcp/mcp.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const template = require('./mcp.html');
+
+module.exports = {
+  template,
+  computed: {
+    mcpUrl() {
+      const configuredUrl = window.MONGOOSE_STUDIO_CONFIG.mcpUrl;
+      if (configuredUrl) {
+        return configuredUrl;
+      }
+
+      const url = new URL(window.location.href);
+      url.hash = '';
+      url.search = '';
+      url.pathname = `${url.pathname.replace(/\/+$/, '')}/mcp`;
+      return url.toString();
+    }
+  },
+  methods: {
+    async copyMCPUrl() {
+      await navigator.clipboard.writeText(this.mcpUrl);
+      this.$toast.success('MCP URL copied!');
+    }
+  }
+};

package/frontend/src/navbar/navbar.html

@@ -147,6 +147,10 @@
             <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
           </svg>
         </span>
+        <router-link v-if="mcpEnabled" to="/mcp" @click="showFlyout = false" class="cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle" role="menuitem" tabindex="-1">MCP</router-link>
+        <span v-else class="block px-4 py-2 text-sm text-gray-300 cursor-not-allowed" role="menuitem" title="MCP is disabled for this deployment">
+          MCP
+        </span>
         <span @click="logout" class="cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</span>
       </div>
     </div>
@@ -287,6 +291,10 @@
               <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
             </svg>
           </span>
+          <router-link v-if="mcpEnabled" to="/mcp" class="block px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle">MCP</router-link>
+          <span v-else class="block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed" title="MCP is disabled for this deployment">
+            MCP
+          </span>
           <span @click="logout" class="block px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle cursor-pointer">Sign out</span>
         </div>
       </div>

package/frontend/src/navbar/navbar.js

@@ -103,6 +103,9 @@ module.exports = app => app.component('navbar', {
     hasTaskVisualizer() {
       return !!window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer;
     },
+    mcpEnabled() {
+      return window.MONGOOSE_STUDIO_CONFIG.mcp !== false;
+    },
     recentPagesList() {
       return this.localRecentPages;
     },

package/frontend/src/routes.js

@@ -69,6 +69,14 @@ module.exports = {
         authorized: false
       }
     },
+    {
+      path: '/mcp',
+      name: 'mcp',
+      component: 'mcp',
+      meta: {
+        authorized: true
+      }
+    },
     {
       path: '/tasks',
       name: 'tasks',
@@ -108,6 +116,14 @@ module.exports = {
       meta: {
         authorized: true
       }
+    },
+    {
+      path: '/script/:scriptId',
+      name: 'script',
+      component: 'script',
+      meta: {
+        authorized: true
+      }
     }
   ],
   roleAccess,

package/frontend/src/script/script.html

@@ -0,0 +1,105 @@
+<div class="px-4 py-6">
+  <div v-if="status === 'loading'" class="max-w-5xl mx-auto text-center">
+    <img src="images/loader.gif" class="inline mt-10" alt="Loading script">
+  </div>
+
+  <div v-else-if="script" class="max-w-5xl mx-auto">
+    <div class="flex items-center justify-between mb-4">
+      <div>
+        <h1 class="text-xl font-semibold text-content">Script</h1>
+        <p class="text-xs text-content-tertiary font-mono">{{ script._id }}</p>
+      </div>
+      <div class="flex items-center">
+        <button
+          v-if="!isEditing"
+          class="px-3 py-1.5 mr-2 text-sm bg-gray-700 text-white rounded hover:bg-gray-600"
+          @click="startEditing">
+          Edit
+        </button>
+        <div class="relative flex items-center">
+          <async-button
+            class="px-3 py-1.5 text-sm bg-primary hover:bg-primary-hover text-primary-text rounded-l-md"
+            @click="executeScript">
+            {{ selectedRunLabel }}
+          </async-button>
+          <button
+            class="px-1.5 py-1.5 text-sm bg-primary hover:bg-primary-hover text-primary-text border-l border-black/10 rounded-r-md"
+            @click.stop="showRunDropdown = !showRunDropdown">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+            </svg>
+          </button>
+          <div
+            v-if="showRunDropdown"
+            class="absolute right-0 top-full z-10 mt-1 w-40 rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5">
+            <button class="block w-full px-4 py-2 text-left text-xs text-content-secondary hover:bg-muted" @click="selectRunMode('run')">
+              Run
+            </button>
+            <button
+              class="block w-full px-4 py-2 text-left text-xs"
+              :class="canUseDryRun ? 'text-content-secondary hover:bg-muted' : 'cursor-not-allowed text-gray-400'"
+              :disabled="!canUseDryRun"
+              :title="canUseDryRun ? null : 'Dry run mode requires MongoDB transaction support'"
+              @click="selectRunMode('dryRun')">
+              Dry Run
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative border rounded bg-surface text-content text-sm overflow-hidden">
+      <div class="flex border-b py-1 pl-1 text-xs font-medium bg-surface">
+        <button
+          class="px-4 py-1 rounded-l-md border-r border-edge-strong font-semibold"
+          :class="activeTab === 'code' ? 'bg-gray-700 text-white shadow' : 'bg-muted text-gray-600'"
+          @click="activeTab = 'code'">
+          Code
+        </button>
+        <button
+          class="px-4 py-1 rounded-r-md font-semibold"
+          :class="activeTab === 'output' ? 'bg-gray-700 text-white shadow' : 'bg-muted text-gray-600'"
+          @click="activeTab = 'output'">
+          Output<span v-if="isDryRunResult" class="ml-1">[Dry Run]</span>
+        </button>
+      </div>
+
+      <div v-show="activeTab === 'code'" class="max-h-[65vh] overflow-y-auto">
+        <div v-if="isEditing" class="flex flex-col">
+          <ace-editor
+            v-model="editedScript"
+            mode="javascript"
+            :line-numbers="true"
+            class="w-full h-[55vh] min-h-[300px]"
+          />
+          <div class="flex justify-end p-2 border-t border-edge">
+            <button class="px-3 py-1.5 text-xs bg-gray-300 text-gray-800 rounded hover:bg-gray-400" @click="cancelEditing">
+              Cancel
+            </button>
+          </div>
+        </div>
+        <pre v-else class="whitespace-pre-wrap !my-0 bg-muted"><code ref="code" class="language-javascript" v-text="script.script"></code></pre>
+      </div>
+
+      <div v-show="activeTab === 'output'" class="p-3 max-h-[65vh] overflow-y-auto border-t">
+        <div v-if="script.executionResult?.error" class="rounded-md bg-red-50 p-4 mb-3 text-sm text-red-800">
+          {{ script.executionResult.error }}
+        </div>
+        <dashboard-result
+          v-if="script.executionResult?.output != null"
+          :result="script.executionResult.output">
+        </dashboard-result>
+        <pre v-else-if="!script.executionResult?.error">No output</pre>
+
+        <div v-if="script.executionResult?.logs" class="mt-3 pt-3 border-t border-edge">
+          <div class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Console</div>
+          <pre class="mt-1 bg-muted text-content p-3 rounded whitespace-pre-wrap overflow-x-auto max-h-[280px]">{{ script.executionResult.logs }}</pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="max-w-5xl mx-auto text-content-secondary">
+    No script with the given id could be found.
+  </div>
+</div>

package/frontend/src/script/script.js

@@ -0,0 +1,98 @@
+/* global Prism */
+'use strict';
+
+const api = require('../api');
+const baseComponent = require('../_util/baseComponent');
+const template = require('./script.html');
+
+module.exports = {
+  template,
+  extends: baseComponent,
+  props: ['scriptId'],
+  inject: ['state'],
+  data() {
+    return {
+      status: 'loading',
+      script: null,
+      editedScript: '',
+      isEditing: false,
+      activeTab: 'code',
+      selectedRunMode: 'run',
+      showRunDropdown: false
+    };
+  },
+  computed: {
+    canUseDryRun() {
+      return this.state.capabilities?.supportsTransactions !== false;
+    },
+    selectedRunLabel() {
+      return this.selectedRunMode === 'dryRun' ? 'Dry Run' : 'Run';
+    },
+    isDryRunResult() {
+      return this.script?.executionFinishedAt != null && this.script?.dryRun === true;
+    }
+  },
+  methods: {
+    async loadScript() {
+      this.status = 'loading';
+      try {
+        const { script } = await api.Script.getScript({ scriptId: this.scriptId });
+        this.script = script;
+        this.editedScript = script.script;
+        this.activeTab = script.executionResult == null ? 'code' : 'output';
+      } finally {
+        this.status = 'loaded';
+        this.highlightCode();
+      }
+    },
+    startEditing() {
+      this.editedScript = this.script.script;
+      this.isEditing = true;
+      this.activeTab = 'code';
+    },
+    cancelEditing() {
+      this.editedScript = this.script.script;
+      this.isEditing = false;
+      this.highlightCode();
+    },
+    selectRunMode(mode) {
+      if (mode === 'dryRun' && !this.canUseDryRun) {
+        return;
+      }
+      this.selectedRunMode = mode;
+      this.showRunDropdown = false;
+    },
+    async executeScript() {
+      this.showRunDropdown = false;
+      try {
+        const { script } = await api.Script.executeScript({
+          scriptId: this.scriptId,
+          script: this.isEditing ? this.editedScript : this.script.script,
+          dryRun: this.selectedRunMode === 'dryRun'
+        });
+        this.script = script;
+        this.editedScript = script.script;
+        this.isEditing = false;
+        this.activeTab = 'output';
+        this.$toast.success(this.script.dryRun ? 'Dry run completed!' : 'Script executed successfully!');
+      } catch (err) {
+        const { script } = await api.Script.getScript({ scriptId: this.scriptId });
+        this.script = script;
+        this.editedScript = script.script;
+        this.isEditing = false;
+        this.activeTab = 'output';
+        throw err;
+      }
+    },
+    highlightCode() {
+      this.$nextTick(() => {
+        if (this.$refs.code) {
+          Prism.highlightElement(this.$refs.code);
+        }
+      });
+    }
+  },
+  mounted() {
+    return this.loadScript();
+  }
+};

package/index.d.ts

@@ -5,7 +5,16 @@ declare module '@mongoosejs/studio' {
   const express: (
     path?: string,
     connOrMongoose?: Connection | Mongoose,
-    options?: { apiKey?: string; bindIp?: string | string[] | null; maxTimeMS?: number }
+    options?: {
+      apiKey?: string;
+      bindIp?: string | string[] | null;
+      maxTimeMS?: number;
+      /** Serve the MCP endpoint at `<mount>/mcp`. Defaults to true. */
+      mcp?: boolean;
+      readPreference?: 'primary' | 'secondaryPreferred' | 'secondary';
+      /** Public base URL Mongoose Studio is mounted on. Required when MCP and apiKey are enabled. */
+      publicUrl?: string;
+    }
   ) => Promise<RequestHandler>;
 
   const studio: {

package/nest.d.ts

@@ -10,6 +10,9 @@ declare module '@mongoosejs/studio/nest' {
     apiKey?: string;
     bindIp?: string | string[] | null;
     maxTimeMS?: number;
+    mcp?: boolean;
+    readPreference?: 'primary' | 'secondaryPreferred' | 'secondary';
+    publicUrl?: string;
     [key: string]: any;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.5.14",
+  "version": "0.6.0",
   "description": "AI-Powered Data Workspace for MongoDB: Turn your MongoDB data into dashboards, maps, and interactive workflows - powered by your Mongoose models and AI.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {
@@ -12,12 +12,13 @@
     "@ai-sdk/anthropic": "2.x",
     "@ai-sdk/google": "2.x",
     "@ai-sdk/openai": "2.x",
+    "@modelcontextprotocol/sdk": "^1.30.1",
     "ace-builds": "^1.43.6",
     "ai": "5.x",
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",
     "ejson": "^2.2.3",
-    "extrovert": "^0.2.0",
+    "extrovert": "^0.2.1",
     "marked": "15.0.12",
     "mpath": "^0.9.0",
     "node-inspect-extracted": "3.x",
@@ -28,7 +29,8 @@
     "vue": "3.x",
     "vue-toastification": "^2.0.0-rc.5",
     "webpack": "5.x",
-    "xss": "^1.0.15"
+    "xss": "^1.0.15",
+    "zod": "^4.6.5"
   },
   "peerDependencies": {
     "@nestjs/common": "10.x || 11.x",

package/vercel.d.ts

@@ -10,6 +10,8 @@ declare module '@mongoosejs/studio/vercel' {
     changeStream?: boolean;
     /** Maximum execution time in milliseconds for MongoDB operations. */
     maxTimeMS?: number;
+    /** Read preference for Studio reads against the application database. */
+    readPreference?: 'primary' | 'secondaryPreferred' | 'secondary';
     /** Chat model name, e.g. 'gpt-4o-mini' */
     model?: string;
     openAIAPIKey?: string;

package/CLAUDE.md

@@ -1,7 +0,0 @@
-# Repository guidance
-
-The Mongoose connection passed to Studio is owned by the host application.
-Do not change connection-level settings, options, configuration, models, middleware, plugins, collection objects, or methods on the application connection to implement Studio behavior.
-Apply Studio-specific behavior to individual operations whenever possible.
-When isolation requires a derived connection, copy any Mongoose state that `useDb()` shares with its source before changing the derived connection.
-Sandbox wrappers must remain confined to sandbox-owned models and collections.