import { Star, Download, Terminal, ChevronRight, Info } from "lucide-react"; import type { MCPServer } from "@site/src/types/server"; import Link from "@docusaurus/Link"; 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 (

{server.name}

{server.description}

{server.is_builtin && (

Can be enabled on the Extensions page in goose

)} {!server.is_builtin && (server.show_install_command !== false) && ( <> {isCommandVisible && ( {getExtensionCommand(server)} )} )}

{githubStars !== null && ( e.stopPropagation()} > {formatStarCount(githubStars)} on GitHub )}

{server.is_builtin ? (

Built-in

) : server.show_install_link !== false ? ( Install ) : null}

); }