ui improvements for deploy mcp (#2718)

Author: icecrasher321

apps/docs/content/docs/en/mcp/deploy-workflows.mdx

@@ -16,7 +16,7 @@ MCP servers group your workflow tools together. Create and manage them in worksp
   <Video src="mcp/mcp-server.mp4" width={700} height={450} />
 </div>
 
-1. Navigate to **Settings → MCP Servers**
+1. Navigate to **Settings → Deployed MCPs**
 2. Click **Create Server**
 3. Enter a name and optional description
 4. Copy the server URL for use in your MCP clients
@@ -78,7 +78,7 @@ Include your API key header (`X-API-Key`) for authenticated access when using mc
 
 ## Server Management
 
-From the server detail view in **Settings → MCP Servers**, you can:
+From the server detail view in **Settings → Deployed MCPs**, you can:
 
 - **View tools**: See all workflows added to a server
 - **Copy URL**: Get the server URL for MCP clients

apps/docs/content/docs/en/mcp/index.mdx

@@ -27,7 +27,7 @@ MCP servers provide collections of tools that your agents can use. Configure the
 </div>
 
 1. Navigate to your workspace settings
-2. Go to the **MCP Servers** section
+2. Go to the **Deployed MCPs** section
 3. Click **Add MCP Server**
 4. Enter the server configuration details
 5. Save the configuration

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx

@@ -3,7 +3,15 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
-import { Badge, Combobox, type ComboboxOption, Input, Label, Textarea } from '@/components/emcn'
+import {
+  Badge,
+  Button,
+  Combobox,
+  type ComboboxOption,
+  Input,
+  Label,
+  Textarea,
+} from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
 import { generateToolInputSchema, sanitizeToolName } from '@/lib/mcp/workflow-tool-schema'
 import { normalizeInputFormatValue } from '@/lib/workflows/input-format-utils'
@@ -35,6 +43,7 @@ interface McpDeployProps {
   onAddedToServer?: () => void
   onSubmittingChange?: (submitting: boolean) => void
   onCanSaveChange?: (canSave: boolean) => void
+  onHasServersChange?: (hasServers: boolean) => void
 }
 
 /**
@@ -83,6 +92,7 @@ export function McpDeploy({
   onAddedToServer,
   onSubmittingChange,
   onCanSaveChange,
+  onHasServersChange,
 }: McpDeployProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
@@ -247,6 +257,10 @@ export function McpDeploy({
     onCanSaveChange?.(hasChanges && hasDeployedTools && !!toolName.trim())
   }, [hasChanges, hasDeployedTools, toolName, onCanSaveChange])
 
+  useEffect(() => {
+    onHasServersChange?.(servers.length > 0)
+  }, [servers.length, onHasServersChange])
+
   /**
    * Save tool configuration to all deployed servers
    */
@@ -428,14 +442,16 @@ export function McpDeploy({
 
   if (servers.length === 0) {
     return (
-      <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
-        <button
-          type='button'
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
+        <p className='text-[13px] text-[var(--text-muted)]'>
+          Create an MCP Server in Settings → Deployed MCPs first.
+        </p>
+        <Button
+          variant='tertiary'
           onClick={() => openSettingsModal({ section: 'workflow-mcp-servers' })}
-          className='transition-colors hover:text-[var(--text-secondary)]'
         >
-          Create an MCP Server in Settings → MCP Servers first.
-        </button>
+          Create MCP Server
+        </Button>
       </div>
     )
   }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx

@@ -19,6 +19,7 @@ import { getEnv } from '@/lib/core/config/env'
 import { getInputFormatExample as getInputFormatExampleUtil } from '@/lib/workflows/operations/deployment-utils'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
 import { startsWithUuid } from '@/executor/constants'
+import { useSettingsModalStore } from '@/stores/settings-modal/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
@@ -62,6 +63,7 @@ export function DeployModal({
   isLoadingDeployedState,
   refetchDeployedState,
 }: DeployModalProps) {
+  const openSettingsModal = useSettingsModalStore((state) => state.openModal)
   const deploymentStatus = useWorkflowRegistry((state) =>
     state.getWorkflowDeploymentStatus(workflowId)
   )
@@ -89,6 +91,7 @@ export function DeployModal({
   const [templateSubmitting, setTemplateSubmitting] = useState(false)
   const [mcpToolSubmitting, setMcpToolSubmitting] = useState(false)
   const [mcpToolCanSave, setMcpToolCanSave] = useState(false)
+  const [hasMcpServers, setHasMcpServers] = useState(false)
   const [hasExistingTemplate, setHasExistingTemplate] = useState(false)
   const [templateStatus, setTemplateStatus] = useState<{
     status: 'pending' | 'approved' | 'rejected' | null
@@ -627,6 +630,7 @@ export function DeployModal({
                     isDeployed={isDeployed}
                     onSubmittingChange={setMcpToolSubmitting}
                     onCanSaveChange={setMcpToolCanSave}
+                    onHasServersChange={setHasMcpServers}
                   />
                 )}
               </ModalTabsContent>
@@ -674,16 +678,25 @@ export function DeployModal({
               </div>
             </ModalFooter>
           )}
-          {activeTab === 'mcp' && isDeployed && (
+          {activeTab === 'mcp' && isDeployed && hasMcpServers && (
             <ModalFooter className='items-center'>
-              <Button
-                type='button'
-                variant='tertiary'
-                onClick={handleMcpToolFormSubmit}
-                disabled={mcpToolSubmitting || !mcpToolCanSave}
-              >
-                {mcpToolSubmitting ? 'Saving...' : 'Save Tool Schema'}
-              </Button>
+              <div className='flex gap-2'>
+                <Button
+                  type='button'
+                  variant='default'
+                  onClick={() => openSettingsModal({ section: 'workflow-mcp-servers' })}
+                >
+                  Manage
+                </Button>
+                <Button
+                  type='button'
+                  variant='tertiary'
+                  onClick={handleMcpToolFormSubmit}
+                  disabled={mcpToolSubmitting || !mcpToolCanSave}
+                >
+                  {mcpToolSubmitting ? 'Saving...' : 'Save Tool Schema'}
+                </Button>
+              </div>
             </ModalFooter>
           )}
           {activeTab === 'template' && (

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx

@@ -480,7 +480,7 @@ export function General({ onOpenChange }: GeneralProps) {
       </div>
 
       <div className='flex items-center justify-between'>
-        <Label htmlFor='auto-connect'>Auto-connect on drop</Label>
+        <Label htmlFor='auto-connect'>Auto-connect on drag</Label>
         <Switch
           id='auto-connect'
           checked={settings?.autoConnect ?? true}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx

@@ -118,7 +118,7 @@ const allNavigationItems: NavigationItem[] = [
   { id: 'mcp', label: 'MCP Tools', icon: McpIcon, section: 'tools' },
   { id: 'environment', label: 'Environment', icon: FolderCode, section: 'system' },
   { id: 'apikeys', label: 'API Keys', icon: Key, section: 'system' },
-  { id: 'workflow-mcp-servers', label: 'MCP Servers', icon: Server, section: 'system' },
+  { id: 'workflow-mcp-servers', label: 'Deployed MCPs', icon: Server, section: 'system' },
   {
     id: 'byok',
     label: 'BYOK',