import { ServerCard } from "@site/src/components/server-card"; import { useState, useEffect } from "react"; import type { MCPServer } from "@site/src/types/server"; import { fetchMCPServers, searchMCPServers } from "@site/src/utils/mcp-servers"; import { motion } from "framer-motion"; import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; import { Wand2 } from "lucide-react"; export default function HomePage() { const [servers, setServers] = useState([]); const [searchQuery, setSearchQuery] = useState(""); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); // Combined effect for initial load and search useEffect(() => { const loadServers = async () => { try { setIsLoading(true); setError(null); const trimmedQuery = searchQuery.trim(); const results = trimmedQuery ? await searchMCPServers(trimmedQuery) : await fetchMCPServers(); console.log("Loaded servers:", results); setServers(results); } catch (err) { const errorMessage = err instanceof Error ? err.message : "Unknown error"; setError(`Failed to load servers: ${errorMessage}`); console.error("Error loading servers:", err); } finally { setIsLoading(false); } }; // Debounce all server loads const timeoutId = setTimeout(loadServers, 300); return () => clearTimeout(timeoutId); }, [searchQuery]); return (

Browse Extensions

Your central directory for discovering and installing extensions.

setSearchQuery(e.target.value)} />

{error && (

{error}

)}

{searchQuery ? `${servers.length} result${ servers.length > 1 ? "s" : "" } for "${searchQuery}"` : ""}

{isLoading ? (

Loading servers...

) : servers.length === 0 ? (

{searchQuery ? "No servers found matching your search." : "No servers available."}

) : (

{/* Built-in Extensions */} {servers.filter(server => server.is_builtin).length > 0 && (

Built-in Extensions

{servers .filter(server => server.is_builtin) .sort((a, b) => a.name.localeCompare(b.name)) .map((server) => ( ))}

)} {/* Community Extensions */} {servers.filter(server => !server.is_builtin).length > 0 && (

Community Extensions

{servers .filter(server => !server.is_builtin) .sort((a, b) => a.name.localeCompare(b.name)) .map((server) => ( ))}

)}

); }