From ed358b4e076f608f7c0951d366bcbb4745fe3194 Mon Sep 17 00:00:00 2001 From: Daniel Riccio Date: Thu, 2 Jan 2025 18:54:24 -0500 Subject: [PATCH 1/8] Add toggle to enable or disable MCP servers on the system prompt --- src/core/Cline.ts | 4 +++- src/core/prompts/system.ts | 12 +++++++++--- src/core/webview/ClineProvider.ts | 14 +++++++++++++- .../webview/__tests__/ClineProvider.test.ts | 1 + src/shared/ExtensionMessage.ts | 1 + src/shared/WebviewMessage.ts | 1 + .../src/components/settings/SettingsView.tsx | 19 +++++++++++++++++++ .../src/context/ExtensionStateContext.tsx | 4 ++++ 8 files changed, 51 insertions(+), 5 deletions(-) diff --git a/src/core/Cline.ts b/src/core/Cline.ts index 7e06c22..ec24443 100644 --- a/src/core/Cline.ts +++ b/src/core/Cline.ts @@ -788,8 +788,10 @@ export class Cline { throw new Error("MCP hub not available") } + const mcpEnabled = this.providerRef.deref()?.mcpEnabled ?? true; + const { browserViewportSize, preferredLanguage } = await this.providerRef.deref()?.getState() ?? {} - const systemPrompt = await SYSTEM_PROMPT(cwd, this.api.getModel().info.supportsComputerUse ?? false, mcpHub, this.diffStrategy, browserViewportSize) + await addCustomInstructions(this.customInstructions ?? '', cwd, preferredLanguage) + const systemPrompt = await SYSTEM_PROMPT(cwd, this.api.getModel().info.supportsComputerUse ?? false, mcpEnabled, mcpHub, this.diffStrategy, browserViewportSize) + await addCustomInstructions(this.customInstructions ?? '', cwd, preferredLanguage) // If the previous API request's total token usage is close to the context window, truncate the conversation history to free up space for the new request if (previousApiReqIndex >= 0) { diff --git a/src/core/prompts/system.ts b/src/core/prompts/system.ts index b1a835a..a994422 100644 --- a/src/core/prompts/system.ts +++ b/src/core/prompts/system.ts @@ -9,6 +9,7 @@ import { McpHub } from "../../services/mcp/McpHub" export const SYSTEM_PROMPT = async ( cwd: string, supportsComputerUse: boolean, + mcpEnabled: boolean, mcpHub: McpHub, diffStrategy?: DiffStrategy, browserViewportSize?: string @@ -146,6 +147,7 @@ Usage: : "" } +${mcpEnabled ? ` ## 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 +175,7 @@ Usage: server name here resource URI here - +` : ''} ## 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 +231,7 @@ Your final result description here 14 +${mcpEnabled ? ` ## Example 3: Requesting to use an MCP tool @@ -247,7 +250,7 @@ Your final result description here weather-server weather://san-francisco/current - +` : ''} # Tool Use Guidelines @@ -272,6 +275,7 @@ By waiting for and carefully considering the user's response after each tool use ==== +${mcpEnabled ? ` 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 +679,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 +697,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." : "" } +${mcpEnabled ? ` - 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. +` : ''} ==== diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts index f2fae33..69867f0 100644 --- a/src/core/webview/ClineProvider.ts +++ b/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", @@ -96,6 +96,7 @@ export class ClineProvider implements vscode.WebviewViewProvider { private workspaceTracker?: WorkspaceTracker mcpHub?: McpHub private latestAnnouncementId = "dec-10-2024" // update to some unique identifier when we add a new announcement + mcpEnabled: boolean = true constructor( readonly context: vscode.ExtensionContext, @@ -130,6 +131,7 @@ export class ClineProvider implements vscode.WebviewViewProvider { this.workspaceTracker = undefined this.mcpHub?.dispose() this.mcpHub = undefined + this.mcpEnabled = true this.outputChannel.appendLine("Disposed all disposables") ClineProvider.activeInstances.delete(this) } @@ -606,6 +608,11 @@ export class ClineProvider implements vscode.WebviewViewProvider { } break } + case "mcpEnabled": + this.mcpEnabled = message.bool ?? true + await this.updateGlobalState("mcpEnabled", this.mcpEnabled) + await this.postStateToWebview() + break case "playSound": if (message.audioType) { const soundPath = path.join(this.context.extensionPath, "audio", `${message.audioType}.wav`) @@ -1056,6 +1063,7 @@ export class ClineProvider implements vscode.WebviewViewProvider { writeDelayMs, terminalOutputLineLimit, fuzzyMatchThreshold, + mcpEnabled, } = await this.getState() const allowedCommands = vscode.workspace @@ -1087,6 +1095,7 @@ export class ClineProvider implements vscode.WebviewViewProvider { writeDelayMs: writeDelayMs ?? 1000, terminalOutputLineLimit: terminalOutputLineLimit ?? 500, fuzzyMatchThreshold: fuzzyMatchThreshold ?? 1.0, + mcpEnabled: mcpEnabled ?? true, } } @@ -1188,6 +1197,7 @@ export class ClineProvider implements vscode.WebviewViewProvider { writeDelayMs, screenshotQuality, terminalOutputLineLimit, + mcpEnabled, ] = await Promise.all([ this.getGlobalState("apiProvider") as Promise, this.getGlobalState("apiModelId") as Promise, @@ -1234,6 +1244,7 @@ export class ClineProvider implements vscode.WebviewViewProvider { this.getGlobalState("writeDelayMs") as Promise, this.getGlobalState("screenshotQuality") as Promise, this.getGlobalState("terminalOutputLineLimit") as Promise, + this.getGlobalState("mcpEnabled") as Promise, ]) let apiProvider: ApiProvider @@ -1324,6 +1335,7 @@ export class ClineProvider implements vscode.WebviewViewProvider { // Return mapped language or default to English return langMap[vscodeLang.split('-')[0]] ?? 'English'; })(), + mcpEnabled: mcpEnabled ?? true, } } diff --git a/src/core/webview/__tests__/ClineProvider.test.ts b/src/core/webview/__tests__/ClineProvider.test.ts index af75631..2add65e 100644 --- a/src/core/webview/__tests__/ClineProvider.test.ts +++ b/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 = { diff --git a/src/shared/ExtensionMessage.ts b/src/shared/ExtensionMessage.ts index 3acc740..c00fa6c 100644 --- a/src/shared/ExtensionMessage.ts +++ b/src/shared/ExtensionMessage.ts @@ -62,6 +62,7 @@ export interface ExtensionState { preferredLanguage: string writeDelayMs: number terminalOutputLineLimit?: number + mcpEnabled: boolean } export interface ClineMessage { diff --git a/src/shared/WebviewMessage.ts b/src/shared/WebviewMessage.ts index bfa659a..ee602ed 100644 --- a/src/shared/WebviewMessage.ts +++ b/src/shared/WebviewMessage.ts @@ -49,6 +49,7 @@ export interface WebviewMessage { | "draggedImages" | "deleteMessage" | "terminalOutputLineLimit" + | "mcpEnabled" text?: string disabled?: boolean askResponse?: ClineAskResponse diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx index 7ac1563..fb27dc4 100644 --- a/webview-ui/src/components/settings/SettingsView.tsx +++ b/webview-ui/src/components/settings/SettingsView.tsx @@ -48,6 +48,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => { setScreenshotQuality, terminalOutputLineLimit, setTerminalOutputLineLimit, + mcpEnabled, + setMcpEnabled, } = useExtensionState() const [apiErrorMessage, setApiErrorMessage] = useState(undefined) const [modelIdErrorMessage, setModelIdErrorMessage] = useState(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() } } @@ -211,6 +214,21 @@ 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.

+ +
+ setMcpEnabled(e.target.checked)}> + Enable MCP Servers + +

+ When enabled, Cline will be able to interact with MCP servers for advanced functionality. +

+
@@ -558,6 +576,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
+ {IS_DEV && ( <>
Debug
diff --git a/webview-ui/src/context/ExtensionStateContext.tsx b/webview-ui/src/context/ExtensionStateContext.tsx index 36ad4db..45e0614 100644 --- a/webview-ui/src/context/ExtensionStateContext.tsx +++ b/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(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 {children} From 70f3c041e6880abd88a6419348285e81370c49f6 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Thu, 2 Jan 2025 21:11:35 -0800 Subject: [PATCH 2/8] Put more logic behind mcpEnabled flag --- src/core/Cline.ts | 23 ++++++++++++----------- src/core/prompts/system.ts | 11 +++++------ 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/core/Cline.ts b/src/core/Cline.ts index ec24443..f1a14f6 100644 --- a/src/core/Cline.ts +++ b/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,20 +779,20 @@ 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") - }) - - const mcpHub = this.providerRef.deref()?.mcpHub - if (!mcpHub) { - throw new Error("MCP hub not available") + let mcpHub: McpHub | undefined + if (this.providerRef.deref()?.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 mcpEnabled = this.providerRef.deref()?.mcpEnabled ?? true; - const { browserViewportSize, preferredLanguage } = await this.providerRef.deref()?.getState() ?? {} - const systemPrompt = await SYSTEM_PROMPT(cwd, this.api.getModel().info.supportsComputerUse ?? false, mcpEnabled, mcpHub, this.diffStrategy, browserViewportSize) + await addCustomInstructions(this.customInstructions ?? '', cwd, preferredLanguage) + const systemPrompt = await SYSTEM_PROMPT(cwd, this.api.getModel().info.supportsComputerUse ?? false, mcpHub, this.diffStrategy, browserViewportSize) + await addCustomInstructions(this.customInstructions ?? '', cwd, preferredLanguage) // If the previous API request's total token usage is close to the context window, truncate the conversation history to free up space for the new request if (previousApiReqIndex >= 0) { diff --git a/src/core/prompts/system.ts b/src/core/prompts/system.ts index a994422..88bfc26 100644 --- a/src/core/prompts/system.ts +++ b/src/core/prompts/system.ts @@ -9,8 +9,7 @@ import { McpHub } from "../../services/mcp/McpHub" export const SYSTEM_PROMPT = async ( cwd: string, supportsComputerUse: boolean, - mcpEnabled: 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. @@ -147,7 +146,7 @@ Usage: : "" } -${mcpEnabled ? ` +${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: @@ -231,7 +230,7 @@ Your final result description here 14 -${mcpEnabled ? ` +${mcpHub ? ` ## Example 3: Requesting to use an MCP tool @@ -275,7 +274,7 @@ By waiting for and carefully considering the user's response after each tool use ==== -${mcpEnabled ? ` +${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. @@ -697,7 +696,7 @@ 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." : "" } -${mcpEnabled ? ` +${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. ` : ''} From 8cb44aa69506524ae41b65759e7972182c2fc223 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Thu, 2 Jan 2025 21:28:32 -0800 Subject: [PATCH 3/8] Move MCP checkbox to the MCP settings screen --- webview-ui/src/components/mcp/McpView.tsx | 65 +++++++++++++------ .../src/components/settings/SettingsView.tsx | 19 ------ 2 files changed, 44 insertions(+), 40 deletions(-) diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx index 318cbab..1f1c602 100644 --- a/webview-ui/src/components/mcp/McpView.tsx +++ b/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([ // // 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,28 +123,50 @@ const McpView = ({ onDone }: McpViewProps) => { npm docs"). - {/* Server List */} - {servers.length > 0 && ( -
- {servers.map((server) => ( - - ))} -
- )} - - {/* Edit Settings Button */} -
- { - vscode.postMessage({ type: "openMcpSettings" }) +
+ { + setMcpEnabled(e.target.checked) + vscode.postMessage({ type: "mcpEnabled", bool: e.target.checked }) }}> - - Edit MCP Settings - + Enable MCP Servers + +

+ 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. +

+ {mcpEnabled && ( + <> + {/* Server List */} + {servers.length > 0 && ( +
+ {servers.map((server) => ( + + ))} +
+ )} + + {/* Edit Settings Button */} +
+ { + vscode.postMessage({ type: "openMcpSettings" }) + }}> + + Edit MCP Settings + +
+ + )} + {/* Bottom padding */}
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx index fb27dc4..7ac1563 100644 --- a/webview-ui/src/components/settings/SettingsView.tsx +++ b/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(undefined) const [modelIdErrorMessage, setModelIdErrorMessage] = useState(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.

- -
- setMcpEnabled(e.target.checked)}> - Enable MCP Servers - -

- When enabled, Cline will be able to interact with MCP servers for advanced functionality. -

-
@@ -576,7 +558,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
- {IS_DEV && ( <>
Debug
From d32c5f805eeafc99a93a8b6a30da5bcadf8f8efd Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Thu, 2 Jan 2025 21:36:05 -0800 Subject: [PATCH 4/8] Cleanup --- src/core/Cline.ts | 5 ++++- src/core/webview/ClineProvider.ts | 6 ++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/core/Cline.ts b/src/core/Cline.ts index f1a14f6..6a73a5f 100644 --- a/src/core/Cline.ts +++ b/src/core/Cline.ts @@ -780,7 +780,10 @@ export class Cline { async *attemptApiRequest(previousApiReqIndex: number): ApiStream { let mcpHub: McpHub | undefined - if (this.providerRef.deref()?.mcpEnabled ?? true) { + + const { mcpEnabled } = await this.providerRef.deref()?.getState() ?? {} + + if (mcpEnabled ?? true) { mcpHub = this.providerRef.deref()?.mcpHub if (!mcpHub) { throw new Error("MCP hub not available") diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts index 69867f0..45f9d06 100644 --- a/src/core/webview/ClineProvider.ts +++ b/src/core/webview/ClineProvider.ts @@ -96,7 +96,6 @@ export class ClineProvider implements vscode.WebviewViewProvider { private workspaceTracker?: WorkspaceTracker mcpHub?: McpHub private latestAnnouncementId = "dec-10-2024" // update to some unique identifier when we add a new announcement - mcpEnabled: boolean = true constructor( readonly context: vscode.ExtensionContext, @@ -131,7 +130,6 @@ export class ClineProvider implements vscode.WebviewViewProvider { this.workspaceTracker = undefined this.mcpHub?.dispose() this.mcpHub = undefined - this.mcpEnabled = true this.outputChannel.appendLine("Disposed all disposables") ClineProvider.activeInstances.delete(this) } @@ -609,8 +607,8 @@ export class ClineProvider implements vscode.WebviewViewProvider { break } case "mcpEnabled": - this.mcpEnabled = message.bool ?? true - await this.updateGlobalState("mcpEnabled", this.mcpEnabled) + const mcpEnabled = message.bool ?? true + await this.updateGlobalState("mcpEnabled", mcpEnabled) await this.postStateToWebview() break case "playSound": From 06733d949bc345b2cfc41b76be5e0ba35832c246 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Thu, 2 Jan 2025 21:58:26 -0800 Subject: [PATCH 5/8] Add back to the settings page as well --- .../src/components/mcp/McpEnabledToggle.tsx | 29 +++++++++++++++++++ webview-ui/src/components/mcp/McpView.tsx | 22 ++------------ .../src/components/settings/SettingsView.tsx | 5 ++++ 3 files changed, 37 insertions(+), 19 deletions(-) create mode 100644 webview-ui/src/components/mcp/McpEnabledToggle.tsx diff --git a/webview-ui/src/components/mcp/McpEnabledToggle.tsx b/webview-ui/src/components/mcp/McpEnabledToggle.tsx new file mode 100644 index 0000000..75baa9f --- /dev/null +++ b/webview-ui/src/components/mcp/McpEnabledToggle.tsx @@ -0,0 +1,29 @@ +import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react" +import { useExtensionState } from "../../context/ExtensionStateContext" +import { vscode } from "../../utils/vscode" + +const McpEnabledToggle = () => { + const { mcpEnabled, setMcpEnabled } = useExtensionState() + + return ( +
+ { + setMcpEnabled(e.target.checked) + vscode.postMessage({ type: "mcpEnabled", bool: e.target.checked }) + }}> + Enable MCP Servers + +

+ 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. +

+
+ ) +} + +export default McpEnabledToggle \ No newline at end of file diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx index 1f1c602..ea2ea2b 100644 --- a/webview-ui/src/components/mcp/McpView.tsx +++ b/webview-ui/src/components/mcp/McpView.tsx @@ -1,6 +1,5 @@ import { VSCodeButton, - VSCodeCheckbox, VSCodeLink, VSCodePanels, VSCodePanelTab, @@ -12,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, mcpEnabled, setMcpEnabled } = useExtensionState() + const { mcpServers: servers, alwaysAllowMcp, mcpEnabled } = useExtensionState() // const [servers, setServers] = useState([ // // Add some mock servers for testing // { @@ -123,23 +123,7 @@ const McpView = ({ onDone }: McpViewProps) => { npm docs"). -
- { - setMcpEnabled(e.target.checked) - vscode.postMessage({ type: "mcpEnabled", bool: e.target.checked }) - }}> - Enable MCP Servers - -

- 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. -

-
+ {mcpEnabled && ( <> diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx index 7ac1563..16c0a3c 100644 --- a/webview-ui/src/components/settings/SettingsView.tsx +++ b/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(undefined) const [modelIdErrorMessage, setModelIdErrorMessage] = useState(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() } } @@ -211,6 +214,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.

+ +
From 28451f3afa20004c74a018f94dc35a3298bfa31a Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Thu, 2 Jan 2025 22:05:59 -0800 Subject: [PATCH 6/8] Release --- .changeset/slimy-pans-obey.md | 5 +++++ README.md | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/slimy-pans-obey.md diff --git a/.changeset/slimy-pans-obey.md b/.changeset/slimy-pans-obey.md new file mode 100644 index 0000000..01ea6c7 --- /dev/null +++ b/.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!) diff --git a/README.md b/README.md index 5d1cd7b..892a5de 100644 --- a/README.md +++ b/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 From ca35de385f781420023f6e86b55ff09ce6275874 Mon Sep 17 00:00:00 2001 From: Matt Rubens Date: Thu, 2 Jan 2025 22:11:26 -0800 Subject: [PATCH 7/8] Tiny settings cleanup --- webview-ui/src/components/settings/SettingsView.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx index 16c0a3c..645a260 100644 --- a/webview-ui/src/components/settings/SettingsView.tsx +++ b/webview-ui/src/components/settings/SettingsView.tsx @@ -138,12 +138,13 @@ const SettingsView = ({ onDone }: SettingsViewProps) => { paddingRight: 17, }}> -

Provider Settings

+

Settings

Done
+

Provider Settings

Date: Thu, 2 Jan 2025 22:24:43 -0800 Subject: [PATCH 8/8] Appease Ellipsis --- webview-ui/src/components/mcp/McpEnabledToggle.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/webview-ui/src/components/mcp/McpEnabledToggle.tsx b/webview-ui/src/components/mcp/McpEnabledToggle.tsx index 75baa9f..41c94c7 100644 --- a/webview-ui/src/components/mcp/McpEnabledToggle.tsx +++ b/webview-ui/src/components/mcp/McpEnabledToggle.tsx @@ -1,18 +1,23 @@ 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) => { + 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 (
{ - setMcpEnabled(e.target.checked) - vscode.postMessage({ type: "mcpEnabled", bool: e.target.checked }) - }}> + onChange={handleChange}> Enable MCP Servers