diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts index b19295cdd6..5ccdea2a95 100644 --- a/src/core/webview/ClineProvider.ts +++ b/src/core/webview/ClineProvider.ts @@ -406,7 +406,15 @@ export class ClineProvider implements vscode.WebviewViewProvider { // (see normalizeApiConfiguration > openrouter) // Prefetch marketplace and OpenRouter models - this.prefetchMcpMarketplace() + this.getGlobalState("mcpMarketplaceCatalog").then((mcpMarketplaceCatalog) => { + if (mcpMarketplaceCatalog) { + this.postMessageToWebview({ + type: "mcpMarketplaceCatalog", + mcpMarketplaceCatalog: mcpMarketplaceCatalog as McpMarketplaceCatalog, + }) + } + }) + this.silentlyRefreshMcpMarketplace() this.refreshOpenRouterModels().then(async (openRouterModels) => { if (openRouterModels) { // update model info in state (this needs to be done here since we don't want to update state while settings is open, and we may refresh models there) @@ -1114,14 +1122,6 @@ export class ClineProvider implements vscode.WebviewViewProvider { } } - async prefetchMcpMarketplace() { - try { - await this.fetchMcpMarketplaceFromApi(true) - } catch (error) { - console.error("Failed to prefetch MCP marketplace:", error) - } - } - async silentlyRefreshMcpMarketplace() { try { const catalog = await this.fetchMcpMarketplaceFromApi(true) diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx index c5e13d39ec..f77019fc3f 100644 --- a/webview-ui/src/components/chat/ChatRow.tsx +++ b/webview-ui/src/components/chat/ChatRow.tsx @@ -13,7 +13,7 @@ import { } from "../../../../src/shared/ExtensionMessage" import { COMMAND_OUTPUT_STRING, COMMAND_REQ_APP_STRING } from "../../../../src/shared/combineCommandSequences" import { useExtensionState } from "../../context/ExtensionStateContext" -import { findMatchingResourceOrTemplate } from "../../utils/mcp" +import { findMatchingResourceOrTemplate, getMcpServerDisplayName } from "../../utils/mcp" import { vscode } from "../../utils/vscode" import { CheckpointControls, CheckpointOverlay } from "../common/CheckpointControls" import CodeAccordian, { cleanPathPrefix } from "../common/CodeAccordian" @@ -100,7 +100,7 @@ const ChatRow = memo( export default ChatRow export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessage, isLast }: ChatRowContentProps) => { - const { mcpServers } = useExtensionState() + const { mcpServers, mcpMarketplaceCatalog } = useExtensionState() const [seeNewChangesDisabled, setSeeNewChangesDisabled] = useState(false) @@ -203,7 +203,10 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi ), Cline wants to {mcpServerUse.type === "use_mcp_tool" ? "use a tool" : "access a resource"} on the{" "} - {mcpServerUse.serverName} MCP server: + + {getMcpServerDisplayName(mcpServerUse.serverName, mcpMarketplaceCatalog)} + {" "} + MCP server: , ] case "completion_result": diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx index 6cc31f2956..7f5d3b0809 100644 --- a/webview-ui/src/components/mcp/McpView.tsx +++ b/webview-ui/src/components/mcp/McpView.tsx @@ -7,6 +7,7 @@ import McpToolRow from "./McpToolRow" import McpResourceRow from "./McpResourceRow" import McpMarketplaceView from "./marketplace/McpMarketplaceView" import styled from "styled-components" +import { getMcpServerDisplayName } from "../../utils/mcp" type McpViewProps = { onDone: () => void @@ -238,6 +239,8 @@ const TabButton = ({ children, isActive, onClick }: { children: React.ReactNode; // Server Row Component const ServerRow = ({ server }: { server: McpServer }) => { + const { mcpMarketplaceCatalog } = useExtensionState() + const [isExpanded, setIsExpanded] = useState(false) const getStatusColor = () => { @@ -290,7 +293,7 @@ const ServerRow = ({ server }: { server: McpServer }) => { alignItems: "center", marginRight: "4px", }}> - {server.name} + {getMcpServerDisplayName(server.name, mcpMarketplaceCatalog)}
e.stopPropagation()}>
openAiModels: string[] mcpServers: McpServer[] + mcpMarketplaceCatalog: McpMarketplaceCatalog filePaths: string[] setApiConfiguration: (config: ApiConfiguration) => void setCustomInstructions: (value?: string) => void @@ -49,7 +50,7 @@ export const ExtensionStateContextProvider: React.FC<{ const [openAiModels, setOpenAiModels] = useState([]) const [mcpServers, setMcpServers] = useState([]) - + const [mcpMarketplaceCatalog, setMcpMarketplaceCatalog] = useState({ items: [] }) const handleMessage = useCallback((event: MessageEvent) => { const message: ExtensionMessage = event.data switch (message.type) { @@ -121,6 +122,12 @@ export const ExtensionStateContextProvider: React.FC<{ setMcpServers(message.mcpServers ?? []) break } + case "mcpMarketplaceCatalog": { + if (message.mcpMarketplaceCatalog) { + setMcpMarketplaceCatalog(message.mcpMarketplaceCatalog) + } + break + } } }, []) @@ -138,6 +145,7 @@ export const ExtensionStateContextProvider: React.FC<{ openRouterModels, openAiModels, mcpServers, + mcpMarketplaceCatalog, filePaths, setApiConfiguration: (value) => setState((prevState) => ({