import Layout from "@theme/Layout"; import { Download, Terminal, Star, ArrowLeft, Info, BookOpen } from "lucide-react"; import { Button } from "@site/src/components/ui/button"; import { Badge } from "@site/src/components/ui/badge"; import { getGooseInstallLink } from "@site/src/utils/install-links"; import { useLocation } from "@docusaurus/router"; import { useEffect, useState } from "react"; import type { MCPServer } from "@site/src/types/server"; import { fetchMCPServers } from "@site/src/utils/mcp-servers"; import { fetchGitHubStars, formatStarCount } from "@site/src/utils/github-stars"; import Link from "@docusaurus/Link"; function ExtensionDetail({ server }: { server: MCPServer }) { const [githubStars, setGithubStars] = useState(null); // outliers in naming const overrides: Record = { 'computercontroller': 'computer-controller-mcp', 'pdf-read': 'pdf-mcp', 'knowledge-graph-memory': 'knowledge-graph-mcp', 'vscode': 'vs-code-mcp', }; const getDocumentationPath = (serverId: string): string => { let filename = serverId.replace(/_/g, '-'); filename = overrides[filename] ?? filename; if (!filename.endsWith('-mcp')) { filename += '-mcp'; } return filename; }; useEffect(() => { if (server.link) { fetchGitHubStars(server.link).then(stars => { setGithubStars(stars); }); } }, [server.link]); return (

{server.name}

{server.is_builtin && ( Built-in )}

{server.description}

{server.installation_notes && (

{server.installation_notes}

)}

{server.is_builtin ? (

Can be enabled on the Extensions page in goose

) : server.show_install_command !== false ? ( <>

Command

{(server.type === "local" || !server.type) ? (


                              {`goose session --with-extension "${server.command}"`}

) : server.type === "remote" ? (


                              {`goose session --with-remote-extension "${server.url}"`}

) : server.type === "streamable-http" ? (


                              {`goose session --with-streamable-http-extension "${server.url}"`}

) : (


                              No command available

)}

) : null}

{server.environmentVariables && (

Environment Variables

{server.environmentVariables.length > 0 ? (

{server.environmentVariables.map((env) => (

{env.name}

{env.description}

{env.required && ( Required )}

))}

) : (

No environment variables needed

)}

)} {server.headers && server.headers.length > 0 && (

Request Headers

{server.headers.map((header) => (

{header.name}

{header.description}

{header.required && ( Required )}

))}

)}

{githubStars !== null && ( {formatStarCount(githubStars)} on GitHub )} {server.is_builtin ? (

Built-in

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

); } export default function DetailPage(): JSX.Element { const location = useLocation(); const [server, setServer] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const loadServer = async () => { try { setLoading(true); setError(null); const servers = await fetchMCPServers(); // Get the ID from the query parameter const params = new URLSearchParams(location.search); const id = params.get("id"); if (!id) { setError("No extension ID provided"); return; } const foundServer = servers.find((s) => s.id === id); if (foundServer) { setServer(foundServer); } else { setError("Extension not found"); } } catch (err) { setError("Failed to load extension details"); console.error(err); } finally { setLoading(false); } }; loadServer(); }, [location]); if (loading) { return (

); } if (error || !server) { return (

{error || "Extension not found"}

); } return ; }