feat: explorer mcp toggle in preview options (#1440)

* feat: explorer mcp toggle

* added min sdk version gating

---------

Co-authored-by: Nicolas Earnshaw <earnshaw.nico@gmail.com>

Author: pravusjif

packages/creator-hub/main/src/modules/cli.ts

@@ -83,6 +83,7 @@ const PREVIEW_OPTIONS_MAP: Record<keyof PreviewArguments, string> = {
   openNewInstance: '-n',
   skipAuthScreen: '--skip-auth-screen',
   multiInstance: '--multi-instance',
+  mcp: '--mcp',
 };
 
 function generatePreviewArguments(opts: PreviewOptions) {
@@ -225,6 +226,7 @@ function updateDeepLinkWithOpts(params: string, newOpts: PreviewOptions): string
     setOrDeleteParam(PREVIEW_OPTIONS_MAP.skipAuthScreen, !newOpts.multiInstance);
     setOrDeleteParam(PREVIEW_OPTIONS_MAP.enableLandscapeTerrains, newOpts.enableLandscapeTerrains);
     setOrDeleteParam(PREVIEW_OPTIONS_MAP.multiInstance, newOpts.multiInstance);
+    setOrDeleteParam(PREVIEW_OPTIONS_MAP.mcp, newOpts.mcp);
 
     // this param is different from what we recieved from the CLI that the one that the launcher uses.
     setOrDeleteParam('open-deeplink-in-new-instance', newOpts.openNewInstance);

packages/creator-hub/renderer/src/components/EditorPage/MenuOptions/PreviewOptions.tsx

@@ -25,6 +25,7 @@ export function PreviewOptions({
   options,
   onShowMobileQR,
   supportsMultiInstance,
+  supportsMcp,
   projectPath,
 }: PreviewOptionsProps) {
   const [terrainHiddenByScene, setTerrainHiddenByScene] = useState(false);
@@ -124,6 +125,17 @@ export function PreviewOptions({
             label={t('editor.header.actions.preview_options.multi_instance')}
           />
         )}
+        {supportsMcp && (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={!!options.mcp}
+                onChange={handleChange({ mcp: !options.mcp })}
+              />
+            }
+            label={t('editor.header.actions.preview_options.mcp')}
+          />
+        )}
       </FormGroup>
       <Divider />
       <ListItemButton onClick={onShowMobileQR}>

packages/creator-hub/renderer/src/components/EditorPage/MenuOptions/types.ts

@@ -5,6 +5,7 @@ export type PreviewOptionsProps = {
   onChange: (options: PreviewOptions) => void;
   onShowMobileQR: () => void;
   supportsMultiInstance: boolean;
+  supportsMcp: boolean;
   projectPath: string;
 };
 

packages/creator-hub/renderer/src/components/EditorPage/component.tsx

@@ -64,6 +64,7 @@ export function EditorPage() {
     publishScene,
     getMobileQR,
     supportsMultiInstance,
+    supportsMcp,
     isPreviewRunning,
     startBevyRealm,
     killBevyRealm,
@@ -525,6 +526,7 @@ export function EditorPage() {
                     onChange={handleChangePreviewOptions}
                     onShowMobileQR={handleShowMobileQR}
                     supportsMultiInstance={supportsMultiInstance}
+                    supportsMcp={supportsMcp}
                     projectPath={project.path}
                   />
                 }

packages/creator-hub/renderer/src/modules/store/editor/slice.ts

@@ -2,7 +2,7 @@ import { createSlice, isRejectedWithValue } from '@reduxjs/toolkit';
 import { captureException } from '@sentry/electron/renderer';
 import { createAsyncThunk } from '/@/modules/store/thunk';
 
-import { supportsMultiInstance } from '/shared/flags';
+import { supportsMcp, supportsMultiInstance } from '/shared/flags';
 import type { DeployOptions } from '/shared/types/deploy';
 import { isProjectError, ProjectError, type Project } from '/shared/types/projects';
 import { type PreviewOptions } from '/shared/types/settings';
@@ -60,6 +60,7 @@ export const getMobileQR = createAsyncThunk(
 export type EditorState = {
   version: string | null;
   supportsMultiInstance: boolean;
+  supportsMcp: boolean;
   project?: Project;
   inspectorPort: number;
   publishPort: number;
@@ -79,6 +80,7 @@ export type EditorState = {
 const initialState: EditorState = {
   version: null,
   supportsMultiInstance: false,
+  supportsMcp: false,
   inspectorPort: 0,
   publishPort: 0,
   loadingPublish: false,
@@ -103,10 +105,12 @@ export const slice = createSlice({
     builder.addCase(workspaceActions.runProject.pending, state => {
       state.project = undefined;
       state.supportsMultiInstance = false;
+      state.supportsMcp = false;
       state.error = null;
     });
     builder.addCase(workspaceActions.fetchSdkCommandsVersion.fulfilled, (state, action) => {
       state.supportsMultiInstance = supportsMultiInstance(action.payload);
+      state.supportsMcp = supportsMcp(action.payload);
     });
     builder.addCase(workspaceActions.runProject.fulfilled, (state, action) => {
       state.project = action.payload;

packages/creator-hub/renderer/src/modules/store/translation/locales/en.json

@@ -65,6 +65,7 @@
           "landscape_terrain_enabled": "Enable Landscape Terrains",
           "landscape_terrain_disabled_by_scene": "Landscape terrain is hidden by this scene's settings",
           "multi_instance": "Multi-Instance Preview",
+          "mcp": "Enable MCP Server",
           "mobile_preview": "Show QR Code for Mobile"
         },
         "publish_options": {

packages/creator-hub/renderer/src/modules/store/translation/locales/es.json

@@ -65,6 +65,7 @@
           "landscape_terrain_enabled": "Habilitar terrenos de vista panorámica",
           "landscape_terrain_disabled_by_scene": "El terreno panorámico está oculto por la configuración de esta escena",
           "multi_instance": "Vista previa multi-instancia",
+          "mcp": "Habilitar servidor MCP",
           "mobile_preview": "Mostrar código QR para móvil"
         },
         "publish_options": {

packages/creator-hub/renderer/src/modules/store/translation/locales/zh.json

@@ -65,6 +65,7 @@
           "landscape_terrain_enabled": "启用景观地形",
           "landscape_terrain_disabled_by_scene": "此场景的设置已隐藏景观地形",
           "multi_instance": "多实例预览",
+          "mcp": "启用 MCP 服务器",
           "mobile_preview": "显示移动端二维码"
         },
         "publish_options": {

packages/creator-hub/renderer/src/modules/store/workspace/slice.ts

@@ -1,6 +1,6 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 
-import { supportsMultiInstance } from '/shared/flags';
+import { supportsMcp, supportsMultiInstance } from '/shared/flags';
 import { type Project, SortBy } from '/shared/types/projects';
 import {
   DEFAULT_DEPENDENCY_UPDATE_STRATEGY,
@@ -28,6 +28,7 @@ const initialState: Async<Workspace> = {
       enableLandscapeTerrains: true,
       openNewInstance: false,
       multiInstance: false,
+      mcp: false,
       showWarnings: true,
       client: DEFAULT_PREVIEW_CLIENT,
     },
@@ -188,6 +189,9 @@ export const slice = createSlice({
         if (!supportsMultiInstance(action.payload)) {
           state.settings.previewOptions.multiInstance = false;
         }
+        if (!supportsMcp(action.payload)) {
+          state.settings.previewOptions.mcp = false;
+        }
       })
       .addCase(thunks.getProject.pending, (state, { meta }) => {
         const projectIdx = state.projects.findIndex($ => $.path === meta.arg.path);

packages/creator-hub/shared/flags.ts

@@ -2,7 +2,12 @@ import gte from 'semver/functions/gte';
 
 // @dcl/sdk bundles @dcl/sdk-commands, so they always share the same version number.
 const MIN_MULTI_INSTANCE_SDK_COMMANDS_VERSION = '7.20.4';
+const MIN_MCP_SDK_COMMANDS_VERSION = '7.25.0';
 
 export function supportsMultiInstance(version: string | null | undefined): boolean {
   return !!version && gte(version, MIN_MULTI_INSTANCE_SDK_COMMANDS_VERSION);
 }
+
+export function supportsMcp(version: string | null | undefined): boolean {
+  return !!version && gte(version, MIN_MCP_SDK_COMMANDS_VERSION);
+}