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