import Layout from "@theme/Layout"; import { ArrowLeft, Terminal, Download, Code } from "lucide-react"; import Admonition from "@theme/Admonition"; import CodeBlock from "@theme/CodeBlock"; import { Button } from "@site/src/components/ui/button"; import { Badge } from "@site/src/components/ui/badge"; import { useLocation } from "@docusaurus/router"; import { useEffect, useState } from "react"; import Link from "@docusaurus/Link"; import { motion, AnimatePresence } from "framer-motion"; import type { MCPServer } from "@site/src/types/server"; import { getPromptById } from "@site/src/utils/prompts"; import ReactMarkdown from "react-markdown"; import type { Prompt, Extension } from "@site/src/types/prompt"; import { getGooseInstallLink } from "@site/src/utils/install-links"; function extensionToMCPServer(extension: Extension): MCPServer { return { id: extension.command, name: extension.name, command: extension.command, url: extension.url, description: extension.name, is_builtin: extension.is_builtin, link: extension.link || "", installation_notes: extension.installation_notes || "", endorsed: false, environmentVariables: extension.environmentVariables || [], }; } function ExtensionList({ extensions }: { extensions: Extension[] }) { const [expandedExtension, setExpandedExtension] = useState( null ); const hasExpandedExtension = expandedExtension !== null; return (

{extensions.map((extension) => ( { setExpandedExtension(expanded ? extension.name : null); }} /> ))}

); } function ExtensionDetails({ extension, isExpanded, onToggle, }: { extension: Extension; isExpanded: boolean; onToggle: (expanded: boolean) => void; }) { return (

{ if (!extension.is_builtin) { onToggle(!isExpanded); } }} title={ extension.is_builtin ? "Built-in extension - can be enabled in settings" : "Click to see installation options" } > {extension.name} {extension.is_builtin ? (

Built-in

) : ( )}

{/* Inline Expansion */} {!extension.is_builtin && isExpanded && (

e.stopPropagation()} > Install via Desktop

{extension.url ? ( goose session --with-remote-extension "{extension.url}" ) : ( goose session --with-extension "{extension.command}" )}

{extension.installation_notes && ( <>

Installation Notes

{extension.installation_notes}

)} {extension.environmentVariables && extension.environmentVariables.length > 0 && ( <>

Environment Variables

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

{env.name}

{env.description} {env.required && ( Required )}

))}

)}

); } function PromptDetail({ prompt }: { prompt: Prompt }) { return (

{prompt.title}

{prompt.description}

Results may vary depending on the model and context.

Example Prompt

{prompt.example_prompt}

{prompt.example_result && (

Example Result

{prompt.example_result}

)}

Recommended Extensions

); } export default function DetailPage(): JSX.Element { const location = useLocation(); const [prompt, setPrompt] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const loadPrompt = async () => { try { setLoading(true); setError(null); // Get the ID from the query parameter const params = new URLSearchParams(location.search); const id = params.get("id"); if (!id) { setError("No prompt ID provided"); return; } const promptData = await getPromptById(id); if (promptData) { setPrompt(promptData); } else { setError("Prompt not found"); } } catch (err) { setError("Failed to load prompt details"); console.error(err); } finally { setLoading(false); } }; loadPrompt(); }, [location]); if (loading) { return (

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

{error || "Prompt not found"}

); } return ; }

Command

{prompt.title}

Example Prompt

Example Result

Recommended Extensions