Incorporate MCP changes (#93)

Co-authored-by: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>

webview-ui/src/components/chat/Announcement.tsx

@@ -30,20 +30,36 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 				<span className="codicon codicon-close"></span>
 			</VSCodeButton>
 			<h3 style={{ margin: "0 0 8px" }}>
-				🎉{"  "}New in v{minorVersion}
+				🎉{"  "}New in Cline v{minorVersion}
 			</h3>
+			<p style={{ margin: "5px 0px", fontWeight: "bold" }}>Add custom tools to Cline using MCP!</p>
 			<p style={{ margin: "5px 0px" }}>
-				Cline now uses Anthropic's new{" "}
-				<VSCodeLink
-					href="https://www.anthropic.com/news/3-5-models-and-computer-use"
-					style={{ display: "inline" }}>
-					"Computer Use"
-				</VSCodeLink>{" "}
-				feature to launch a browser, click, type, and scroll. This gives him more autonomy in runtime debugging,
-				end-to-end testing, and even general web use. Try asking "Look up the weather in Colorado" to see it in
-				action, or{" "}
-				<VSCodeLink href="https://x.com/sdrzn/status/1850880547825823989" style={{ display: "inline" }}>
-					see a full demo here.
+				The Model Context Protocol allows agents like Cline to plug and play custom tools,{" "}
+				<VSCodeLink href="https://github.com/modelcontextprotocol/servers" style={{ display: "inline" }}>
+					e.g. a web-search tool or GitHub tool.
+				</VSCodeLink>
+			</p>
+			<p style={{ margin: "5px 0px" }}>
+				You can add and configure MCP servers by clicking the new{" "}
+				<span className="codicon codicon-server" style={{ fontSize: "10px" }}></span> icon in the menu bar.
+			</p>
+			<p style={{ margin: "5px 0px" }}>
+				To take things a step further, Cline also has the ability to create custom tools for himself. Just say
+				"add a tool that..." and watch as he builds and installs new capabilities specific to{" "}
+				<i>your workflow</i>. For example:
+				<ul style={{ margin: "4px 0 6px 20px", padding: 0 }}>
+					<li>"...fetches Jira tickets": Get ticket ACs and put Cline to work</li>
+					<li>"...manages AWS EC2s": Check server metrics and scale up or down</li>
+					<li>"...pulls PagerDuty incidents": Pulls details to help Cline fix bugs</li>
+				</ul>
+				Cline handles everything from creating the MCP server to installing it in the extension, ready to use in
+				future tasks. The servers are saved to <code>~/Documents/Cline/MCP</code> so you can easily share them
+				with others too.{" "}
+			</p>
+			<p style={{ margin: "5px 0px" }}>
+				Try it yourself by asking Cline to "add a tool that gets the latest npm docs", or
+				<VSCodeLink href="https://x.com/sdrzn/status/1867271665086074969" style={{ display: "inline" }}>
+					see a demo of MCP in action here.
 				</VSCodeLink>
 			</p>
 			{/*<ul style={{ margin: "0 0 8px", paddingLeft: "12px" }}>
@@ -93,6 +109,14 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 					environments)
 				</li>
 			</ul>*/}
+			<div
+				style={{
+					height: "1px",
+					background: "var(--vscode-foreground)",
+					opacity: 0.1,
+					margin: "8px 0",
+				}}
+			/>
 			<p style={{ margin: "0" }}>
 				Join
 				<VSCodeLink style={{ display: "inline" }} href="https://discord.gg/cline">

webview-ui/src/components/chat/ChatRow.tsx

@@ -2,13 +2,22 @@ import { VSCodeBadge, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/reac
 import deepEqual from "fast-deep-equal"
 import React, { memo, useEffect, useMemo, useRef } from "react"
 import { useSize } from "react-use"
-import { ClineApiReqInfo, ClineMessage, ClineSayTool } from "../../../../src/shared/ExtensionMessage"
+import {
+	ClineApiReqInfo,
+	ClineAskUseMcpServer,
+	ClineMessage,
+	ClineSayTool,
+} from "../../../../src/shared/ExtensionMessage"
 import { COMMAND_OUTPUT_STRING } from "../../../../src/shared/combineCommandSequences"
+import { useExtensionState } from "../../context/ExtensionStateContext"
+import { findMatchingResourceOrTemplate } from "../../utils/mcp"
 import { vscode } from "../../utils/vscode"
 import CodeAccordian, { removeLeadingNonAlphanumeric } from "../common/CodeAccordian"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import MarkdownBlock from "../common/MarkdownBlock"
 import Thumbnails from "../common/Thumbnails"
+import McpResourceRow from "../mcp/McpResourceRow"
+import McpToolRow from "../mcp/McpToolRow"
 import { highlightMentions } from "./TaskHeader"
 
 interface ChatRowProps {
@@ -67,6 +76,7 @@ export const ChatRowContent = ({
 	lastModifiedMessage,
 	isLast,
 }: ChatRowContentProps) => {
+	const { mcpServers } = useExtensionState()
 	const [cost, apiReqCancelReason, apiReqStreamingFailedMessage] = useMemo(() => {
 		if (message.text != null && message.say === "api_req_started") {
 			const info: ClineApiReqInfo = JSON.parse(message.text)
@@ -81,6 +91,9 @@ export const ChatRowContent = ({
 			: undefined
 	const isCommandExecuting =
 		isLast && lastModifiedMessage?.ask === "command" && lastModifiedMessage?.text?.includes(COMMAND_OUTPUT_STRING)
+
+	const isMcpServerResponding = isLast && lastModifiedMessage?.say === "mcp_server_request_started"
+
 	const type = message.type === "ask" ? message.ask : message.say
 
 	const normalColor = "var(--vscode-foreground)"
@@ -117,6 +130,21 @@ export const ChatRowContent = ({
 						Cline wants to execute this command:
 					</span>,
 				]
+			case "use_mcp_server":
+				const mcpServerUse = JSON.parse(message.text || "{}") as ClineAskUseMcpServer
+				return [
+					isMcpServerResponding ? (
+						<ProgressIndicator />
+					) : (
+						<span
+							className="codicon codicon-server"
+							style={{ color: normalColor, marginBottom: "-1.5px" }}></span>
+					),
+					<span style={{ color: normalColor, fontWeight: "bold" }}>
+						Cline wants to {mcpServerUse.type === "use_mcp_tool" ? "use a tool" : "access a resource"} on
+						the <code>{mcpServerUse.serverName}</code> MCP server:
+					</span>,
+				]
 			case "completion_result":
 				return [
 					<span
@@ -181,7 +209,15 @@ export const ChatRowContent = ({
 			default:
 				return [null, null]
 		}
-	}, [type, cost, apiRequestFailedMessage, isCommandExecuting, apiReqCancelReason])
+	}, [
+		type,
+		cost,
+		apiRequestFailedMessage,
+		isCommandExecuting,
+		apiReqCancelReason,
+		isMcpServerResponding,
+		message.text,
+	])
 
 	const headerStyle: React.CSSProperties = {
 		display: "flex",
@@ -618,6 +654,28 @@ export const ChatRowContent = ({
 							</div>
 						</>
 					)
+				case "mcp_server_response":
+					return (
+						<>
+							<div style={{ paddingTop: 0 }}>
+								<div
+									style={{
+										marginBottom: "4px",
+										opacity: 0.8,
+										fontSize: "12px",
+										textTransform: "uppercase",
+									}}>
+									Response
+								</div>
+								<CodeAccordian
+									code={message.text}
+									language="json"
+									isExpanded={true}
+									onToggleExpand={onToggleExpand}
+								/>
+							</div>
+						</>
+					)
 				default:
 					return (
 						<>
@@ -717,6 +775,76 @@ export const ChatRowContent = ({
 							</div>
 						</>
 					)
+				case "use_mcp_server":
+					const useMcpServer = JSON.parse(message.text || "{}") as ClineAskUseMcpServer
+					const server = mcpServers.find((server) => server.name === useMcpServer.serverName)
+					return (
+						<>
+							<div style={headerStyle}>
+								{icon}
+								{title}
+							</div>
+
+							<div
+								style={{
+									background: "var(--vscode-textCodeBlock-background)",
+									borderRadius: "3px",
+									padding: "8px 10px",
+									marginTop: "8px",
+								}}>
+								{useMcpServer.type === "access_mcp_resource" && (
+									<McpResourceRow
+										item={{
+											// Use the matched resource/template details, with fallbacks
+											...(findMatchingResourceOrTemplate(
+												useMcpServer.uri || "",
+												server?.resources,
+												server?.resourceTemplates,
+											) || {
+												name: "",
+												mimeType: "",
+												description: "",
+											}),
+											// Always use the actual URI from the request
+											uri: useMcpServer.uri || "",
+										}}
+									/>
+								)}
+
+								{useMcpServer.type === "use_mcp_tool" && (
+									<>
+										<McpToolRow
+											tool={{
+												name: useMcpServer.toolName || "",
+												description:
+													server?.tools?.find((tool) => tool.name === useMcpServer.toolName)
+														?.description || "",
+											}}
+										/>
+										{useMcpServer.arguments && useMcpServer.arguments !== "{}" && (
+											<div style={{ marginTop: "8px" }}>
+												<div
+													style={{
+														marginBottom: "4px",
+														opacity: 0.8,
+														fontSize: "12px",
+														textTransform: "uppercase",
+													}}>
+													Arguments
+												</div>
+												<CodeAccordian
+													code={useMcpServer.arguments}
+													language="json"
+													isExpanded={true}
+													onToggleExpand={onToggleExpand}
+												/>
+											</div>
+										)}
+									</>
+								)}
+							</div>
+						</>
+					)
 				case "completion_result":
 					if (message.text) {
 						return (

webview-ui/src/components/chat/ChatView.tsx

@@ -156,6 +156,13 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 							setPrimaryButtonText("Proceed While Running")
 							setSecondaryButtonText(undefined)
 							break
+						case "use_mcp_server":
+							setTextAreaDisabled(isPartial)
+							setClineAsk("use_mcp_server")
+							setEnableButtons(!isPartial)
+							setPrimaryButtonText("Approve")
+							setSecondaryButtonText("Reject")
+							break
 						case "completion_result":
 							// extension waiting for feedback. but we can just present a new task button
 							playSoundOnMessage("celebration")
@@ -205,6 +212,8 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						case "browser_action":
 						case "browser_action_result":
 						case "command_output":
+						case "mcp_server_request_started":
+						case "mcp_server_response":
 						case "completion_result":
 						case "tool":
 							break
@@ -273,6 +282,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						case "browser_action_launch":
 						case "command": // user can provide feedback to a tool or command use
 						case "command_output": // user can send input to command stdin
+						case "use_mcp_server":
 						case "completion_result": // if this happens then the user has feedback for the completion result
 						case "resume_task":
 						case "resume_completed_task":
@@ -314,6 +324,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 			case "command_output":
 			case "tool":
 			case "browser_action_launch":
+			case "use_mcp_server":
 			case "resume_task":
 			case "mistake_limit_reached":
 				vscode.postMessage({ type: "askResponse", askResponse: "yesButtonClicked" })
@@ -348,6 +359,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 			case "command":
 			case "tool":
 			case "browser_action_launch":
+			case "use_mcp_server":
 				// responds to the API with a "This operation failed" and lets it try again
 				vscode.postMessage({ type: "askResponse", askResponse: "noButtonClicked" })
 				break
@@ -463,6 +475,8 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						return false
 					}
 					break
+				case "mcp_server_request_started":
+					return false
 			}
 			return true
 		})
@@ -824,7 +838,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 							I can handle complex software development tasks step-by-step. With tools that let me create
 							& edit files, explore complex projects, use the browser, and execute terminal commands
 							(after you grant permission), I can assist you in ways that go beyond code completion or
-							tech support.
+							tech support. I can even use MCP to create new tools and extend my own capabilities.
 						</p>
 					</div>
 					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}