From 7e8d902d3fa96e60f86b0bc9a0aa0c1896b9fb7d Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 16 May 2025 14:55:51 -0300
Subject: [PATCH] feat: centralize URL generation with customGetHostProtocol
 and customGetMCPUrl utilities (#8076)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ (index.tsx): introduce customGetHostProtocol function to get host protocol dynamically for URL construction
♻️ (index.tsx): refactor URL construction in index.tsx to use customGetHostProtocol function for better code organization and reusability
📝 (custom-mcp-url.ts): add customGetMCPUrl function to generate MCP URL based on project ID
📝 (McpServerTab.tsx): update McpServerTab component to use customGetMCPUrl function for constructing MCP URL based on project ID and improve code readability
---
 .../components/copyFieldAreaComponent/index.tsx            | 6 ++++--
 .../components/textAreaComponent/index.tsx                 | 5 ++++-
 src/frontend/src/customization/utils/custom-mcp-url.ts     | 7 +++++++
 .../MainPage/pages/homePage/components/McpServerTab.tsx    | 7 ++-----
 4 files changed, 17 insertions(+), 8 deletions(-)
 create mode 100644 src/frontend/src/customization/utils/custom-mcp-url.ts

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/copyFieldAreaComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/copyFieldAreaComponent/index.tsx
index 8d5099c9c..285c6a4b2 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/copyFieldAreaComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/copyFieldAreaComponent/index.tsx
@@ -1,4 +1,5 @@
 import { GRADIENT_CLASS_DISABLED } from "@/constants/constants";
+import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";
 import useAlertStore from "@/stores/alertStore";
 import useFlowStore from "@/stores/flowStore";
 import { useMemo, useRef, useState } from "react";
@@ -9,8 +10,9 @@ import { InputProps, TextAreaComponentType } from "../../types";
 
 const BACKEND_URL = "BACKEND_URL";
 const MCP_SSE_VALUE = "MCP_SSE";
-const URL_WEBHOOK = `${window.location.protocol}//${window.location.host}/api/v1/webhook/`;
-const URL_MCP_SSE = `${window.location.protocol}//${window.location.host}/api/v1/mcp/sse`;
+const { protocol, host } = customGetHostProtocol();
+const URL_WEBHOOK = `${protocol}//${host}/api/v1/webhook/`;
+const URL_MCP_SSE = `${protocol}//${host}/api/v1/mcp/sse`;
 
 const inputClasses = {
   base: ({ isFocused }: { isFocused: boolean }) =>
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/textAreaComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/textAreaComponent/index.tsx
index 17c57c5bd..1c71a4627 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/textAreaComponent/index.tsx
@@ -1,4 +1,5 @@
 import { GRADIENT_CLASS } from "@/constants/constants";
+import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";
 import { getCurlWebhookCode } from "@/modals/apiModal/utils/get-curl-code";
 import ComponentTextModal from "@/modals/textAreaModal";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -21,7 +22,9 @@ const inputClasses = {
 
 const WEBHOOK_VALUE = "CURL_WEBHOOK";
 const MCP_SSE_VALUE = "MCP_SSE";
-const URL_MCP_SSE = `${window.location.protocol}//${window.location.host}/api/v1/mcp/sse`;
+
+const { protocol, host } = customGetHostProtocol();
+const URL_MCP_SSE = `${protocol}//${host}/api/v1/mcp/sse`;
 
 const externalLinkIconClasses = {
   gradient: ({
diff --git a/src/frontend/src/customization/utils/custom-mcp-url.ts b/src/frontend/src/customization/utils/custom-mcp-url.ts
new file mode 100644
index 000000000..e268cb041
--- /dev/null
+++ b/src/frontend/src/customization/utils/custom-mcp-url.ts
@@ -0,0 +1,7 @@
+import { api } from "@/controllers/API/api";
+
+export const customGetMCPUrl = (projectId: string) => {
+  const apiHost = api.defaults.baseURL || window.location.origin;
+  const apiUrl = `${apiHost}/api/v1/mcp/project/${projectId}/sse`;
+  return apiUrl;
+};
diff --git a/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx b/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
index dfb094261..7683fb3f4 100644
--- a/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
+++ b/src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx
@@ -3,13 +3,12 @@ import ShadTooltip from "@/components/common/shadTooltipComponent";
 import ToolsComponent from "@/components/core/parameterRenderComponent/components/ToolsComponent";
 import { Button } from "@/components/ui/button";
 import { createApiKey } from "@/controllers/API";
-import { api } from "@/controllers/API/api";
 import {
   useGetFlowsMCP,
   usePatchFlowsMCP,
 } from "@/controllers/API/queries/mcp";
-import { PROXY_TARGET } from "@/customization/config-constants";
 import useTheme from "@/customization/hooks/use-custom-theme";
+import { customGetMCPUrl } from "@/customization/utils/custom-mcp-url";
 import useAuthStore from "@/stores/authStore";
 import { useFolderStore } from "@/stores/foldersStore";
 import { MCPSettingsType } from "@/types/mcp";
@@ -62,9 +61,7 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
     },
   };
 
-  const apiHost = api.defaults.baseURL || window.location.origin;
-
-  const apiUrl = `${apiHost}/api/v1/mcp/project/${projectId}/sse`;
+  const apiUrl = customGetMCPUrl(projectId);
 
   const MCP_SERVER_JSON = `{
   "mcpServers": {