🖼️ refactor: Enhance Env Extraction & Agent Image Handling (#6131)

* refactor: use new image output format for agents using DALL-E tools

* refactor: Enhance image fetching with proxy support and adjust logging placement in DALL-E 3 integration

* refactor: Enhance StableDiffusionAPI to support agent-specific return values and display message for generated images

* refactor: Add unit test execution for librechat-mcp in backend review workflow

* refactor: Update environment variable extraction logic, export from serpate module to avoid circular refs, and remove deprecated tests

* refactor: Add unit tests for environment variable extraction and enhance StdioOptionsSchema to process env variables

.github/workflows/backend-review.yml

@@ -61,4 +61,7 @@ jobs:
         run: cd api && npm run test:ci
 
       - name: Run librechat-data-provider unit tests
-        run: cd packages/data-provider && npm run test:ci
+        run: cd packages/data-provider && npm run test:ci
+
+      - name: Run librechat-mcp unit tests
+        run: cd packages/mcp && npm run test:ci

api/app/clients/tools/structured/DALLE3.js

@@ -1,14 +1,17 @@
 const { z } = require('zod');
 const path = require('path');
 const OpenAI = require('openai');
+const fetch = require('node-fetch');
 const { v4: uuidv4 } = require('uuid');
 const { Tool } = require('@langchain/core/tools');
 const { HttpsProxyAgent } = require('https-proxy-agent');
-const { FileContext } = require('librechat-data-provider');
+const { FileContext, ContentTypes } = require('librechat-data-provider');
 const { getImageBasename } = require('~/server/services/Files/images');
 const extractBaseURL = require('~/utils/extractBaseURL');
 const { logger } = require('~/config');
 
+const displayMessage =
+  'DALL-E displayed an image. All generated images are already plainly visible, so don\'t repeat the descriptions in detail. Do not list download links as they are available in the UI already. The user may download the images by clicking on them, but do not mention anything about downloading to the user.';
 class DALLE3 extends Tool {
   constructor(fields = {}) {
     super();
@@ -114,10 +117,7 @@ class DALLE3 extends Tool {
     if (this.isAgent === true && typeof value === 'string') {
       return [value, {}];
     } else if (this.isAgent === true && typeof value === 'object') {
-      return [
-        'DALL-E displayed an image. All generated images are already plainly visible, so don\'t repeat the descriptions in detail. Do not list download links as they are available in the UI already. The user may download the images by clicking on them, but do not mention anything about downloading to the user.',
-        value,
-      ];
+      return [displayMessage, value];
     }
 
     return value;
@@ -160,6 +160,32 @@ Error Message: ${error.message}`);
       );
     }
 
+    if (this.isAgent) {
+      let fetchOptions = {};
+      if (process.env.PROXY) {
+        fetchOptions.agent = new HttpsProxyAgent(process.env.PROXY);
+      }
+      const imageResponse = await fetch(theImageUrl, fetchOptions);
+      const arrayBuffer = await imageResponse.arrayBuffer();
+      const base64 = Buffer.from(arrayBuffer).toString('base64');
+      const content = [
+        {
+          type: ContentTypes.IMAGE_URL,
+          image_url: {
+            url: `data:image/jpeg;base64,${base64}`,
+          },
+        },
+      ];
+
+      const response = [
+        {
+          type: ContentTypes.TEXT,
+          text: displayMessage,
+        },
+      ];
+      return [response, { content }];
+    }
+
     const imageBasename = getImageBasename(theImageUrl);
     const imageExt = path.extname(imageBasename);
 

api/app/clients/tools/structured/StableDiffusion.js

@@ -6,10 +6,13 @@ const axios = require('axios');
 const sharp = require('sharp');
 const { v4: uuidv4 } = require('uuid');
 const { Tool } = require('@langchain/core/tools');
-const { FileContext } = require('librechat-data-provider');
+const { FileContext, ContentTypes } = require('librechat-data-provider');
 const paths = require('~/config/paths');
 const { logger } = require('~/config');
 
+const displayMessage =
+  'Stable Diffusion displayed an image. All generated images are already plainly visible, so don\'t repeat the descriptions in detail. Do not list download links as they are available in the UI already. The user may download the images by clicking on them, but do not mention anything about downloading to the user.';
+
 class StableDiffusionAPI extends Tool {
   constructor(fields) {
     super();
@@ -21,6 +24,8 @@ class StableDiffusionAPI extends Tool {
     this.override = fields.override ?? false;
     /** @type {boolean} Necessary for output to contain all image metadata. */
     this.returnMetadata = fields.returnMetadata ?? false;
+    /** @type {boolean} */
+    this.isAgent = fields.isAgent;
     if (fields.uploadImageBuffer) {
       /** @type {uploadImageBuffer} Necessary for output to contain all image metadata. */
       this.uploadImageBuffer = fields.uploadImageBuffer.bind(this);
@@ -66,6 +71,16 @@ class StableDiffusionAPI extends Tool {
     return `![generated image](/${imageUrl})`;
   }
 
+  returnValue(value) {
+    if (this.isAgent === true && typeof value === 'string') {
+      return [value, {}];
+    } else if (this.isAgent === true && typeof value === 'object') {
+      return [displayMessage, value];
+    }
+
+    return value;
+  }
+
   getServerURL() {
     const url = process.env.SD_WEBUI_URL || '';
     if (!url && !this.override) {
@@ -113,6 +128,25 @@ class StableDiffusionAPI extends Tool {
     }
 
     try {
+      if (this.isAgent) {
+        const content = [
+          {
+            type: ContentTypes.IMAGE_URL,
+            image_url: {
+              url: `data:image/png;base64,${image}`,
+            },
+          },
+        ];
+
+        const response = [
+          {
+            type: ContentTypes.TEXT,
+            text: displayMessage,
+          },
+        ];
+        return [response, { content }];
+      }
+
       const buffer = Buffer.from(image.split(',', 1)[0], 'base64');
       if (this.returnMetadata && this.uploadImageBuffer && this.req) {
         const file = await this.uploadImageBuffer({
@@ -154,7 +188,7 @@ class StableDiffusionAPI extends Tool {
       logger.error('[StableDiffusion] Error while saving the image:', error);
     }
 
-    return this.result;
+    return this.returnValue(this.result);
   }
 }
 

api/server/controllers/agents/callbacks.js

@@ -1,4 +1,5 @@
-const { Tools, StepTypes, imageGenTools, FileContext } = require('librechat-data-provider');
+const { nanoid } = require('nanoid');
+const { Tools, StepTypes, FileContext } = require('librechat-data-provider');
 const {
   EnvVar,
   Providers,
@@ -242,32 +243,6 @@ function createToolEndCallback({ req, res, artifactPromises }) {
       return;
     }
 
-    if (imageGenTools.has(output.name)) {
-      artifactPromises.push(
-        (async () => {
-          const fileMetadata = Object.assign(output.artifact, {
-            messageId: metadata.run_id,
-            toolCallId: output.tool_call_id,
-            conversationId: metadata.thread_id,
-          });
-          if (!res.headersSent) {
-            return fileMetadata;
-          }
-
-          if (!fileMetadata) {
-            return null;
-          }
-
-          res.write(`event: attachment\ndata: ${JSON.stringify(fileMetadata)}\n\n`);
-          return fileMetadata;
-        })().catch((error) => {
-          logger.error('Error processing code output:', error);
-          return null;
-        }),
-      );
-      return;
-    }
-
     if (output.artifact.content) {
       /** @type {FormattedContent[]} */
       const content = output.artifact.content;
@@ -278,7 +253,7 @@ function createToolEndCallback({ req, res, artifactPromises }) {
         const { url } = part.image_url;
         artifactPromises.push(
           (async () => {
-            const filename = `${output.tool_call_id}-image-${new Date().getTime()}`;
+            const filename = `${output.name}_${output.tool_call_id}_img_${nanoid()}`;
             const file = await saveBase64Image(url, {
               req,
               filename,

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.7.6994",
+  "version": "0.7.6995",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/data-provider/specs/mcp.spec.ts

@@ -0,0 +1,52 @@
+import { StdioOptionsSchema } from '../src/mcp';
+
+describe('Environment Variable Extraction (MCP)', () => {
+  const originalEnv = process.env;
+
+  beforeEach(() => {
+    process.env = {
+      ...originalEnv,
+      TEST_API_KEY: 'test-api-key-value',
+      ANOTHER_SECRET: 'another-secret-value',
+    };
+  });
+
+  afterEach(() => {
+    process.env = originalEnv;
+  });
+
+  describe('StdioOptionsSchema', () => {
+    it('should transform environment variables in the env field', () => {
+      const options = {
+        command: 'node',
+        args: ['server.js'],
+        env: {
+          API_KEY: '${TEST_API_KEY}',
+          ANOTHER_KEY: '${ANOTHER_SECRET}',
+          PLAIN_VALUE: 'plain-value',
+          NON_EXISTENT: '${NON_EXISTENT_VAR}',
+        },
+      };
+
+      const result = StdioOptionsSchema.parse(options);
+
+      expect(result.env).toEqual({
+        API_KEY: 'test-api-key-value',
+        ANOTHER_KEY: 'another-secret-value',
+        PLAIN_VALUE: 'plain-value',
+        NON_EXISTENT: '${NON_EXISTENT_VAR}',
+      });
+    });
+
+    it('should handle undefined env field', () => {
+      const options = {
+        command: 'node',
+        args: ['server.js'],
+      };
+
+      const result = StdioOptionsSchema.parse(options);
+
+      expect(result.env).toBeUndefined();
+    });
+  });
+});