Merge pull request #266 from RooVetGit/mcp_toggle

Add toggle to enable or disable MCP servers on the system prompt

.changeset/slimy-pans-obey.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Add toggle to enable/disable the MCP-related sections of the system prompt (thanks @daniel-lxs!)

README.md

@@ -18,7 +18,8 @@ A fork of Cline, an autonomous coding agent, with some additional experimental f
 - Support for Meta 3, 3.1, and 3.2 models via AWS Bedrock
 - Support for listing models from OpenAI-compatible providers
 - Per-tool MCP auto-approval
-- Enable/disable MCP servers
+- Enable/disable individual MCP servers
+- Enable/disable the MCP feature overall
 - Configurable delay after auto-writes to allow diagnostics to detect potential problems
 - Control the number of terminal output lines to pass to the model when executing commands
 - Runs alongside the original Cline

src/core/Cline.ts

@@ -50,6 +50,7 @@ import { ClineProvider, GlobalFileNames } from "./webview/ClineProvider"
 import { detectCodeOmission } from "../integrations/editor/detect-omission"
 import { BrowserSession } from "../services/browser/BrowserSession"
 import { OpenRouterHandler } from "../api/providers/openrouter"
+import { McpHub } from "../services/mcp/McpHub"
 
 const cwd =
 	vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0) ?? path.join(os.homedir(), "Desktop") // may or may not exist but fs checking existence would immediately ask for permission which would be bad UX, need to come up with a better solution
@@ -778,14 +779,19 @@ export class Cline {
 	}
 
 	async *attemptApiRequest(previousApiReqIndex: number): ApiStream {
-		// Wait for MCP servers to be connected before generating system prompt
-		await pWaitFor(() => this.providerRef.deref()?.mcpHub?.isConnecting !== true, { timeout: 10_000 }).catch(() => {
-			console.error("MCP servers failed to connect in time")
-		})
+		let mcpHub: McpHub | undefined
 
-		const mcpHub = this.providerRef.deref()?.mcpHub
-		if (!mcpHub) {
-			throw new Error("MCP hub not available")
+		const { mcpEnabled } = await this.providerRef.deref()?.getState() ?? {}
+
+		if (mcpEnabled ?? true) {
+			mcpHub = this.providerRef.deref()?.mcpHub
+			if (!mcpHub) {
+				throw new Error("MCP hub not available")
+			}
+			// Wait for MCP servers to be connected before generating system prompt
+			await pWaitFor(() => mcpHub!.isConnecting !== true, { timeout: 10_000 }).catch(() => {
+				console.error("MCP servers failed to connect in time")
+			})
 		}
 
 		const { browserViewportSize, preferredLanguage } = await this.providerRef.deref()?.getState() ?? {}

src/core/prompts/system.ts

@@ -9,7 +9,7 @@ import { McpHub } from "../../services/mcp/McpHub"
 export const SYSTEM_PROMPT = async (
 	cwd: string,
 	supportsComputerUse: boolean,
-	mcpHub: McpHub,
+	mcpHub?: McpHub,
 	diffStrategy?: DiffStrategy,
 	browserViewportSize?: string
 ) => `You are Cline, a highly skilled software engineer with extensive knowledge in many programming languages, frameworks, design patterns, and best practices.
@@ -146,6 +146,7 @@ Usage:
 		: ""
 }
 
+${mcpHub ? `
 ## use_mcp_tool
 Description: Request to use a tool provided by a connected MCP server. Each MCP server can provide multiple tools with different capabilities. Tools have defined input schemas that specify required and optional parameters.
 Parameters:
@@ -173,7 +174,7 @@ Usage:
 <access_mcp_resource>
 <server_name>server name here</server_name>
 <uri>resource URI here</uri>
-</access_mcp_resource>
+</access_mcp_resource>` : ''}
 
 ## ask_followup_question
 Description: Ask the user a question to gather additional information needed to complete the task. This tool should be used when you encounter ambiguities, need clarification, or require more details to proceed effectively. It allows for interactive problem-solving by enabling direct communication with the user. Use this tool judiciously to maintain a balance between gathering necessary information and avoiding excessive back-and-forth.
@@ -229,6 +230,7 @@ Your final result description here
 <line_count>14</line_count>
 </write_to_file>
 
+${mcpHub ? `
 ## Example 3: Requesting to use an MCP tool
 
 <use_mcp_tool>
@@ -247,7 +249,7 @@ Your final result description here
 <access_mcp_resource>
 <server_name>weather-server</server_name>
 <uri>weather://san-francisco/current</uri>
-</access_mcp_resource>
+</access_mcp_resource>` : ''}
 
 # Tool Use Guidelines
 
@@ -272,6 +274,7 @@ By waiting for and carefully considering the user's response after each tool use
 
 ====
 
+${mcpHub ? `
 MCP SERVERS
 
 The Model Context Protocol (MCP) enables communication between the system and locally running MCP servers that provide additional tools and resources to extend your capabilities.
@@ -675,7 +678,7 @@ However some MCP servers may be running from installed packages rather than a lo
 
 The user may not always request the use or creation of MCP servers. Instead, they might provide tasks that can be completed with existing tools. While using the MCP SDK to extend your capabilities can be useful, it's important to understand that this is just one specialized type of task you can accomplish. You should only implement MCP servers when the user explicitly requests it (e.g., "add a tool that...").
 
-Remember: The MCP documentation and example provided above are to help you understand and work with existing MCP servers or create new ones when requested by the user. You already have access to tools and capabilities that can be used to accomplish a wide range of tasks.
+Remember: The MCP documentation and example provided above are to help you understand and work with existing MCP servers or create new ones when requested by the user. You already have access to tools and capabilities that can be used to accomplish a wide range of tasks.` : ''}
 
 ====
  
@@ -693,7 +696,9 @@ CAPABILITIES
 		? "\n- You can use the browser_action tool to interact with websites (including html files and locally running development servers) through a Puppeteer-controlled browser when you feel it is necessary in accomplishing the user's task. This tool is particularly useful for web development tasks as it allows you to launch a browser, navigate to pages, interact with elements through clicks and keyboard input, and capture the results through screenshots and console logs. This tool may be useful at key stages of web development tasks-such as after implementing new features, making substantial changes, when troubleshooting issues, or to verify the result of your work. You can analyze the provided screenshots to ensure correct rendering or identify errors, and review console logs for runtime issues.\n	- For example, if asked to add a component to a react website, you might create the necessary files, use execute_command to run the site locally, then use browser_action to launch the browser, navigate to the local server, and verify the component renders & functions correctly before closing the browser."
 		: ""
 }
+${mcpHub ? `
 - You have access to MCP servers that may provide additional tools and resources. Each server may provide different capabilities that you can use to accomplish tasks more effectively.
+` : ''}
 
 ====
 

src/core/webview/ClineProvider.ts

@@ -78,7 +78,7 @@ type GlobalStateKey =
 	| "preferredLanguage" // Language setting for Cline's communication
 	| "writeDelayMs"
 	| "terminalOutputLineLimit"
-
+	| "mcpEnabled"
 export const GlobalFileNames = {
 	apiConversationHistory: "api_conversation_history.json",
 	uiMessages: "ui_messages.json",
@@ -606,6 +606,11 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						}
 						break
 					}
+					case "mcpEnabled":
+						const mcpEnabled = message.bool ?? true
+						await this.updateGlobalState("mcpEnabled", mcpEnabled)
+						await this.postStateToWebview()
+						break
 					case "playSound":
 						if (message.audioType) {
 							const soundPath = path.join(this.context.extensionPath, "audio", `${message.audioType}.wav`)
@@ -1056,6 +1061,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			writeDelayMs,
 			terminalOutputLineLimit,
 			fuzzyMatchThreshold,
+			mcpEnabled,
 		} = await this.getState()
 		
 		const allowedCommands = vscode.workspace
@@ -1087,6 +1093,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			writeDelayMs: writeDelayMs ?? 1000,
 			terminalOutputLineLimit: terminalOutputLineLimit ?? 500,
 			fuzzyMatchThreshold: fuzzyMatchThreshold ?? 1.0,
+			mcpEnabled: mcpEnabled ?? true,
 		}
 	}
 
@@ -1188,6 +1195,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			writeDelayMs,
 			screenshotQuality,
 			terminalOutputLineLimit,
+			mcpEnabled,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<string | undefined>,
@@ -1234,6 +1242,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("writeDelayMs") as Promise<number | undefined>,
 			this.getGlobalState("screenshotQuality") as Promise<number | undefined>,
 			this.getGlobalState("terminalOutputLineLimit") as Promise<number | undefined>,
+			this.getGlobalState("mcpEnabled") as Promise<boolean | undefined>,
 		])
 
 		let apiProvider: ApiProvider
@@ -1324,6 +1333,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				// Return mapped language or default to English
 				return langMap[vscodeLang.split('-')[0]] ?? 'English';
 			})(),
+			mcpEnabled: mcpEnabled ?? true,
 		}
 	}
 

src/core/webview/__tests__/ClineProvider.test.ts

@@ -255,6 +255,7 @@ describe('ClineProvider', () => {
             writeDelayMs: 1000,
             browserViewportSize: "900x600",
             fuzzyMatchThreshold: 1.0,
+            mcpEnabled: true,
         }
         
         const message: ExtensionMessage = { 

src/shared/ExtensionMessage.ts

@@ -62,6 +62,7 @@ export interface ExtensionState {
 	preferredLanguage: string
 	writeDelayMs: number
 	terminalOutputLineLimit?: number
+	mcpEnabled: boolean
 }
 
 export interface ClineMessage {

src/shared/WebviewMessage.ts

@@ -49,6 +49,7 @@ export interface WebviewMessage {
 		| "draggedImages"
 		| "deleteMessage"
 		| "terminalOutputLineLimit"
+		| "mcpEnabled"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse

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

@@ -0,0 +1,34 @@
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { FormEvent } from "react"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { vscode } from "../../utils/vscode"
+
+const McpEnabledToggle = () => {
+	const { mcpEnabled, setMcpEnabled } = useExtensionState()
+
+	const handleChange = (e: Event | FormEvent<HTMLElement>) => {
+		const target = ('target' in e ? e.target : null) as HTMLInputElement | null
+		if (!target) return
+		setMcpEnabled(target.checked)
+		vscode.postMessage({ type: "mcpEnabled", bool: target.checked })
+	}
+
+	return (
+		<div style={{ marginBottom: "20px" }}>
+			<VSCodeCheckbox
+				checked={mcpEnabled}
+				onChange={handleChange}>
+				<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>
+	)
+}
+
+export default McpEnabledToggle

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

@@ -11,13 +11,14 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { McpServer } from "../../../../src/shared/mcp"
 import McpToolRow from "./McpToolRow"
 import McpResourceRow from "./McpResourceRow"
+import McpEnabledToggle from "./McpEnabledToggle"
 
 type McpViewProps = {
 	onDone: () => void
 }
 
 const McpView = ({ onDone }: McpViewProps) => {
-	const { mcpServers: servers, alwaysAllowMcp } = useExtensionState()
+	const { mcpServers: servers, alwaysAllowMcp, mcpEnabled } = 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,27 +123,33 @@ const McpView = ({ onDone }: McpViewProps) => {
 					npm docs").
 				</div>
 
-				{/* Server List */}
-				{servers.length > 0 && (
-					<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
-						{servers.map((server) => (
-							<ServerRow key={server.name} server={server} alwaysAllowMcp={alwaysAllowMcp} />
-						))}
-					</div>
-				)}
+				<McpEnabledToggle />
 
-				{/* Edit Settings Button */}
-				<div style={{ marginTop: "10px", width: "100%" }}>
-					<VSCodeButton
-						appearance="secondary"
-						style={{ width: "100%" }}
-						onClick={() => {
-							vscode.postMessage({ type: "openMcpSettings" })
-						}}>
-						<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
-						Edit MCP Settings
-					</VSCodeButton>
-				</div>
+				{mcpEnabled && (
+					<>
+						{/* Server List */}
+						{servers.length > 0 && (
+							<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+								{servers.map((server) => (
+									<ServerRow key={server.name} server={server} alwaysAllowMcp={alwaysAllowMcp} />
+								))}
+							</div>
+						)}
+
+						{/* Edit Settings Button */}
+						<div style={{ marginTop: "10px", width: "100%" }}>
+							<VSCodeButton
+								appearance="secondary"
+								style={{ width: "100%" }}
+								onClick={() => {
+									vscode.postMessage({ type: "openMcpSettings" })
+								}}>
+								<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
+								Edit MCP Settings
+							</VSCodeButton>
+						</div>
+					</>
+				)}
 
 				{/* Bottom padding */}
 				<div style={{ height: "20px" }} />

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

@@ -4,6 +4,7 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { validateApiConfiguration, validateModelId } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
 import ApiOptions from "./ApiOptions"
+import McpEnabledToggle from "../mcp/McpEnabledToggle"
 
 const IS_DEV = false // FIXME: use flags when packaging
 
@@ -48,6 +49,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		setScreenshotQuality,
 		terminalOutputLineLimit,
 		setTerminalOutputLineLimit,
+		mcpEnabled,
 	} = useExtensionState()
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 	const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined)
@@ -79,6 +81,7 @@ 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()
 		}
 	}
@@ -135,12 +138,13 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					paddingRight: 17,
 				}}>
 
-				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>Provider Settings</h3>
+				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>Settings</h3>
 				<VSCodeButton onClick={handleSubmit}>Done</VSCodeButton>
 			</div>
 			<div
 				style={{ flexGrow: 1, overflowY: "scroll", paddingRight: 8, display: "flex", flexDirection: "column" }}>
 				<div style={{ marginBottom: 5 }}>
+					<h3 style={{ color: "var(--vscode-foreground)", margin: 0, marginBottom: 15 }}>Provider Settings</h3>
 					<ApiOptions
 						showModelOptions={true}
 						apiErrorMessage={apiErrorMessage}
@@ -211,6 +215,8 @@ 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>
+
+					<McpEnabledToggle />
 				</div>
 
 				<div style={{ marginBottom: 5 }}>

webview-ui/src/context/ExtensionStateContext.tsx

@@ -41,6 +41,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setScreenshotQuality: (value: number) => void
 	terminalOutputLineLimit?: number
 	setTerminalOutputLineLimit: (value: number) => void
+	mcpEnabled: boolean
+	setMcpEnabled: (value: boolean) => void
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -61,6 +63,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		browserViewportSize: "900x600",
 		screenshotQuality: 75,
 		terminalOutputLineLimit: 500,
+		mcpEnabled: true,
 	})
 	const [didHydrateState, setDidHydrateState] = useState(false)
 	const [showWelcome, setShowWelcome] = useState(false)
@@ -180,6 +183,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setWriteDelayMs: (value) => setState((prevState) => ({ ...prevState, writeDelayMs: value })),
 		setScreenshotQuality: (value) => setState((prevState) => ({ ...prevState, screenshotQuality: value })),
 		setTerminalOutputLineLimit: (value) => setState((prevState) => ({ ...prevState, terminalOutputLineLimit: value })),
+		setMcpEnabled: (value) => setState((prevState) => ({ ...prevState, mcpEnabled: value })),
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>