add button to browse mcp servers in welcome view (microsoft#254863)

Author: sandy081

src/vs/workbench/contrib/mcp/browser/mcpServersView.ts

@@ -41,6 +41,8 @@ import { VIEW_CONTAINER } from '../../extensions/browser/extensions.contribution
 import { renderMarkdown } from '../../../../base/browser/markdownRenderer.js';
 import { MarkdownString } from '../../../../base/common/htmlContent.js';
 import { ChatContextKeys } from '../../chat/common/chatContextKeys.js';
+import { Button } from '../../../../base/browser/ui/button/button.js';
+import { defaultButtonStyles } from '../../../../platform/theme/browser/defaultStyles.js';
 
 export interface McpServerListViewOptions {
 	showWelcomeOnEmpty?: boolean;
@@ -207,9 +209,8 @@ export class McpServersListView extends ViewPane {
 		title.textContent = localize('mcp.welcome.title', "MCP Servers");
 
 		const description = dom.append(welcomeContent, dom.$('.mcp-welcome-description'));
-		const browseUrl = this.productService.quality === 'insider' ? 'https://code.visualstudio.com/insider/mcp' : 'https://code.visualstudio.com/mcp';
 		const markdownResult = this._register(renderMarkdown(new MarkdownString(
-			localize('mcp.welcome.descriptionWithLink', "Extend agent mode by installing [MCP servers]({0}) to bring extra tools for connecting to databases, invoking APIs and performing specialized tasks.", browseUrl),
+			localize('mcp.welcome.descriptionWithLink', "Extend agent mode by installing MCP servers to bring extra tools for connecting to databases, invoking APIs and performing specialized tasks."),
 			{ isTrusted: true }
 		), {
 			actionHandler: {
@@ -220,6 +221,16 @@ export class McpServersListView extends ViewPane {
 			}
 		}));
 		description.appendChild(markdownResult.element);
+
+		// Browse button
+		const buttonContainer = dom.append(welcomeContent, dom.$('.mcp-welcome-button-container'));
+		const button = this._register(new Button(buttonContainer, {
+			title: localize('mcp.welcome.browseButton', "Browse MCP Servers"),
+			...defaultButtonStyles
+		}));
+		button.label = localize('mcp.welcome.browseButton', "Browse MCP Servers");
+
+		this._register(button.onDidClick(() => this.openerService.open(URI.parse(this.productService.quality === 'insider' ? 'https://code.visualstudio.com/insider/mcp' : 'https://code.visualstudio.com/mcp'))));
 	}
 
 	private async query(query: string): Promise<IQueryResult> {

src/vs/workbench/contrib/mcp/browser/media/mcpServersView.css

@@ -36,12 +36,18 @@
 		.mcp-welcome-description {
 			max-width: 350px;
 			padding: 0 20px;
-			margin-top: 26px;
+			margin-top: 16px;
 
 			a {
 				color: var(--vscode-textLink-foreground);
 			}
 		}
 
+		.mcp-welcome-button-container {
+			margin-top: 16px;
+			max-width: 320px;
+			width: 100%;
+		}
+
 	}
 }