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