|
| 1 | +# Implementing MCP Mode Setting |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +Currently, the MCP (Model Context Protocol) setting is a binary option (enabled/disabled) that controls whether MCP server functionality is included in AI prompts. We need to extend this to a trinary setting with the following modes: |
| 6 | + |
| 7 | +1. **Enabled**: Full MCP functionality (current enabled state) |
| 8 | +2. **Server Use Only**: Enable MCP server use but exclude build instructions from prompts |
| 9 | +3. **Disabled**: No MCP functionality (current disabled state) |
| 10 | + |
| 11 | +This change will help users better control token usage while maintaining access to MCP server capabilities when needed. |
| 12 | + |
| 13 | +## Current Implementation |
| 14 | + |
| 15 | +### VSCode Setting |
| 16 | + |
| 17 | +Currently defined in `package.json`: |
| 18 | + |
| 19 | +```json |
| 20 | +"cline.mcp.enabled": { |
| 21 | + "type": "boolean", |
| 22 | + "default": true, |
| 23 | + "description": "Include MCP server functionality in AI prompts. When disabled, the AI will not be aware of MCP capabilities. This saves context window tokens." |
| 24 | +} |
| 25 | +``` |
| 26 | + |
| 27 | +### Core Logic |
| 28 | + |
| 29 | +- `system.ts` uses the setting to conditionally include MCP content in prompts |
| 30 | +- `ClineProvider.ts` handles setting changes and webview communication |
| 31 | + |
| 32 | +### UI |
| 33 | + |
| 34 | +- `McpView.tsx` displays a checkbox for toggling MCP functionality |
| 35 | +- Shows warning message when disabled |
| 36 | + |
| 37 | +## Implementation Steps |
| 38 | + |
| 39 | +### Implementation Order |
| 40 | + |
| 41 | +The changes should be implemented in this order to minimize disruption: |
| 42 | + |
| 43 | +1. Add new type definitions first |
| 44 | +2. Update McpHub to handle both old and new setting values |
| 45 | +3. Update message types and ClineProvider |
| 46 | +4. Update VSCode setting definition |
| 47 | +5. Update UI components |
| 48 | +6. Update system prompt generation |
| 49 | + |
| 50 | +### Step 1: Update VSCode Setting |
| 51 | + |
| 52 | +In `package.json`, update the setting definition: |
| 53 | + |
| 54 | +```json |
| 55 | +"cline.mcp.enabled": { |
| 56 | + "type": "string", |
| 57 | + "enum": ["enabled", "server-use-only", "disabled"], |
| 58 | + "enumDescriptions": [ |
| 59 | + "Full MCP functionality including server use and build instructions", |
| 60 | + "Enable MCP server use but exclude build instructions from AI prompts to save tokens", |
| 61 | + "Disable all MCP functionality" |
| 62 | + ], |
| 63 | + "default": "enabled", |
| 64 | + "description": "Control MCP server functionality and its inclusion in AI prompts" |
| 65 | +} |
| 66 | +``` |
| 67 | + |
| 68 | +### Step 2: Update Type Definitions |
| 69 | + |
| 70 | +In `src/shared/mcp.ts`, add the MCP mode type: |
| 71 | + |
| 72 | +```typescript |
| 73 | +export type McpMode = "enabled" | "server-use-only" | "disabled" |
| 74 | +``` |
| 75 | +
|
| 76 | +### Step 3: Update McpHub |
| 77 | +
|
| 78 | +In `src/services/mcp/McpHub.ts`, update the configuration reading: |
| 79 | +
|
| 80 | +```typescript |
| 81 | +export class McpHub { |
| 82 | + public getMode(): McpMode { |
| 83 | + const mode = vscode.workspace.getConfiguration("cline.mcp").get<McpMode>("enabled", "enabled") |
| 84 | + |
| 85 | + // Handle legacy boolean values |
| 86 | + if (typeof mode === "boolean") { |
| 87 | + return mode ? "enabled" : "disabled" |
| 88 | + } |
| 89 | + |
| 90 | + return mode |
| 91 | + } |
| 92 | +} |
| 93 | +``` |
| 94 | + |
| 95 | +### Step 4: Update Message Types |
| 96 | + |
| 97 | +In `src/shared/ExtensionMessage.ts` and `src/shared/WebviewMessage.ts`, update the message types: |
| 98 | + |
| 99 | +```typescript |
| 100 | +// ExtensionMessage.ts |
| 101 | +export type ExtensionMessage = |
| 102 | + | { |
| 103 | + type: "mcpEnabled" |
| 104 | + mode: McpMode |
| 105 | + } |
| 106 | + | { |
| 107 | + // ... other message types |
| 108 | + } |
| 109 | + |
| 110 | +// WebviewMessage.ts |
| 111 | +export type WebviewMessage = |
| 112 | + | { |
| 113 | + type: "toggleMcp" |
| 114 | + mode: McpMode |
| 115 | + } |
| 116 | + | { |
| 117 | + // ... other message types |
| 118 | + } |
| 119 | +``` |
| 120 | +
|
| 121 | +### Step 5: Update ClineProvider |
| 122 | +
|
| 123 | +In `src/core/webview/ClineProvider.ts`, update the message handling: |
| 124 | +
|
| 125 | +```typescript |
| 126 | +export class ClineProvider { |
| 127 | + // ... existing code ... |
| 128 | + |
| 129 | + private async handleWebviewMessage(message: WebviewMessage) { |
| 130 | + switch (message.type) { |
| 131 | + case "toggleMcp": { |
| 132 | + await vscode.workspace.getConfiguration("cline.mcp").update("enabled", message.mode, true) |
| 133 | + break |
| 134 | + } |
| 135 | + // ... other cases ... |
| 136 | + } |
| 137 | + } |
| 138 | + |
| 139 | + private async handleConfigurationChange(e: vscode.ConfigurationChangeEvent) { |
| 140 | + if (e && e.affectsConfiguration("cline.mcp.enabled")) { |
| 141 | + const mode = this.mcpHub?.getMode() ?? "enabled" |
| 142 | + await this.postMessageToWebview({ |
| 143 | + type: "mcpEnabled", |
| 144 | + mode, |
| 145 | + }) |
| 146 | + } |
| 147 | + } |
| 148 | +} |
| 149 | +``` |
| 150 | + |
| 151 | +### Step 6: Update System Prompt Generation |
| 152 | + |
| 153 | +In `src/core/prompts/system.ts`, modify how MCP content is included: |
| 154 | + |
| 155 | +```typescript |
| 156 | +export const SYSTEM_PROMPT = async ( |
| 157 | + cwd: string, |
| 158 | + supportsComputerUse: boolean, |
| 159 | + mcpMode: McpMode, |
| 160 | + browserSettings: BrowserSettings, |
| 161 | +) => { |
| 162 | + // Base prompt content... |
| 163 | + |
| 164 | + // Include MCP content for both 'enabled' and 'server-use-only' modes |
| 165 | + if (mcpMode !== "disabled") { |
| 166 | + let mcpContent = ` |
| 167 | +==== |
| 168 | +
|
| 169 | +MCP SERVERS |
| 170 | +
|
| 171 | +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. |
| 172 | +
|
| 173 | +# Connected MCP Servers |
| 174 | +
|
| 175 | +When a server is connected, you can use the server's tools via the \`use_mcp_tool\` tool, and access the server's resources via the \`access_mcp_resource\` tool. |
| 176 | +` |
| 177 | + |
| 178 | + // Add server listings... |
| 179 | + mcpContent += getServerListings() |
| 180 | + |
| 181 | + // Only include build instructions in full mode |
| 182 | + if (mcpMode === "enabled") { |
| 183 | + mcpContent += ` |
| 184 | +## Creating an MCP Server |
| 185 | +
|
| 186 | +[... build instructions content ...]` |
| 187 | + } |
| 188 | + |
| 189 | + return basePrompt + mcpContent |
| 190 | + } |
| 191 | + |
| 192 | + return basePrompt |
| 193 | +} |
| 194 | +``` |
| 195 | + |
| 196 | +### Step 5: Update UI |
| 197 | + |
| 198 | +In `webview-ui/src/components/mcp/McpView.tsx`, replace the checkbox with a select: |
| 199 | + |
| 200 | +```typescript |
| 201 | +const McpModeSelect: React.FC<{ |
| 202 | + value: McpMode; |
| 203 | + onChange: (value: McpMode) => void; |
| 204 | +}> = ({ value, onChange }) => { |
| 205 | + return ( |
| 206 | + <VSCodeDropdown |
| 207 | + value={value} |
| 208 | + onChange={(e) => onChange((e.target as HTMLSelectElement).value as McpMode)} |
| 209 | + > |
| 210 | + <option value="enabled">Fully Enabled</option> |
| 211 | + <option value="server-use-only">Server Use Only</option> |
| 212 | + <option value="disabled">Disabled</option> |
| 213 | + </select> |
| 214 | + ); |
| 215 | +}; |
| 216 | + |
| 217 | +// Update the main component |
| 218 | +const McpView = ({ onDone }: McpViewProps) => { |
| 219 | + const [mcpMode, setMcpMode] = useState<McpMode>("enabled"); |
| 220 | + |
| 221 | + useEffect(() => { |
| 222 | + vscode.postMessage({ type: "getMcpEnabled" }); |
| 223 | + }, []); |
| 224 | + |
| 225 | + useEffect(() => { |
| 226 | + const handler = (event: MessageEvent) => { |
| 227 | + const message = event.data; |
| 228 | + if (message.type === "mcpEnabled") { |
| 229 | + setMcpMode(message.mode); |
| 230 | + } |
| 231 | + }; |
| 232 | + window.addEventListener("message", handler); |
| 233 | + return () => window.removeEventListener("message", handler); |
| 234 | + }, []); |
| 235 | + |
| 236 | + const handleModeChange = (newMode: McpMode) => { |
| 237 | + vscode.postMessage({ |
| 238 | + type: "toggleMcp", |
| 239 | + mode: newMode, |
| 240 | + }); |
| 241 | + setMcpMode(newMode); |
| 242 | + }; |
| 243 | + |
| 244 | + return ( |
| 245 | + // ... existing wrapper divs ... |
| 246 | + <div> |
| 247 | + <McpModeSelect value={mcpMode} onChange={handleModeChange} /> |
| 248 | + {mcpMode === "server-use-only" && ( |
| 249 | + <div style={{ |
| 250 | + marginTop: "4px", |
| 251 | + marginLeft: "24px", |
| 252 | + color: "var(--vscode-descriptionForeground)", |
| 253 | + fontSize: "12px", |
| 254 | + }}> |
| 255 | + MCP server use is enabled, but build instructions are excluded from AI prompts to save tokens. |
| 256 | + </div> |
| 257 | + )} |
| 258 | + {mcpMode === "disabled" && ( |
| 259 | + <div style={{ |
| 260 | + padding: "8px 12px", |
| 261 | + marginTop: "8px", |
| 262 | + background: "var(--vscode-textBlockQuote-background)", |
| 263 | + border: "1px solid var(--vscode-textBlockQuote-border)", |
| 264 | + borderRadius: "4px", |
| 265 | + color: "var(--vscode-descriptionForeground)", |
| 266 | + fontSize: "12px", |
| 267 | + lineHeight: "1.4", |
| 268 | + }}> |
| 269 | + MCP is currently disabled. Enable MCP to use MCP servers and tools. Enabling MCP will use additional tokens. |
| 270 | + </div> |
| 271 | + )} |
| 272 | + </div> |
| 273 | + ); |
| 274 | +}; |
| 275 | +``` |
| 276 | + |
| 277 | +## Testing Plan |
| 278 | + |
| 279 | +1. Functionality Testing |
| 280 | + |
| 281 | + - Test each mode: |
| 282 | + - Enabled: Full MCP functionality |
| 283 | + - Server Use Only: Verify servers work but build instructions are excluded |
| 284 | + - Disabled: No MCP functionality |
| 285 | + |
| 286 | +2. UI Testing |
| 287 | + |
| 288 | + - Verify select component displays correctly |
| 289 | + - Check mode-specific messages |
| 290 | + - Test mode switching |
| 291 | + |
| 292 | +3. System Prompt Testing |
| 293 | + - Verify correct sections are included/excluded based on mode |
| 294 | + - Check server listings in each mode |
| 295 | + - Validate build instructions presence/absence |
| 296 | + |
| 297 | +## Implementation Notes |
| 298 | + |
| 299 | +- The system prompt directly checks the mode value to determine what content to include |
| 300 | +- The UI provides clear feedback about the implications of each mode |
| 301 | +- Error handling remains consistent with the existing implementation |
0 commit comments