feat(frontend): add marketplace server side client (#8129)

.vscode/all-projects.code-workspace

@@ -1,12 +1,12 @@
 {
   "folders": [
     {
-      "name": "autogpt_server",
-      "path": "../autogpt_platform/autogpt_server"
+      "name": "frontend",
+      "path": "../autogpt_platform/frontend"
     },
     {
-      "name": "autogpt_builder",
-      "path": "../autogpt_platform/autogpt_builder"
+      "name": "backend",
+      "path": "../autogpt_platform/backend"
     },
     {
       "name": "market",
@@ -24,10 +24,7 @@
       "name": "docs",
       "path": "../docs"
     },
-    {
-      "name": "[root]",
-      "path": ".."
-    },
+
     {
       "name": "classic - autogpt",
       "path": "../classic/original_autogpt"
@@ -44,6 +41,10 @@
       "name": "classic - frontend",
       "path": "../classic/frontend"
     },
+    {
+      "name": "[root]",
+      "path": ".."
+    }
   ],
   "settings": {
     "python.analysis.typeCheckingMode": "basic"

autogpt_platform/frontend/src/components/admin/marketplace/actions.ts

@@ -1,5 +1,6 @@
 "use server";
 import MarketplaceAPI from "@/lib/marketplace-api";
+import ServerSideMarketplaceAPI from "@/lib/marketplace-api/server-client";
 import { revalidatePath } from "next/cache";
 import * as Sentry from "@sentry/nextjs";
 
@@ -12,7 +13,7 @@ export async function approveAgent(
     "approveAgent",
     {},
     async () => {
-      const api = new MarketplaceAPI();
+      const api = new ServerSideMarketplaceAPI();
       await api.approveAgentSubmission(agentId, version, comment);
       console.debug(`Approving agent ${agentId}`);
       revalidatePath("/marketplace");
@@ -29,7 +30,7 @@ export async function rejectAgent(
     "rejectAgent",
     {},
     async () => {
-      const api = new MarketplaceAPI();
+      const api = new ServerSideMarketplaceAPI();
       await api.rejectAgentSubmission(agentId, version, comment);
       console.debug(`Rejecting agent ${agentId}`);
       revalidatePath("/marketplace");
@@ -42,7 +43,7 @@ export async function getReviewableAgents() {
     "getReviewableAgents",
     {},
     async () => {
-      const api = new MarketplaceAPI();
+      const api = new ServerSideMarketplaceAPI();
       return api.getAgentSubmissions();
     },
   );
@@ -56,7 +57,7 @@ export async function getFeaturedAgents(
     "getFeaturedAgents",
     {},
     async () => {
-      const api = new MarketplaceAPI();
+      const api = new ServerSideMarketplaceAPI();
       const featured = await api.getFeaturedAgents(page, pageSize);
       console.debug(`Getting featured agents ${featured.agents.length}`);
       return featured;
@@ -69,7 +70,7 @@ export async function getFeaturedAgent(agentId: string) {
     "getFeaturedAgent",
     {},
     async () => {
-      const api = new MarketplaceAPI();
+      const api = new ServerSideMarketplaceAPI();
       const featured = await api.getFeaturedAgent(agentId);
       console.debug(`Getting featured agent ${featured.agentId}`);
       return featured;
@@ -85,7 +86,7 @@ export async function addFeaturedAgent(
     "addFeaturedAgent",
     {},
     async () => {
-      const api = new MarketplaceAPI();
+      const api = new ServerSideMarketplaceAPI();
       await api.addFeaturedAgent(agentId, categories);
       console.debug(`Adding featured agent ${agentId}`);
       revalidatePath("/marketplace");
@@ -101,7 +102,7 @@ export async function removeFeaturedAgent(
     "removeFeaturedAgent",
     {},
     async () => {
-      const api = new MarketplaceAPI();
+      const api = new ServerSideMarketplaceAPI();
       await api.removeFeaturedAgent(agentId, categories);
       console.debug(`Removing featured agent ${agentId}`);
       revalidatePath("/marketplace");
@@ -114,7 +115,7 @@ export async function getCategories() {
     "getCategories",
     {},
     async () => {
-      const api = new MarketplaceAPI();
+      const api = new ServerSideMarketplaceAPI();
       const categories = await api.getCategories();
       console.debug(
         `Getting categories ${categories.unique_categories.length}`,
@@ -132,7 +133,7 @@ export async function getNotFeaturedAgents(
     "getNotFeaturedAgents",
     {},
     async () => {
-      const api = new MarketplaceAPI();
+      const api = new ServerSideMarketplaceAPI();
       const agents = await api.getNotFeaturedAgents(page, pageSize);
       console.debug(`Getting not featured agents ${agents.agents.length}`);
       return agents;

autogpt_platform/frontend/src/lib/marketplace-api/base-client.ts

@@ -1,4 +1,4 @@
-import { createClient } from "../supabase/client";
+import { SupabaseClient } from "@supabase/supabase-js";
 import {
   AddAgentRequest,
   AgentResponse,
@@ -11,15 +11,17 @@ import {
   AnalyticsEvent,
 } from "./types";
 
-export default class MarketplaceAPI {
+export default class BaseMarketplaceAPI {
   private baseUrl: string;
-  private supabaseClient = createClient();
+  private supabaseClient: SupabaseClient | null = null;
 
   constructor(
     baseUrl: string = process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL ||
       "http://localhost:8015/api/v1/market",
+    supabaseClient: SupabaseClient | null = null,
   ) {
     this.baseUrl = baseUrl;
+    this.supabaseClient = supabaseClient;
   }
 
   async checkHealth(): Promise<{ status: string }> {
@@ -262,7 +264,15 @@ export default class MarketplaceAPI {
         response_data.detail,
         response,
       );
-      throw new Error(`HTTP error ${response.status}! ${response_data.detail}`);
+      try {
+        const response_data = await response.json();
+      } catch (e) {
+        console.warn("Failed to parse response body", e);
+      }
+
+      throw new Error(
+        `HTTP error ${response.status}! ${response_data.detail} ${method} ${response.url}`,
+      );
     }
     return response_data;
   }

autogpt_platform/frontend/src/lib/marketplace-api/browser-client.ts

@@ -0,0 +1,12 @@
+import { createClient } from "../supabase/client";
+import BaseMarketplaceAPI from "./base-client";
+
+export default class ClientSideMarketplaceAPI extends BaseMarketplaceAPI {
+  constructor(
+    baseUrl: string = process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL ||
+      "http://localhost:8015/api/v1/market",
+  ) {
+    const supabaseClient = createClient();
+    super(baseUrl, supabaseClient);
+  }
+}

autogpt_platform/frontend/src/lib/marketplace-api/index.ts

@@ -1,4 +1,4 @@
-import MarketplaceAPI from "./client";
+import MarketplaceAPI from "./browser-client";
 
 export default MarketplaceAPI;
 export * from "./types";

autogpt_platform/frontend/src/lib/marketplace-api/server-client.ts

@@ -0,0 +1,12 @@
+import { createServerClient } from "../supabase/server";
+import BaseMarketplaceAPI from "./base-client";
+
+export default class ServerSideMarketplaceAPI extends BaseMarketplaceAPI {
+  constructor(
+    baseUrl: string = process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL ||
+      "http://localhost:8015/api/v1/market",
+  ) {
+    const supabaseClient = createServerClient();
+    super(baseUrl, supabaseClient);
+  }
+}