From 1127e2a33c2fa04c52fdb512020bed0d047cdcfb Mon Sep 17 00:00:00 2001 From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com> Date: Mon, 24 Feb 2025 11:07:23 -0800 Subject: [PATCH] Add Claude 3.7 Sonnet --- src/api/providers/anthropic.ts | 2 + src/api/providers/openrouter.ts | 4 ++ src/core/webview/ClineProvider.ts | 2 + src/shared/api.ts | 37 +++++++++++++++++-- webview-ui/src/components/chat/ChatView.tsx | 15 +++----- .../src/components/settings/ApiOptions.tsx | 2 +- .../settings/OpenRouterModelPicker.tsx | 4 +- .../src/components/welcome/WelcomeView.tsx | 19 ++++------ 8 files changed, 57 insertions(+), 28 deletions(-) diff --git a/src/api/providers/anthropic.ts b/src/api/providers/anthropic.ts index 3aff867b7f..959916e9a8 100644 --- a/src/api/providers/anthropic.ts +++ b/src/api/providers/anthropic.ts @@ -24,6 +24,7 @@ export class AnthropicHandler implements ApiHandler { const modelId = model.id switch (modelId) { // 'latest' alias does not support cache_control + case "claude-3-7-sonnet-20250219": case "claude-3-5-sonnet-20241022": case "claude-3-5-haiku-20241022": case "claude-3-opus-20240229": @@ -88,6 +89,7 @@ export class AnthropicHandler implements ApiHandler { // https://github.com/anthropics/anthropic-sdk-typescript?tab=readme-ov-file#default-headers // https://github.com/anthropics/anthropic-sdk-typescript/commit/c920b77fc67bd839bfeb6716ceab9d7c9bbe7393 switch (modelId) { + case "claude-3-7-sonnet-20250219": case "claude-3-5-sonnet-20241022": case "claude-3-5-haiku-20241022": case "claude-3-opus-20240229": diff --git a/src/api/providers/openrouter.ts b/src/api/providers/openrouter.ts index 5f95639fdf..07db28fb81 100644 --- a/src/api/providers/openrouter.ts +++ b/src/api/providers/openrouter.ts @@ -38,6 +38,8 @@ export class OpenRouterHandler implements ApiHandler { // prompt caching: https://openrouter.ai/docs/prompt-caching // this is specifically for claude models (some models may 'support prompt caching' automatically without this) switch (model.id) { + case "anthropic/claude-3-7-sonnet": + case "anthropic/claude-3-7-sonnet:beta": case "anthropic/claude-3.5-sonnet": case "anthropic/claude-3.5-sonnet:beta": case "anthropic/claude-3.5-sonnet-20240620": @@ -89,6 +91,8 @@ export class OpenRouterHandler implements ApiHandler { // (models usually default to max tokens allowed) let maxTokens: number | undefined switch (model.id) { + case "anthropic/claude-3-7-sonnet": + case "anthropic/claude-3-7-sonnet:beta": case "anthropic/claude-3.5-sonnet": case "anthropic/claude-3.5-sonnet:beta": case "anthropic/claude-3.5-sonnet-20240620": diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts index 65d5996bf9..87a2f83fbf 100644 --- a/src/core/webview/ClineProvider.ts +++ b/src/core/webview/ClineProvider.ts @@ -1407,6 +1407,8 @@ Here is the project's README to help you get started:\n\n${mcpDetails.readmeCont } switch (rawModel.id) { + case "anthropic/claude-3-7-sonnet": + case "anthropic/claude-3-7-sonnet:beta": case "anthropic/claude-3.5-sonnet": case "anthropic/claude-3.5-sonnet:beta": // NOTE: this needs to be synced with api.ts/openrouter default model info diff --git a/src/shared/api.ts b/src/shared/api.ts index 444242433d..a5a96d4a7f 100644 --- a/src/shared/api.ts +++ b/src/shared/api.ts @@ -80,8 +80,19 @@ export interface ModelInfo { // Anthropic // https://docs.anthropic.com/en/docs/about-claude/models // prices updated 2025-01-02 export type AnthropicModelId = keyof typeof anthropicModels -export const anthropicDefaultModelId: AnthropicModelId = "claude-3-5-sonnet-20241022" +export const anthropicDefaultModelId: AnthropicModelId = "claude-3-7-sonnet-20250219" export const anthropicModels = { + "claude-3-7-sonnet-20250219": { + maxTokens: 8192, + contextWindow: 200_000, + supportsImages: true, + supportsComputerUse: true, + supportsPromptCache: true, + inputPrice: 3.0, + outputPrice: 15.0, + cacheWritesPrice: 3.75, + cacheReadsPrice: 0.3, + }, "claude-3-5-sonnet-20241022": { maxTokens: 8192, contextWindow: 200_000, @@ -130,6 +141,17 @@ export const anthropicModels = { export type BedrockModelId = keyof typeof bedrockModels export const bedrockDefaultModelId: BedrockModelId = "anthropic.claude-3-5-sonnet-20241022-v2:0" export const bedrockModels = { + "anthropic.claude-3-7-sonnet-20250219-v1:0": { + maxTokens: 8192, + contextWindow: 200_000, + supportsImages: true, + supportsComputerUse: true, + supportsPromptCache: true, + inputPrice: 3.0, + outputPrice: 15.0, + cacheWritesPrice: 3.75, + cacheReadsPrice: 0.3, + }, "anthropic.claude-3-5-sonnet-20241022-v2:0": { maxTokens: 8192, contextWindow: 200_000, @@ -183,7 +205,7 @@ export const bedrockModels = { // OpenRouter // https://openrouter.ai/models?order=newest&supported_parameters=tools -export const openRouterDefaultModelId = "anthropic/claude-3.5-sonnet" // will always exist in openRouterModels +export const openRouterDefaultModelId = "anthropic/claude-3-7-sonnet" // will always exist in openRouterModels export const openRouterDefaultModelInfo: ModelInfo = { maxTokens: 8192, contextWindow: 200_000, @@ -195,7 +217,7 @@ export const openRouterDefaultModelInfo: ModelInfo = { cacheWritesPrice: 3.75, cacheReadsPrice: 0.3, description: - "The new Claude 3.5 Sonnet delivers better-than-Opus capabilities, faster-than-Sonnet speeds, at the same Sonnet prices. Sonnet is particularly good at:\n\n- Coding: New Sonnet scores ~49% on SWE-Bench Verified, higher than the last best score, and without any fancy prompt scaffolding\n- Data science: Augments human data science expertise; navigates unstructured data while using multiple tools for insights\n- Visual processing: excelling at interpreting charts, graphs, and images, accurately transcribing text to derive insights beyond just the text alone\n- Agentic tasks: exceptional tool use, making it great at agentic tasks (i.e. complex, multi-step problem solving tasks that require engaging with other systems)\n\n#multimodal", + "Claude 3.7 Sonnet is an advanced large language model with improved reasoning, coding, and problem-solving capabilities. It introduces a hybrid reasoning approach, allowing users to choose between rapid responses and extended, step-by-step processing for complex tasks. The model demonstrates notable improvements in coding, particularly in front-end development and full-stack updates, and excels in agentic workflows, where it can autonomously navigate multi-step processes. \n\nClaude 3.7 Sonnet maintains performance parity with its predecessor in standard mode while offering an extended reasoning mode for enhanced accuracy in math, coding, and instruction-following tasks.\n\nRead more at the [blog post here](https://www.anthropic.com/news/claude-3-7-sonnet)", } // Vertex AI @@ -203,6 +225,15 @@ export const openRouterDefaultModelInfo: ModelInfo = { export type VertexModelId = keyof typeof vertexModels export const vertexDefaultModelId: VertexModelId = "claude-3-5-sonnet-v2@20241022" export const vertexModels = { + "claude-3-7-sonnet@20250219": { + maxTokens: 8192, + contextWindow: 200_000, + supportsImages: true, + supportsComputerUse: true, + supportsPromptCache: false, + inputPrice: 3.0, + outputPrice: 15.0, + }, "claude-3-5-sonnet-v2@20241022": { maxTokens: 8192, contextWindow: 200_000, diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx index 8b4290cd2a..a78ca0c2fa 100644 --- a/webview-ui/src/components/chat/ChatView.tsx +++ b/webview-ui/src/components/chat/ChatView.tsx @@ -793,16 +793,11 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie

What can I do for you?

- Thanks to{" "} - - Claude 3.5 Sonnet's agentic coding capabilities, - {" "} - 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. I can even use - MCP to create new tools and extend my own capabilities. + Thanks to Claude 3.7 Sonnet's agentic coding capabilities, 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. I can even use MCP to create new tools and extend my own + capabilities.

{taskHistory.length > 0 && } diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx index 4f54cc0978..3d6037e275 100644 --- a/webview-ui/src/components/settings/ApiOptions.tsx +++ b/webview-ui/src/components/settings/ApiOptions.tsx @@ -938,7 +938,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is }}> The VS Code Language Model API allows you to run models provided by other VS Code extensions (including but not limited to GitHub Copilot). The easiest way to get started is to install the - Copilot extension from the VS Marketplace and enabling Claude 3.5 Sonnet. + Copilot extension from the VS Marketplace and enabling Claude 3.7 Sonnet.

)} diff --git a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx index 889a636ccb..685e420f07 100644 --- a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx +++ b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx @@ -228,8 +228,8 @@ const OpenRouterModelPicker: React.FC = ({ isPopup } If you're unsure which model to choose, Cline works best with{" "} handleModelChange("anthropic/claude-3.5-sonnet")}> - anthropic/claude-3.5-sonnet. + onClick={() => handleModelChange("anthropic/claude-3-7-sonnet")}> + anthropic/claude-3-7-sonnet. You can also try searching "free" for no-cost options currently available. diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx index 330870f56a..a51ce44dc6 100644 --- a/webview-ui/src/components/welcome/WelcomeView.tsx +++ b/webview-ui/src/components/welcome/WelcomeView.tsx @@ -1,11 +1,11 @@ -import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react" -import { useEffect, useState, useCallback } from "react" +import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react" +import { useCallback, useEffect, useState } from "react" +import { useEvent } from "react-use" +import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage" import { useExtensionState } from "../../context/ExtensionStateContext" import { validateApiConfiguration } from "../../utils/validate" import { vscode } from "../../utils/vscode" import ApiOptions from "../settings/ApiOptions" -import { useEvent } from "react-use" -import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage" const WelcomeView = () => { const { apiConfiguration } = useExtensionState() @@ -58,18 +58,13 @@ const WelcomeView = () => { }}>

Hi, I'm Cline

- I can do all kinds of tasks thanks to the latest breakthroughs in{" "} - - 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 + I can do all kinds of tasks thanks to breakthroughs in Claude 3.7 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). 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. + To get started, this extension needs an API provider for Claude 3.7 Sonnet.