@mongoosejs/studio 0.1.10 → 0.1.12

package/README.md

@@ -34,8 +34,10 @@ If you have a Mongoose Studio Pro API key, you can set it as follows:
 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 API key to run chat completions locally
+// 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));
@@ -88,8 +90,10 @@ 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 API key to run chat completions locally
-  openAIAPIKey: process.env.OPENAI_API_KEY
+  // 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(() => {
@@ -108,7 +112,9 @@ 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
+  openAIAPIKey: process.env.OPENAI_API_KEY,
+  anthropicAPIKey: process.env.ANTHROPIC_API_KEY,
+  googleGeminiAPIKey: process.env.GOOGLE_GEMINI_API_KEY
 }).handler;
 
 let conn = null;

package/backend/actions/ChatThread/createChatMessage.js

@@ -16,16 +16,13 @@ const CreateChatMessageParams = new Archetype({
   content: {
     $type: 'string'
   },
-  authorization: {
-    $type: 'string'
-  },
   roles: {
     $type: ['string']
   }
 }).compile('CreateChatMessageParams');
 
 module.exports = ({ db, studioConnection, options }) => async function createChatMessage(params) {
-  const { chatThreadId, initiatedById, content, script, authorization, roles } = new CreateChatMessageParams(params);
+  const { chatThreadId, initiatedById, content, script, roles } = new CreateChatMessageParams(params);
   const ChatThread = studioConnection.model('__Studio_ChatThread');
   const ChatMessage = studioConnection.model('__Studio_ChatMessage');
 
@@ -54,6 +51,7 @@ module.exports = ({ db, studioConnection, options }) => async function createCha
   if (chatThread.title == null) {
     const threadText = messages
       .filter(m => m.role === 'user' || m.role === 'assistant')
+      .concat([{ role: 'user', content }])
       .map(m => `${m.role.toUpperCase()}: ${m.content}`)
       .join('\n')
       .slice(0, 5000);

package/backend/actions/ChatThread/index.js

@@ -5,3 +5,4 @@ exports.createChatThread = require('./createChatThread');
 exports.getChatThread = require('./getChatThread');
 exports.listChatThreads = require('./listChatThreads');
 exports.shareChatThread = require('./shareChatThread');
+exports.streamChatMessage = require('./streamChatMessage');

package/backend/actions/ChatThread/streamChatMessage.js

@@ -0,0 +1,158 @@
+'use strict';
+
+const Archetype = require('archetype');
+const authorize = require('../../authorize');
+const callLLM = require('../../integrations/callLLM');
+const streamLLM = require('../../integrations/streamLLM');
+const getModelDescriptions = require('../../helpers/getModelDescriptions');
+const mongoose = require('mongoose');
+
+const CreateChatMessageParams = new Archetype({
+  chatThreadId: {
+    $type: mongoose.Types.ObjectId
+  },
+  initiatedById: {
+    $type: mongoose.Types.ObjectId
+  },
+  content: {
+    $type: 'string'
+  },
+  roles: {
+    $type: ['string']
+  }
+}).compile('CreateChatMessageParams');
+
+module.exports = ({ db, studioConnection, options }) => async function* createChatMessage(params) {
+  const { chatThreadId, initiatedById, content, script, roles } = new CreateChatMessageParams(params);
+  const ChatThread = studioConnection.model('__Studio_ChatThread');
+  const ChatMessage = studioConnection.model('__Studio_ChatMessage');
+
+  await authorize('ChatThread.createChatMessage', roles);
+
+  // Check that the user owns the thread
+  const chatThread = await ChatThread.findOne({ _id: chatThreadId });
+  if (!chatThread) {
+    throw new Error('Chat thread not found');
+  }
+  if (initiatedById != null && chatThread.userId.toString() !== initiatedById.toString()) {
+    throw new Error('Not authorized');
+  }
+
+  const messages = await ChatMessage.find({ chatThreadId }).sort({ createdAt: 1 });
+  const llmMessages = messages.map(m => ({
+    role: m.role,
+    content: [{
+      type: 'text',
+      text: m.content
+    }]
+  }));
+  llmMessages.push({ role: 'user', content: [{ type: 'text', text: content }] });
+
+  let summarizePromise = Promise.resolve();
+  if (chatThread.title == null) {
+    const threadText = messages
+      .filter(m => m.role === 'user' || m.role === 'assistant')
+      .concat([{ role: 'user', content }])
+      .map(m => `${m.role.toUpperCase()}: ${m.content}`)
+      .join('\n')
+      .slice(0, 5000);
+    summarizePromise = callLLM(
+      [{
+        role: 'user',
+        content: [{
+          type: 'text',
+          text: 'Summarize the following chat thread into a concise, helpful title (≤ 6 words).\n\n' +
+            `${threadText}\n\n` +
+            'Return only the title.'
+        }]
+      }],
+      'You are a helpful assistant that summarizes chat threads into titles.',
+      options
+    ).then(res => {
+      const title = res.text;
+      chatThread.title = title;
+      return chatThread.save();
+    });
+  }
+
+  const modelDescriptions = getModelDescriptions(db);
+  const system = systemPrompt + '\n\n' + modelDescriptions + (options?.context ? '\n\n' + options.context : '');
+
+  const userChatMessage = await ChatMessage.create({
+    chatThreadId,
+    role: 'user',
+    content,
+    script,
+    executionResult: null
+  });
+
+  yield { chatMessage: userChatMessage };
+
+  const assistantChatMessage = new ChatMessage({
+    chatThreadId,
+    role: 'assistant',
+    content: '',
+    script: null,
+    executionResult: null
+  });
+  const textStream = streamLLM(llmMessages, system, options);
+  let count = 0;
+  for await (const textPart of textStream) {
+    assistantChatMessage.content += textPart;
+    // Only save every 10th chunk for performance
+    if (count++ % 10 === 0) {
+      await assistantChatMessage.save();
+    }
+    yield { textPart };
+  }
+
+  await assistantChatMessage.save();
+  yield { chatMessage: assistantChatMessage };
+
+  const updatedChatThread = await summarizePromise;
+  if (updatedChatThread != null) {
+    yield { chatThread: updatedChatThread };
+  }
+  return {};
+};
+
+const systemPrompt = `
+  You are a data querying assistant who writes scripts for users accessing MongoDB data using Node.js and Mongoose.
+
+  Keep scripts concise. Avoid unnecessary comments, error handling, and temporary variables.
+
+  Do not write any imports or require() statements, that will cause the script to break.
+
+  If the user approves the script, the script will run in the Node.js server in a sandboxed vm.createContext() call with only 1 global variable: db, which contains the Mongoose connection. The script return value will then send the response via JSON to the client. Be aware that the result of the query will be serialized to JSON before being displayed to the user. MAKE SURE TO RETURN A VALUE FROM THE SCRIPT.
+
+  Optimize scripts for readability first, followed by reliability, followed by performance. Avoid using the aggregation framework unless explicitly requested by the user. Use indexed fields in queries where possible.
+
+  Assume the user has pre-defined schemas and models. Do not define any new schemas or models for the user.
+
+  Use async/await where possible. Assume top-level await is allowed.
+
+  Write at most one script, unless the user explicitly asks for multiple scripts.
+
+  Think carefully about the user's input and identify the models referred to by the user's query.
+
+  Format output as Markdown, including code fences for any scripts the user requested.
+
+  Add a brief text description of what the script does.
+
+  If the user's query is best answered with a chart, return a Chart.js 4 configuration as \`return { $chart: chartJSConfig };\`. Disable ChartJS animation by default unless user asks for it. Set responsive: true, maintainAspectRatio: false options unless the user explicitly asks.
+
+  If the user\'s query is best answered by a map, return an object { $featureCollection } which contains a GeoJSON FeatureCollection
+
+  Example output:
+
+  The following script counts the number of users which are not deleted.
+
+  \`\`\`javascript
+  const users = await db.model('User').find({ isDeleted: false });
+  return { numUsers: users.length };
+  \`\`\`
+
+  -----------
+
+  Here is a description of the user's models. Assume these are the only models available in the system unless explicitly instructed otherwise by the user.
+  `.trim();

package/backend/actions/Model/createDocument.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
-const { EJSON } = require('bson');
+const { EJSON } = require('mongodb/lib/bson');
 const authorize = require('../../authorize');
 
 const CreateDocumentParams = new Archetype({

package/backend/integrations/callLLM.js

@@ -1,22 +1,44 @@
 'use strict';
 
 const { createAnthropic } = require('@ai-sdk/anthropic');
+const { createGoogleGenerativeAI } = require('@ai-sdk/google');
 const { createOpenAI } = require('@ai-sdk/openai');
 const { generateText } = require('ai');
 
 module.exports = async function callLLM(messages, system, options) {
   let provider = null;
   let model = null;
-  if (options?.openAIAPIKey && options?.anthropicAPIKey) {
-    throw new Error('Cannot set both OpenAI and Anthropic API keys');
-  }
+  const providers = [];
 
   if (options?.openAIAPIKey) {
-    provider = createOpenAI({ apiKey: options.openAIAPIKey });
-    model = options?.model ?? 'gpt-4o-mini';
-  } else if (options?.anthropicAPIKey) {
-    provider = createAnthropic({ apiKey: options.anthropicAPIKey });
-    model = options?.model ?? 'claude-haiku-4-5-20251001';
+    providers.push({
+      provider: createOpenAI({ apiKey: options.openAIAPIKey }),
+      model: options?.model ?? 'gpt-4o-mini'
+    });
+  }
+
+  if (options?.anthropicAPIKey) {
+    providers.push({
+      provider: createAnthropic({ apiKey: options.anthropicAPIKey }),
+      model: options?.model ?? 'claude-haiku-4-5-20251001'
+    });
+  }
+
+  if (options?.googleGeminiAPIKey) {
+    providers.push({
+      provider: createGoogleGenerativeAI({ apiKey: options.googleGeminiAPIKey }),
+      model: options?.model ?? 'gemini-2.5-flash'
+    });
+  }
+
+  if (providers.length > 1) {
+    throw new Error('Cannot set multiple LLM API keys');
+  }
+
+  if (providers.length > 0) {
+    const selected = providers[0];
+    provider = selected.provider;
+    model = selected.model;
   }
 
   if (provider) {

package/backend/integrations/streamLLM.js

@@ -0,0 +1,85 @@
+'use strict';
+
+const { createAnthropic } = require('@ai-sdk/anthropic');
+const { createGoogleGenerativeAI } = require('@ai-sdk/google');
+const { createOpenAI } = require('@ai-sdk/openai');
+const { streamText } = require('ai');
+
+module.exports = async function* streamLLM(messages, system, options) {
+  let provider = null;
+  let model = null;
+  const providers = [];
+
+  if (options?.openAIAPIKey) {
+    providers.push({
+      provider: createOpenAI({ apiKey: options.openAIAPIKey }),
+      model: options?.model ?? 'gpt-4o-mini'
+    });
+  }
+
+  if (options?.anthropicAPIKey) {
+    providers.push({
+      provider: createAnthropic({ apiKey: options.anthropicAPIKey }),
+      model: options?.model ?? 'claude-haiku-4-5-20251001'
+    });
+  }
+
+  if (options?.googleGeminiAPIKey) {
+    providers.push({
+      provider: createGoogleGenerativeAI({ apiKey: options.googleGeminiAPIKey }),
+      model: options?.model ?? 'gemini-2.5-flash'
+    });
+  }
+
+  if (providers.length > 1) {
+    throw new Error('Cannot set multiple LLM API keys');
+  }
+
+  if (providers.length > 0) {
+    const selected = providers[0];
+    provider = selected.provider;
+    model = selected.model;
+  }
+
+  if (provider) {
+    let error = null;
+    const { textStream } = streamText({
+      model: provider(model),
+      system,
+      messages,
+      onError(err) {
+        error = err.error;
+      }
+    });
+    for await (const chunk of textStream) {
+      yield chunk;
+    }
+    if (error) {
+      throw error;
+    }
+    return;
+  }
+
+  // If not using OpenAI, Anthropic, or Google Gemini, fallback to Mongoose (no streaming)
+  const headers = { 'Content-Type': 'application/json' };
+  const response = await fetch('https://mongoose-js.netlify.app/.netlify/functions/getChatCompletion', {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      messages,
+      model: options?.model
+    })
+  }).then(response => {
+    if (!response.ok) {
+      return response.json().then(data => {
+        throw new Error(`Mongoose Studio chat completion error: ${data.message}`);
+      });
+    }
+    return response;
+  });
+
+  const data = await response.json();
+
+  // Simulate streaming by yielding the whole response at once as a single chunk
+  yield data.response;
+};

package/frontend/public/app.js

@@ -272,6 +272,13 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     shareChatThread(params) {
       return client.post('', { action: 'ChatThread.shareChatThread', ...params }).then(res => res.data);
+    },
+    streamChatMessage: async function* streamChatMessage(params) {
+      // Don't stream on Next.js or Netlify for now.
+      const data = await client.post('', { action: 'ChatThread.createChatMessage', ...params }).then(res => res.data);
+      yield { chatMessage: data.chatMessages[0] };
+      yield { chatMessage: data.chatMessages[1] };
+      yield { chatThread: data.chatThread };
     }
   };
   exports.ChatMessage = {
@@ -388,6 +395,55 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     shareChatThread: function shareChatThread(params) {
       return client.post('/ChatThread/shareChatThread', params).then(res => res.data);
+    },
+    streamChatMessage: async function* streamChatMessage(params) {
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+      const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/ChatThread/streamChatMessage?' + new URLSearchParams(params).toString();
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: `${accessToken}`,
+          Accept: 'text/event-stream'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder('utf-8');
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        let eventEnd;
+        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
+          const eventStr = buffer.slice(0, eventEnd);
+          buffer = buffer.slice(eventEnd + 2);
+
+          // Parse SSE event
+          const lines = eventStr.split('\n');
+          let data = '';
+          for (const line of lines) {
+            if (line.startsWith('data:')) {
+              data += line.slice(5).trim();
+            }
+          }
+          if (data) {
+            try {
+              const res = JSON.parse(data);
+              yield res;
+            } catch (err) {
+              yield data;
+            }
+          }
+        }
+      }
     }
   };
   exports.ChatMessage = {
@@ -1010,14 +1066,47 @@ module.exports = app => app.component('chat', {
           }
         });
 
-        const { chatMessages, chatThread } = await api.ChatThread.createChatMessage({
-          chatThreadId: this.chatThreadId,
-          content
-        });
-        this.chatMessages.push(chatMessages[1]);
-        for (const thread of this.chatThreads) {
-          if (thread._id === chatThread._id) {
-            thread.title = chatThread.title;
+        const params = { chatThreadId: this.chatThreadId, content };
+        let userChatMessage = null;
+        let assistantChatMessage = null;
+        for await (const event of api.ChatThread.streamChatMessage(params)) {
+          if (event.chatMessage) {
+            if (!userChatMessage) {
+              userChatMessage = event.chatMessage;
+            } else {
+              const assistantChatMessageIndex = this.chatMessages.indexOf(assistantChatMessage);
+              assistantChatMessage = event.chatMessage;
+              this.chatMessages[assistantChatMessageIndex] = assistantChatMessage;
+            }
+          } else if (event.chatThread) {
+            for (const thread of this.chatThreads) {
+              if (thread._id === event.chatThread._id) {
+                thread.title = event.chatThread.title;
+              }
+            }
+          } else if (event.textPart) {
+            if (!assistantChatMessage) {
+              assistantChatMessage = {
+                content: event.textPart,
+                role: 'assistant'
+              };
+              this.chatMessages.push(assistantChatMessage);
+              assistantChatMessage = this.chatMessages[this.chatMessages.length - 1];
+              this.$nextTick(() => {
+                if (this.$refs.messagesContainer) {
+                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+                }
+              });
+            } else {
+              assistantChatMessage.content += event.textPart;
+              this.$nextTick(() => {
+                if (this.$refs.messagesContainer) {
+                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+                }
+              });
+            }
+          } else if (event.message) {
+            throw new Error(event.message);
           }
         }
 
@@ -1159,7 +1248,7 @@ module.exports = "<div>\n    <div class=\"mb-2\">\n      <textarea class=\"borde
 
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 
-const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.mjs");
+const { BSON, EJSON } = __webpack_require__(/*! mongodb/lib/bson */ "./node_modules/mongodb/lib/bson.js");
 
 const ObjectId = new Proxy(BSON.ObjectId, {
   apply(target, thisArg, argumentsList) {
@@ -1203,7 +1292,7 @@ module.exports = app => app.component('clone-document', {
   },
   mounted: function() {
     const pathsToClone = this.schemaPaths.map(x => x.path);
-    
+
     // Create a filtered version of the document data
     const filteredDoc = {};
     pathsToClone.forEach(path => {
@@ -1228,6 +1317,7 @@ module.exports = app => app.component('clone-document', {
   }
 });
 
+
 /***/ }),
 
 /***/ "./frontend/src/create-dashboard/create-dashboard.html":
@@ -16849,7 +16939,7 @@ module.exports = function stringToParts(str) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.10","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/openai":"2.x","@ai-sdk/anthropic":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0-0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.12","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","@ai-sdk/anthropic":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })
 

package/frontend/src/api.js

@@ -61,6 +61,13 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     shareChatThread(params) {
       return client.post('', { action: 'ChatThread.shareChatThread', ...params }).then(res => res.data);
+    },
+    streamChatMessage: async function* streamChatMessage(params) {
+      // Don't stream on Next.js or Netlify for now.
+      const data = await client.post('', { action: 'ChatThread.createChatMessage', ...params }).then(res => res.data);
+      yield { chatMessage: data.chatMessages[0] };
+      yield { chatMessage: data.chatMessages[1] };
+      yield { chatThread: data.chatThread };
     }
   };
   exports.ChatMessage = {
@@ -177,6 +184,55 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     },
     shareChatThread: function shareChatThread(params) {
       return client.post('/ChatThread/shareChatThread', params).then(res => res.data);
+    },
+    streamChatMessage: async function* streamChatMessage(params) {
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+      const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/ChatThread/streamChatMessage?' + new URLSearchParams(params).toString();
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: `${accessToken}`,
+          Accept: 'text/event-stream'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder('utf-8');
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        let eventEnd;
+        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
+          const eventStr = buffer.slice(0, eventEnd);
+          buffer = buffer.slice(eventEnd + 2);
+
+          // Parse SSE event
+          const lines = eventStr.split('\n');
+          let data = '';
+          for (const line of lines) {
+            if (line.startsWith('data:')) {
+              data += line.slice(5).trim();
+            }
+          }
+          if (data) {
+            try {
+              const res = JSON.parse(data);
+              yield res;
+            } catch (err) {
+              yield data;
+            }
+          }
+        }
+      }
     }
   };
   exports.ChatMessage = {

package/frontend/src/chat/chat.js

@@ -41,14 +41,47 @@ module.exports = app => app.component('chat', {
           }
         });
 
-        const { chatMessages, chatThread } = await api.ChatThread.createChatMessage({
-          chatThreadId: this.chatThreadId,
-          content
-        });
-        this.chatMessages.push(chatMessages[1]);
-        for (const thread of this.chatThreads) {
-          if (thread._id === chatThread._id) {
-            thread.title = chatThread.title;
+        const params = { chatThreadId: this.chatThreadId, content };
+        let userChatMessage = null;
+        let assistantChatMessage = null;
+        for await (const event of api.ChatThread.streamChatMessage(params)) {
+          if (event.chatMessage) {
+            if (!userChatMessage) {
+              userChatMessage = event.chatMessage;
+            } else {
+              const assistantChatMessageIndex = this.chatMessages.indexOf(assistantChatMessage);
+              assistantChatMessage = event.chatMessage;
+              this.chatMessages[assistantChatMessageIndex] = assistantChatMessage;
+            }
+          } else if (event.chatThread) {
+            for (const thread of this.chatThreads) {
+              if (thread._id === event.chatThread._id) {
+                thread.title = event.chatThread.title;
+              }
+            }
+          } else if (event.textPart) {
+            if (!assistantChatMessage) {
+              assistantChatMessage = {
+                content: event.textPart,
+                role: 'assistant'
+              };
+              this.chatMessages.push(assistantChatMessage);
+              assistantChatMessage = this.chatMessages[this.chatMessages.length - 1];
+              this.$nextTick(() => {
+                if (this.$refs.messagesContainer) {
+                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+                }
+              });
+            } else {
+              assistantChatMessage.content += event.textPart;
+              this.$nextTick(() => {
+                if (this.$refs.messagesContainer) {
+                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+                }
+              });
+            }
+          } else if (event.message) {
+            throw new Error(event.message);
           }
         }
 

package/frontend/src/clone-document/clone-document.js

@@ -2,7 +2,7 @@
 
 const api = require('../api');
 
-const { BSON, EJSON } = require('bson');
+const { BSON, EJSON } = require('mongodb/lib/bson');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
   apply(target, thisArg, argumentsList) {
@@ -46,7 +46,7 @@ module.exports = app => app.component('clone-document', {
   },
   mounted: function() {
     const pathsToClone = this.schemaPaths.map(x => x.path);
-    
+
     // Create a filtered version of the document data
     const filteredDoc = {};
     pathsToClone.forEach(path => {
@@ -69,4 +69,4 @@ module.exports = app => app.component('clone-document', {
       smartIndent: false
     });
   }
-});
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {
@@ -9,6 +9,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@ai-sdk/google": "2.x",
     "@ai-sdk/openai": "2.x",
     "@ai-sdk/anthropic": "2.x",
     "ai": "5.x",
@@ -24,7 +25,7 @@
     "webpack": "5.x"
   },
   "peerDependencies": {
-    "mongoose": "7.x || 8.x || ^9.0.0-0"
+    "mongoose": "7.x || 8.x || ^9.0.0"
   },
   "devDependencies": {
     "@masteringjs/eslint-config": "0.1.1",