Move MCP checkbox to the MCP settings screen

webview-ui/src/components/mcp/McpView.tsx

@@ -1,5 +1,6 @@
 import {
 	VSCodeButton,
+	VSCodeCheckbox,
 	VSCodeLink,
 	VSCodePanels,
 	VSCodePanelTab,
@@ -17,7 +18,7 @@ type McpViewProps = {
 }
 
 const McpView = ({ onDone }: McpViewProps) => {
-	const { mcpServers: servers, alwaysAllowMcp } = useExtensionState()
+	const { mcpServers: servers, alwaysAllowMcp, mcpEnabled, setMcpEnabled } = useExtensionState()
 	// const [servers, setServers] = useState<McpServer[]>([
 	// 	// Add some mock servers for testing
 	// 	{
@@ -106,7 +107,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 					style={{
 						color: "var(--vscode-foreground)",
 						fontSize: "13px",
-						marginBottom: "20px",
+						marginBottom: "10px",
 						marginTop: "5px",
 					}}>
 					The{" "}
@@ -122,6 +123,26 @@ const McpView = ({ onDone }: McpViewProps) => {
 					npm docs").
 				</div>
 
+				<div style={{ marginBottom: "20px" }}>
+					<VSCodeCheckbox
+						checked={mcpEnabled}
+						onChange={(e: any) => {
+							setMcpEnabled(e.target.checked)
+							vscode.postMessage({ type: "mcpEnabled", bool: e.target.checked })
+						}}>
+						<span style={{ fontWeight: "500" }}>Enable MCP Servers</span>
+					</VSCodeCheckbox>
+					<p style={{
+						fontSize: "12px",
+						marginTop: "5px",
+						color: "var(--vscode-descriptionForeground)",
+					}}>
+						When enabled, Cline will be able to interact with MCP servers for advanced functionality. If you're not using MCP, you can disable this to reduce Cline's token usage.
+					</p>
+				</div>
+
+				{mcpEnabled && (
+					<>
 						{/* Server List */}
 						{servers.length > 0 && (
 							<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
@@ -143,6 +164,8 @@ const McpView = ({ onDone }: McpViewProps) => {
 								Edit MCP Settings
 							</VSCodeButton>
 						</div>
+					</>
+				)}
 
 				{/* Bottom padding */}
 				<div style={{ height: "20px" }} />

webview-ui/src/components/settings/SettingsView.tsx

@@ -48,8 +48,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		setScreenshotQuality,
 		terminalOutputLineLimit,
 		setTerminalOutputLineLimit,
-		mcpEnabled,
-		setMcpEnabled,
 	} = useExtensionState()
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 	const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined)
@@ -81,7 +79,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 			vscode.postMessage({ type: "writeDelayMs", value: writeDelayMs })
 			vscode.postMessage({ type: "screenshotQuality", value: screenshotQuality ?? 75 })
 			vscode.postMessage({ type: "terminalOutputLineLimit", value: terminalOutputLineLimit ?? 500 })
-			vscode.postMessage({ type: "mcpEnabled", bool: mcpEnabled })
 			onDone()
 		}
 	}
@@ -214,21 +211,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 						}}>
 						These instructions are added to the end of the system prompt sent with every request. Custom instructions set in .clinerules and .cursorrules in the working directory are also included.
 					</p>
-
-          <div style={{ marginBottom: 5 }}>
-            <VSCodeCheckbox
-              checked={mcpEnabled}
-              onChange={(e: any) => setMcpEnabled(e.target.checked)}>
-              <span style={{ fontWeight: "500" }}>Enable MCP Servers</span>
-            </VSCodeCheckbox>
-            <p style={{
-              fontSize: "12px",
-              marginTop: "5px",
-              color: "var(--vscode-descriptionForeground)",
-            }}>
-              When enabled, Cline will be able to interact with MCP servers for advanced functionality.
-            </p>
-          </div>
 				</div>
 
 				<div style={{ marginBottom: 5 }}>
@@ -576,7 +558,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					</div>
 				</div>
 
-
 				{IS_DEV && (
 					<>
 						<div style={{ marginTop: "10px", marginBottom: "4px" }}>Debug</div>