diff --git a/documentation/docs/mcp/cloudinary-asset-management-mcp.md b/documentation/docs/mcp/cloudinary-asset-management-mcp.md index 36cf53474130..f5d0f559c403 100644 --- a/documentation/docs/mcp/cloudinary-asset-management-mcp.md +++ b/documentation/docs/mcp/cloudinary-asset-management-mcp.md @@ -10,7 +10,7 @@ import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed'; -This tutorial covers how to add the [Cloudinary Asset Management MCP Server](https://github.com/cloudinary-community/cloudinary-mcp) as a Goose extension to automate complex image processing workflows that would typically require specialized design software or manual editing. +This tutorial covers how to add the [Cloudinary Asset Management MCP Server](https://github.com/cloudinary/asset-management-js) as a Goose extension to automate complex image processing workflows that would typically require specialized design software or manual editing. :::tip TLDR diff --git a/documentation/src/components/prompt-card.tsx b/documentation/src/components/prompt-card.tsx index 458bae8857a3..cec12f4ccd2f 100644 --- a/documentation/src/components/prompt-card.tsx +++ b/documentation/src/components/prompt-card.tsx @@ -19,7 +19,6 @@ function extensionToMCPServer(extension: Extension): MCPServer { installation_notes: extension.installation_notes || '', endorsed: false, environmentVariables: extension.environmentVariables || [], - githubStars: 0 }; } diff --git a/documentation/src/components/server-card.tsx b/documentation/src/components/server-card.tsx index b87022d4e587..684d71c0ec0b 100644 --- a/documentation/src/components/server-card.tsx +++ b/documentation/src/components/server-card.tsx @@ -1,14 +1,34 @@ import { Star, Download, Terminal, ChevronRight, Info } from "lucide-react"; -import { Badge } from "@site/src/components/ui/badge"; -import { Button } from "@site/src/components/ui/button"; import type { MCPServer } from "@site/src/types/server"; import Link from "@docusaurus/Link"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { getGooseInstallLink } from "@site/src/utils/install-links"; +import { fetchGitHubStars, formatStarCount } from "@site/src/utils/github-stars"; + +const getExtensionCommand = (server: MCPServer): string => { + switch (server.type) { + case "remote": + return `goose session --with-remote-extension "${server.url}"`; + case "streamable-http": + return `goose session --with-streamable-http-extension "${server.url}"`; + case "local": + default: + return `goose session --with-extension "${server.command}"`; + } +}; export function ServerCard({ server }: { server: MCPServer }) { const [isCommandVisible, setIsCommandVisible] = useState(false); + const [githubStars, setGithubStars] = useState(null); + + useEffect(() => { + if (server.link) { + fetchGitHubStars(server.link).then(stars => { + setGithubStars(stars); + }); + } + }, [server.link]); return (
@@ -65,42 +85,7 @@ export function ServerCard({ server }: { server: MCPServer }) {
)} - {(!server.is_builtin && server.command !== undefined && server.url === undefined) && ( - <> - - - {isCommandVisible && ( - - - {`goose session --with-extension "${server.command}"`} - - - )} - - - )} - - {(!server.is_builtin && server.command === undefined && server.url !== undefined) && ( + {!server.is_builtin && ( <>