feat: generate server.json for extension site from google sheet (#756)

2025-01-24 15:14:08 -08:00
parent f2952d654f
commit 28c9f99a12
6 changed files with 314 additions and 332 deletions
@@ -1,4 +1,4 @@
-import { Star, Download, Terminal, ChevronRight } from "lucide-react";
+import { Star, Download, Terminal, ChevronRight, Info } from "lucide-react";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { Card, CardContent, CardHeader } from "./ui/card";
@@ -8,6 +8,15 @@ import { useState } from "react";
 import { motion, AnimatePresence } from "motion/react";

 function getGooseInstallLink(server: MCPServer): string {
+  if (server.is_builtin) {
+    const queryParams = [
+      'cmd=goosed',
+      'arg=mcp',
+      `arg=${encodeURIComponent(server.id)}`,
+      `description=${encodeURIComponent(server.id)}`
+    ].join('&');
+    return `goose://extension?${queryParams}`;
+  }
  const parts = server.command.split(" ");
  const baseCmd = parts[0]; // npx or uvx
  const args = parts.slice(1); // remaining arguments
@@ -74,35 +83,47 @@ export function ServerCard({ server }: { server: MCPServer }) {
            </div>

            <div className="py-4">
-              <button
-                onClick={() => setIsCommandVisible(!isCommandVisible)}
-                className="flex items-center gap-2 w-full hover:text-accent dark:text-gray-300 
-                dark:hover:text-accent/90 transition-colors"
-              >
-                <Terminal className="h-4 w-4" />
-                <h4 className="font-medium">Command</h4>
-                <ChevronRight
-                  className={`h-4 w-4 ml-auto transition-transform ${
-                    isCommandVisible ? "rotate-90" : ""
-                  }`}
-                />
-              </button>
-              <AnimatePresence>
-                {isCommandVisible && (
-                  <motion.code
-                    className="block bg-gray-100 dark:bg-gray-900 p-2 mt-2 rounded text-sm dark:text-gray-300 z-[-1]"
-                    initial={{ opacity: 0, translateY: -20 }}
-                    animate={{ opacity: 1, translateY: 0 }}
-                    exit={{
-                      opacity: 0,
-                      translateY: -20,
-                      transition: { duration: 0.1 },
-                    }}
+            {server.is_builtin ? (
+                <div className="flex items-center gap-2 text-sm dark:text-gray-300">
+                  {/* <Terminal className="h-4 w-4" /> */}
+                  <Info className="h-4 w-4" />
+                  Can be enabled in the goose settings page
+                </div>
+              ) : (
+                <>
+                  <button
+                    onClick={() => setIsCommandVisible(!isCommandVisible)}
+                    className="flex items-center gap-2 w-full hover:text-accent dark:text-gray-300
+                    dark:hover:text-accent/90 transition-colors"
                  >
-                    goose session --with-extension "{server.command}"
-                  </motion.code>
-                )}
-              </AnimatePresence>
+                    <Terminal className="h-4 w-4" />
+                    <h4 className="font-medium">Command</h4>
+                    <ChevronRight
+                      className={`h-4 w-4 ml-auto transition-transform ${
+                        isCommandVisible ? "rotate-90" : ""
+                      }`}
+                    />
+                  </button>
+                  <AnimatePresence>
+                    {isCommandVisible && (
+                      <motion.div
+                        className="block bg-gray-100 dark:bg-gray-900 p-2 mt-2 rounded text-sm dark:text-gray-300 z-[-1]"
+                        initial={{ opacity: 0, translateY: -20 }}
+                        animate={{ opacity: 1, translateY: 0 }}
+                        exit={{
+                          opacity: 0,
+                          translateY: -20,
+                          transition: { duration: 0.1 },
+                        }}
+                      >
+                        <code>
+                          {`goose session --with-extension "${server.command}"`}
+                        </code>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </>
+              )}
            </div>
          </div>

@@ -111,22 +132,36 @@ export function ServerCard({ server }: { server: MCPServer }) {
              <Star className="h-4 w-4" />
              <span className="ml-1">{server.githubStars} on Github</span>
            </div>
-            <a
-              href={getGooseInstallLink(server)}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="no-underline"
-            >
-              <Button
-                size="icon"
-                variant="link"
-                className="group/download flex items-center justify-center text-xs leading-[14px] text-textSubtle px-0 transition-all"
-                title="Install with Goose"
+            {server.is_builtin ? (
+              <div
+                className="inline-block"
+                title="This extension is built into goose and can be enabled in the settings page"
              >
-                <span>Install</span>
-                <Download className="h-4 w-4 ml-2 group-hover/download:text-[#FA5204]" />
-              </Button>
-            </a>
+                <Badge
+                  variant="secondary"
+                  className="ml-2 text-xs cursor-help"
+                >
+                  Built-in
+                </Badge>
+              </div>
+            ) : (
+              <a
+                href={getGooseInstallLink(server)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="no-underline"
+              >
+                <Button
+                  size="icon"
+                  variant="link"
+                  className="group/download flex items-center justify-center text-xs leading-[14px] text-textSubtle px-0 transition-all"
+                  title="Install with Goose"
+                >
+                  <span>Install</span>
+                  <Download className="h-4 w-4 ml-2 group-hover/download:text-[#FA5204]" />
+                </Button>
+              </a>
+            )}
          </div>
        </CardContent>
      </Card>
@@ -1,15 +1,15 @@
 import type { MCPServer } from '../types/server';

 export async function fetchMCPServers(): Promise<MCPServer[]> {
-  const baseUrl = import.meta.env.VITE_BASENAME || "";
  try {
-    // Fetch all servers from the unified JSON file
-    const response = await fetch(`${baseUrl}servers.json`);
+    // Use absolute path from root
+    const url = '/servers.json';
+    const response = await fetch(url);
    if (!response.ok) {
-      throw new Error('Failed to fetch servers');
-    }
-    
-    const servers = await response.json();
+      throw new Error(`Failed to fetch servers: ${response.status} ${response.statusText}`);
+    }    
+    const text = await response.text();
+    const servers = JSON.parse(text);
    return servers.sort((a, b) => b.githubStars - a.githubStars);
  } catch (error) {
    console.error('Error fetching servers:', error);
@@ -17,6 +17,7 @@ export async function fetchMCPServers(): Promise<MCPServer[]> {
  }
 }

+
 export async function searchMCPServers(query: string): Promise<MCPServer[]> {
  const allServers = await fetchMCPServers();
  const searchTerms = query.toLowerCase().split(' ').filter(term => term.length > 0);
@@ -3,19 +3,24 @@ import {
  Download,
  Star,
  Terminal,
-  ChevronRight,
  ArrowLeft,
+  Info
 } from "lucide-react";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent, CardHeader } from "../components/ui/card";
 import { useEffect, useState } from "react";
+import { fetchMCPServers } from "../mcp-servers";

 interface Server {
  id: string;
  name: string;
  description: string;
  command: string;
+  link: string;
+  installation_notes: string;
+  is_builtin: boolean;
+  endorsed: boolean;
  githubStars: number;
  environmentVariables: {
    name: string;
@@ -46,18 +51,31 @@ export default function DetailPage() {
  const { id } = useParams();
  const [server, setServer] = useState<Server | null>(null);
  const [isCommandVisible, setIsCommandVisible] = useState(true);
-  const serverUrl = "https://block.github.io/goose/v1/extensions/servers.json";
-
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
-    fetch(serverUrl)
-      .then((res) => res.json())
-      .then((servers) => {
-        const matchingServer = servers.find((s: Server) => s.id === id);
-        if (matchingServer) {
-          setServer(matchingServer);
+    const loadServer = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const servers = await fetchMCPServers();
+        const foundServer = servers.find((s) => s.id === id);
+        if (!foundServer) {
+          setError(`Server with ID "${id}" not found`);
+          return;
        }
-      });
+        setServer(foundServer);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Unknown error";
+        setError(`Failed to load server: ${errorMessage}`);
+        console.error("Error loading server:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadServer();
  }, [id]);

  if (!server) {
@@ -134,22 +152,33 @@ export default function DetailPage() {
              <p className="text-xl text-textSubtle">{server.description}</p>
              {/* <Button className="mt-4">Download Goose for desktop</Button> */}
            </div>
-
-            <div className="space-y-2">
-              <div className="flex items-center gap-2 text-textStandard">
-                <Terminal className="h-4 w-4" />
-                <h4 className="font-medium">Command</h4>
-              </div>
-              <code className="block bg-gray-100 dark:bg-gray-900 p-2 rounded text-sm dark:text-gray-300">
-                goose session --with-extension "{server.command}"
-              </code>
+            <div>
+              <p className="text-md text-textSubtle">{server.installation_notes}</p>
            </div>

-            {server.environmentVariables.length > 0 && (
-              <div className="space-y-4">
-                <h2 className="text-lg font-medium dark:text-gray-300">
-                  Environment Variables
-                </h2>
+            <div className="space-y-2">
+              {server.is_builtin ? (
+                <div className="flex items-center gap-2 text-sm dark:text-gray-300">
+                  <Info className="h-4 w-4" />
+                  Can be enabled in the goose settings page
+                </div>
+              ) : (
+                <>
+                  <div className="flex items-center gap-2 text-textStandard">
+                    <Terminal className="h-4 w-4" />
+                    <h4 className="font-medium">Command</h4>
+                  </div>
+                  <code className="block bg-gray-100 dark:bg-gray-900 p-2 rounded text-sm dark:text-gray-300">
+                    {`goose session --with-extension "${server.command}"`}
+                  </code>
+                </>
+              )}
+            </div>
+            <div className="space-y-4">
+              <h2 className="text-lg font-medium dark:text-gray-300">
+                Environment Variables
+              </h2>
+              {server.environmentVariables.length > 0 ? (
                <div className="">
                  {server.environmentVariables.map((env) => (
                    <div
@@ -170,8 +199,13 @@ export default function DetailPage() {
                    </div>
                  ))}
                </div>
-              </div>
-            )}
+              ) : (
+                <div className="text-gray-600 dark:text-gray-400 text-sm flex items-center gap-2">
+                  <Info className="h-4 w-4" />
+                  No environment variables needed
+                </div>
+              )}
+            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
@@ -185,15 +219,29 @@ export default function DetailPage() {
                rel="noopener noreferrer"
                className="no-underline"
              >
-                <Button
-                  size="icon"
-                  variant="link"
-                  className="group/download flex items-center justify-center text-xs leading-[14px] text-textSubtle px-0 transition-all"
-                  title="Install with Goose"
-                >
-                  <span>Install</span>
-                  <Download className="h-4 w-4 ml-2 group-hover/download:text-[#FA5204]" />
-                </Button>
+                {server.is_builtin ? (
+                  <div
+                    className="inline-block"
+                    title="This extension is built into goose and can be enabled in the settings page"
+                  >
+                    <Badge
+                      variant="secondary"
+                      className="ml-2 text-xs cursor-help"
+                    >
+                      Built-in
+                    </Badge>
+                  </div>
+                ) : (
+                  <Button
+                    size="icon"
+                    variant="link"
+                    className="group/download flex items-center justify-center text-xs leading-[14px] text-textSubtle px-0 transition-all"
+                    title="Install with Goose"
+                  >
+                    <span>Install</span>
+                    <Download className="h-4 w-4 ml-2 group-hover/download:text-[#FA5204]" />
+                  </Button>
+                )}
              </a>
            </div>
          </CardContent>
@@ -89,19 +89,26 @@ export default function HomePage() {
        ) : (
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {/* <AnimatePresence> */}
-            {servers.map((server, index) => (
-              <motion.div
-                key={server.id}
-                initial={{
-                  opacity: 0,
-                }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.6 }}
-              >
-                <ServerCard key={server.id} server={server} />
-              </motion.div>
-            ))}
+            {servers
+              .sort((a, b) => {
+                // Sort built-in servers first
+                if (a.is_builtin && !b.is_builtin) return -1;
+                if (!a.is_builtin && b.is_builtin) return 1;
+                return 0;
+              })
+              .map((server, index) => (
+                <motion.div
+                  key={server.id}
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.6 }}
+                >
+                  <ServerCard key={server.id} server={server} />
+                </motion.div>
+              ))}
            {/* </AnimatePresence> */}
          </div>
        )}
@@ -2,8 +2,12 @@ export interface MCPServer {
  id: string;
  name: string;
  description: string;
-  githubStars: number;
  command: string;
+  link: string;
+  installation_notes: string;
+  is_builtin: boolean;
+  endorsed: boolean
+  githubStars: number;
  environmentVariables: {
    name: string;
    description: string;