From dc2a9682f87d43294aa955e41f36fb8e806ff117 Mon Sep 17 00:00:00 2001 From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com> Date: Tue, 10 Dec 2024 18:30:20 -0800 Subject: [PATCH] Prepare MCP release with new copy and announcement --- CHANGELOG.md | 6 +++ README.md | 29 ++++++++++--- package.json | 3 +- src/core/webview/ClineProvider.ts | 2 +- .../src/components/chat/Announcement.tsx | 43 ++++++++++++++----- webview-ui/src/components/chat/ChatView.tsx | 2 +- webview-ui/src/components/mcp/McpView.tsx | 32 +++++++++++--- .../src/components/welcome/WelcomeView.tsx | 3 +- 8 files changed, 94 insertions(+), 26 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 23d91dcf6..a1066e7b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## [2.2.0] + +- Add support for Model Context Protocol (MCP), enabling Cline to use custom tools like web-search tool or GitHub tool +- Add MCP server management tab accessible via the server icon in the menu bar +- Add ability for Cline to dynamically create new MCP servers based on user requests (e.g., "add a tool that fetches Jira tickets") + ## [2.1.6] - Add LM Studio as an API provider option (make sure to start the LM Studio server to use it with the extension!) diff --git a/README.md b/README.md index 9740b9123..2adfbeb60 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Meet Cline, an AI assistant that can use your **CLI** a**N**d **E**ditor. -Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf), Cline can handle complex software development tasks step-by-step. With tools that let him create & edit files, explore large projects, use the browser, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond code completion or tech support. While autonomous AI scripts traditionally run in sandboxed environments, this extension provides a human-in-the-loop GUI to approve every file change and terminal command, providing a safe and accessible way to explore the potential of agentic AI. +Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf), Cline can handle complex software development tasks step-by-step. With tools that let him create & edit files, explore large projects, use the browser, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond code completion or tech support. Cline can even use the Model Context Protocol (MCP) to create new tools and extend his own capabilities. While autonomous AI scripts traditionally run in sandboxed environments, this extension provides a human-in-the-loop GUI to approve every file change and terminal command, providing a safe and accessible way to explore the potential of agentic AI. 1. Enter your task and add images to convert mockups into functional apps or fix bugs with screenshots. 2. Cline starts by analyzing your file structure & source code ASTs, running regex searches, and reading relevant files to get up to speed in existing projects. By carefully managing what information is added to context, Cline can provide valuable assistance even for large, complex projects without overwhelming the context window. @@ -88,14 +88,31 @@ Try asking Cline to "test the app", and watch as he runs a command like `npm run
- + + +### "add a tool that..." + +Thanks to the [Model Context Protocol](https://github.com/modelcontextprotocol), Cline can extend his capabilities through custom tools. While you can use [community-made servers](https://github.com/modelcontextprotocol/servers), Cline can instead create and install tools tailored to your specific workflow. Just ask Cline to "add a tool" and he will handle everything, from creating a new MCP server to installing it into the extension. These custom tools then become part of Cline's toolkit, ready to use in future tasks. + +- "add a tool that fetches Jira tickets": Retrieve ticket ACs and put Cline to work +- "add a tool that manages AWS EC2s": Check server metrics and scale instances up or down, all within VSCode +- "add a tool that pulls the latest PagerDuty incidents": Fetch critical alerts and ask Cline to fix bugs + + + +
+ + ### Add Context -- **`@url`:** Paste in a URL for the extension to fetch and convert to markdown, useful when you want to give Cline the latest docs -- **`@problems`:** Add workspace errors and warnings ('Problems' panel) for Cline to fix -- **`@file`:** Adds a file's contents so you don't have to waste API requests approving read file (+ type to search files) -- **`@folder`:** Adds folder's files all at once to speed up your workflow even more +**`@url`:** Paste in a URL for the extension to fetch and convert to markdown, useful when you want to give Cline the latest docs + +**`@problems`:** Add workspace errors and warnings ('Problems' panel) for Cline to fix + +**`@file`:** Adds a file's contents so you don't have to waste API requests approving read file (+ type to search files) + +**`@folder`:** Adds folder's files all at once to speed up your workflow even more ## Contributing diff --git a/package.json b/package.json index 18dc07544..dc7f4df87 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "claude-dev", "displayName": "Cline (prev. Claude Dev)", "description": "Autonomous coding agent right in your IDE, capable of creating/editing files, running commands, using the browser, and more with your permission every step of the way.", - "version": "2.1.6", + "version": "2.2.0", "icon": "assets/icons/icon.png", "galleryBanner": { "color": "#617A91", @@ -33,6 +33,7 @@ "cline", "claude", "dev", + "mcp", "openrouter", "coding", "agent", diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts index 5fd75226e..5b327f6cc 100644 --- a/src/core/webview/ClineProvider.ts +++ b/src/core/webview/ClineProvider.ts @@ -76,7 +76,7 @@ export class ClineProvider implements vscode.WebviewViewProvider { private cline?: Cline private workspaceTracker?: WorkspaceTracker mcpHub?: McpHub - private latestAnnouncementId = "oct-28-2024" // update to some unique identifier when we add a new announcement + private latestAnnouncementId = "dec-10-2024" // update to some unique identifier when we add a new announcement constructor( readonly context: vscode.ExtensionContext, diff --git a/webview-ui/src/components/chat/Announcement.tsx b/webview-ui/src/components/chat/Announcement.tsx index 3112571b3..699a34a0f 100644 --- a/webview-ui/src/components/chat/Announcement.tsx +++ b/webview-ui/src/components/chat/Announcement.tsx @@ -32,18 +32,33 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {

🎉{" "}New in v{minorVersion}

+

Add custom tools to Cline using MCP!

+

+ The Model Context Protocol allows agents like Cline to plug and play custom tools,{" "} + + e.g. a web-search tool or GitHub tool. + +

+

+ You can add and configure MCP servers by clicking the{" "} + icon in the menu bar. +

+

+ 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{" "} + your workflow. For example: +

+ 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 ~/Documents/Cline/MCP so you can easily share them + with others too.{" "} +

- Cline now uses Anthropic's new{" "} - - "Computer Use" - {" "} - 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{" "} - see a full demo here. + See a demo of MCP in action here!

{/**/} +

Join diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx index 077309939..fc94c805c 100644 --- a/webview-ui/src/components/chat/ChatView.tsx +++ b/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.

{taskHistory.length > 0 && } diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx index 1d4a8cadc..87b0e48ba 100644 --- a/webview-ui/src/components/mcp/McpView.tsx +++ b/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) => {
-

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

+
+ The{" "} + + Model Context Protocol + {" "} + enables communication with locally running MCP servers that provide additional tools and resources + to extend Cline's capabilities. You can use{" "} + + community-made servers + {" "} + or ask Cline to create new tools specific to your workflow (e.g., "add a tool that pulls GitHub + issues") +
{/* Server List */}
diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx index 08b22c842..ef15a4ed5 100644 --- a/webview-ui/src/components/welcome/WelcomeView.tsx +++ b/webview-ui/src/components/welcome/WelcomeView.tsx @@ -31,7 +31,8 @@ const WelcomeView = () => { Claude 3.5 Sonnet's agentic coding capabilities {" "} 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.

To get started, this extension needs an API provider for Claude 3.5 Sonnet.