fix: Enhance MCP marketplace to support custom MCPs installation (#192)

Author: Mage1507

.changeset/serious-bobcats-wash.md

@@ -0,0 +1,5 @@
+---
+"hai-build-code-generator": patch
+---
+
+Added support for installing custom MCPs via user-provided details.

src/core/controller/index.ts

@@ -953,13 +953,36 @@ export class Controller {
 				throw new Error("Invalid response from MCP marketplace API")
 			}
 
+			// Create an array to hold all local MCPs with their star counts
+			const localMcpItems = []
+
+			// Get all local MCPs from registry
+			const localMcpIds = Object.keys(getAllLocalMcps())
+
+			// Fetch GitHub stars for each local MCP
+			for (const mcpId of localMcpIds) {
+				const mcp = getLocalMcp(mcpId)
+				if (mcp) {
+					// Update star count for this MCP and add isLocal flag
+					const gitHubStars = await getStarCount(mcp.githubUrl)
+					localMcpItems.push({
+						...mcp,
+						githubStars: gitHubStars || 0,
+						isLocal: true, // Add isLocal flag to identify local MCPs
+					})
+				}
+			}
 			const catalog: McpMarketplaceCatalog = {
-				items: (response.data || []).map((item: any) => ({
-					...item,
-					githubStars: item.githubStars ?? 0,
-					downloadCount: item.downloadCount ?? 0,
-					tags: item.tags ?? [],
-				})),
+				items: [
+					...localMcpItems,
+					...(response.data || []).map((item: any) => ({
+						...item,
+						githubStars: item.githubStars ?? 0,
+						downloadCount: item.downloadCount ?? 0,
+						tags: item.tags ?? [],
+						isLocal: false, // Mark remote MCPs explicitly
+					})),
+				],
 			}
 
 			// Store in global state

webview-ui/src/components/mcp/configuration/tabs/marketplace/McpMarketplaceCard.tsx

@@ -172,28 +172,34 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 									</span>
 								</div>
 							</a>
-							<div
-								style={{
-									display: "flex",
-									alignItems: "center",
-									gap: "4px",
-									minWidth: 0,
-									flexShrink: 0,
-								}}>
-								<span className="codicon codicon-star-full" />
-								<span style={{ wordBreak: "break-all" }}>{item.githubStars?.toLocaleString() ?? 0}</span>
-							</div>
-							<div
-								style={{
-									display: "flex",
-									alignItems: "center",
-									gap: "4px",
-									minWidth: 0,
-									flexShrink: 0,
-								}}>
-								<span className="codicon codicon-cloud-download" />
-								<span style={{ wordBreak: "break-all" }}>{item.downloadCount?.toLocaleString() ?? 0}</span>
-							</div>
+							{!item.isLocal && (
+								<>
+									<div
+										style={{
+											display: "flex",
+											alignItems: "center",
+											gap: "4px",
+											minWidth: 0,
+											flexShrink: 0,
+										}}>
+										<span className="codicon codicon-star-full" />
+										<span style={{ wordBreak: "break-all" }}>{item.githubStars?.toLocaleString() ?? 0}</span>
+									</div>
+									<div
+										style={{
+											display: "flex",
+											alignItems: "center",
+											gap: "4px",
+											minWidth: 0,
+											flexShrink: 0,
+										}}>
+										<span className="codicon codicon-cloud-download" />
+										<span style={{ wordBreak: "break-all" }}>
+											{item.downloadCount?.toLocaleString() ?? 0}
+										</span>
+									</div>
+								</>
+							)}
 							{item.requiresApiKey && (
 								<span className="codicon codicon-key" title="Requires API key" style={{ flexShrink: 0 }} />
 							)}

webview-ui/src/components/mcp/configuration/tabs/marketplace/McpMarketplaceView.tsx

@@ -29,30 +29,42 @@ const McpMarketplaceView = () => {
 	}, [items])
 
 	const filteredItems = useMemo(() => {
-		return items
-			.filter((item) => {
-				const matchesSearch =
-					searchQuery === "" ||
-					item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-					item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
-					item.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))
-				const matchesCategory = !selectedCategory || item.category === selectedCategory
-				return matchesSearch && matchesCategory
-			})
-			.sort((a, b) => {
-				switch (sortBy) {
-					case "downloadCount":
-						return b.downloadCount - a.downloadCount
-					case "stars":
-						return b.githubStars - a.githubStars
-					case "name":
-						return a.name.localeCompare(b.name)
-					case "newest":
-						return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-					default:
-						return 0
-				}
-			})
+		// First, apply filtering
+		const filtered = items.filter((item) => {
+			const matchesSearch =
+				searchQuery === "" ||
+				item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+				item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+				item.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))
+			const matchesCategory = !selectedCategory || item.category === selectedCategory
+			return matchesSearch && matchesCategory
+		})
+
+		// Split into local and remote MCPs
+		const localMcps = filtered.filter((item) => item.isLocal)
+		const remoteMcps = filtered.filter((item) => !item.isLocal)
+
+		// Sort each group separately
+		const sortFn = (a: McpMarketplaceItem, b: McpMarketplaceItem) => {
+			switch (sortBy) {
+				case "downloadCount":
+					return b.downloadCount - a.downloadCount
+				case "stars":
+					return b.githubStars - a.githubStars
+				case "name":
+					return a.name.localeCompare(b.name)
+				case "newest":
+					return new Date(b.createdAt || "").getTime() - new Date(a.createdAt || "").getTime()
+				default:
+					return 0
+			}
+		}
+
+		const sortedLocalMcps = [...localMcps].sort(sortFn)
+		const sortedRemoteMcps = [...remoteMcps].sort(sortFn)
+
+		// Combine with local MCPs first
+		return [...sortedLocalMcps, ...sortedRemoteMcps]
 	}, [items, searchQuery, selectedCategory, sortBy])
 
 	useEffect(() => {