Prepare MCP release with new copy and announcement

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

@@ -32,18 +32,33 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 			<h3 style={{ margin: "0 0 8px" }}>
 				🎉{"  "}New in v{minorVersion}
 			</h3>
+			<p style={{ margin: "5px 0px", fontWeight: "bold" }}>Add custom tools to Cline using MCP!</p>
+			<p style={{ margin: "5px 0px" }}>
+				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{" "}
+				<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" }}>
-				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.
+					See a demo of MCP in action here!
 				</VSCodeLink>
 			</p>
 			{/*<ul style={{ margin: "0 0 8px", paddingLeft: "12px" }}>
@@ -93,6 +108,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/ChatView.tsx

@@ -732,7 +732,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} />}

webview-ui/src/components/mcp/McpView.tsx

@@ -1,4 +1,10 @@
-import { VSCodeButton, VSCodePanels, VSCodePanelTab, VSCodePanelView } from "@vscode/webview-ui-toolkit/react"
+import {
+	VSCodeButton,
+	VSCodeLink,
+	VSCodePanels,
+	VSCodePanelTab,
+	VSCodePanelView,
+} from "@vscode/webview-ui-toolkit/react"
 import { useState } from "react"
 import { vscode } from "../../utils/vscode"
 import { useExtensionState } from "../../context/ExtensionStateContext"
@@ -96,11 +102,25 @@ const McpView = ({ onDone }: McpViewProps) => {
 			</div>
 
 			<div style={{ flex: 1, overflow: "auto", padding: "0 20px" }}>
-				<p style={{ color: "var(--vscode-foreground)", fontSize: "13px" }}>
-					MCP (Model Context Protocol) enables AI models to access external tools and data through
-					standardized interfaces. These MCP servers extend Claude's capabilities with custom functionality
-					and real-time data access.
-				</p>
+				<div
+					style={{
+						color: "var(--vscode-foreground)",
+						fontSize: "13px",
+						marginBottom: "20px",
+						marginTop: "5px",
+					}}>
+					The{" "}
+					<VSCodeLink href="https://github.com/modelcontextprotocol" style={{ display: "inline" }}>
+						Model Context Protocol
+					</VSCodeLink>{" "}
+					enables communication with locally running MCP servers that provide additional tools and resources
+					to extend Cline's capabilities. You can use{" "}
+					<VSCodeLink href="https://github.com/modelcontextprotocol/servers" style={{ display: "inline" }}>
+						community-made servers
+					</VSCodeLink>{" "}
+					or ask Cline to create new tools specific to your workflow (e.g., "add a tool that pulls GitHub
+					issues")
+				</div>
 
 				{/* Server List */}
 				<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -31,7 +31,8 @@ const WelcomeView = () => {
 					Claude 3.5 Sonnet's agentic coding capabilities
 				</VSCodeLink>{" "}
 				and access to tools that let me create & edit files, explore complex projects, use the browser, and
-				execute terminal commands (with your permission, of course).
+				execute terminal commands (with your permission, of course). I can even use MCP to create new tools and
+				extend my own capabilities.
 			</p>
 
 			<b>To get started, this extension needs an API provider for Claude 3.5 Sonnet.</b>