wip creat agent

2026-04-08 03:00:28 -04:00 · 2024-11-26 17:37:28 +01:00
parent faa683b6e4
commit 244171d748
11 changed files with 536 additions and 30 deletions
--- a/autogpt_platform/backend/backend/server/v2/store/db.py
+++ b/autogpt_platform/backend/backend/server/v2/store/db.py
@@ -549,3 +549,55 @@ async def update_or_create_profile(
        raise backend.server.v2.store.exceptions.DatabaseError(
            "Failed to update profile"
        ) from e
+
+
+async def get_my_agents(
+    user_id: str,
+    page: int = 1,
+    page_size: int = 20,
+) -> backend.server.v2.store.model.MyAgentsResponse:
+    logger.debug(f"Getting my agents for user {user_id}, page={page}")
+
+    try:
+        agents_with_max_version = await prisma.models.AgentGraph.prisma().find_many(
+            where=prisma.types.AgentGraphWhereInput(userId=user_id),
+            order=[{"version": "desc"}],
+            distinct=["id"],
+            skip=(page - 1) * page_size,
+            take=page_size,
+        )
+
+        total = len(await prisma.models.AgentGraph.prisma().find_many(
+            where=prisma.types.AgentGraphWhereInput(userId=user_id),
+            order=[{"version": "desc"}],
+            distinct=["id"],
+        ))
+
+        total_pages = (total + page_size - 1) // page_size
+
+        agents = agents_with_max_version
+
+        my_agents = [
+            backend.server.v2.store.model.MyAgent(
+                agent_id=agent.id,
+                agent_version=agent.version,
+                agent_name=agent.name or "",
+                last_edited=agent.updatedAt or agent.createdAt,
+            )
+            for agent in agents
+        ]
+
+        return backend.server.v2.store.model.MyAgentsResponse(
+            agents=my_agents,
+            pagination=backend.server.v2.store.model.Pagination(
+                current_page=page,
+                total_items=total,
+                total_pages=total_pages,
+                page_size=page_size,
+            ),
+        )
+    except Exception as e:
+        logger.error(f"Error getting my agents: {str(e)}")
+        raise backend.server.v2.store.exceptions.DatabaseError(
+            "Failed to fetch my agents"
+        ) from e
--- a/autogpt_platform/backend/backend/server/v2/store/model.py
+++ b/autogpt_platform/backend/backend/server/v2/store/model.py
@@ -19,6 +19,15 @@ class Pagination(pydantic.BaseModel):
        description="Number of items per page.", examples=[25]
    )

+class MyAgent(pydantic.BaseModel):
+    agent_id: str
+    agent_version: int
+    agent_name: str
+    last_edited: datetime.datetime
+
+class MyAgentsResponse(pydantic.BaseModel):
+    agents: list[MyAgent]
+    pagination: Pagination

 class StoreAgent(pydantic.BaseModel):
    slug: str
--- a/autogpt_platform/backend/backend/server/v2/store/routes.py
+++ b/autogpt_platform/backend/backend/server/v2/store/routes.py
@@ -225,7 +225,20 @@ async def get_creator(username: str) -> backend.server.v2.store.model.CreatorDet
 ############################################
 ############# Store Submissions ###############
 ############################################
-
+@router.get(
+        "/myagents",
+        tags=["store", "private"],
+        dependencies=[fastapi.Depends(autogpt_libs.auth.middleware.auth_middleware)],
+)
+async def get_my_agents(
+    user_id: typing.Annotated[str, fastapi.Depends(autogpt_libs.auth.depends.get_user_id)]
+) -> backend.server.v2.store.model.MyAgentsResponse:
+    try:
+        agents = await backend.server.v2.store.db.get_my_agents(user_id)
+        return agents
+    except Exception:
+        logger.exception("Exception occurred whilst getting my agents")
+        raise

@router.get(
    "/submissions",
--- a/autogpt_platform/frontend/src/app/[lang]/store/(user)/dashboard/page.tsx
+++ b/autogpt_platform/frontend/src/app/[lang]/store/(user)/dashboard/page.tsx
@@ -5,6 +5,7 @@ import { Separator } from "@/components/ui/separator";
 import AutoGPTServerAPIServerSide from "@/lib/autogpt-server-api";
 import { createServerClient } from "@/lib/supabase/server";
 import { StatusType } from "@/components/agptui/Status";
+import { PublishAgentPopout } from "@/components/agptui/composite/PublishAgentPopout";

 async function getDashboardData() {
  // Get the supabase client first
@@ -59,9 +60,14 @@ export default async function Page({
            your local machine.
          </p>
        </div>
-        <Button variant="default" size="lg">
-          Create New Agent
-        </Button>
+        <PublishAgentPopout
+          trigger={
+            <Button variant="default" size="lg">
+              Create New Agent
+            </Button>
+          }
+          agents={[]}
+        />
      </div>

      <Separator className="mb-8" />
--- a/autogpt_platform/frontend/src/components/agptui/PublishAgentAwaitingReview.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/PublishAgentAwaitingReview.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { IconClose } from "../ui/icons";
 import Image from "next/image";
@@ -26,11 +28,11 @@ export const PublishAgentAwaitingReview: React.FC<
 }) => {
  return (
    <div
-      className="inline-flex min-h-screen w-full flex-col rounded-none border border-slate-200 bg-white shadow sm:h-auto sm:min-h-[824px] sm:max-w-[670px] sm:rounded-3xl"
+      className="inline-flex min-h-screen w-full items-center justify-center flex-col rounded-none sm:h-auto sm:min-h-[824px] sm:rounded-3xl"
      role="dialog"
      aria-labelledby="modal-title"
    >
-      <div className="relative h-[180px] w-full rounded-none border-b border-slate-200 sm:h-[140px] sm:rounded-t-3xl">
+      <div className="relative h-[180px] w-full rounded-none sm:h-[140px] sm:rounded-t-3xl">
        <div className="absolute left-0 top-[40px] flex w-full flex-col items-center justify-start px-6 sm:top-[40px]">
          <div
            id="modal-title"
--- a/autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.tsx
@@ -1,17 +1,21 @@
+"use client";
+
 import * as React from "react";
 import Image from "next/image";
 import { Button } from "../agptui/Button";
 import { IconClose } from "../ui/icons";

-interface Agent {
+export interface Agent {
  name: string;
+  id: string;
+  version: number;
  lastEdited: string;
  imageSrc: string;
 }

 interface PublishAgentSelectProps {
  agents: Agent[];
-  onSelect: (agentName: string) => void;
+  onSelect: (agentId: string, agentVersion: number) => void;
  onCancel: () => void;
  onNext: () => void;
  onClose: () => void;
@@ -28,9 +32,9 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
 }) => {
  const [selectedAgent, setSelectedAgent] = React.useState<string | null>(null);

-  const handleAgentClick = (agentName: string) => {
+  const handleAgentClick = (agentName: string, agentId: string, agentVersion: number) => {
    setSelectedAgent(agentName);
-    onSelect(agentName);
+    onSelect(agentId, agentVersion);
  };

  return (
@@ -92,11 +96,11 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
                          ? "shadow-lg ring-4 ring-violet-600"
                          : "hover:shadow-md"
                      }`}
-                      onClick={() => handleAgentClick(agent.name)}
+                      onClick={() => handleAgentClick(agent.name, agent.id, agent.version)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter" || e.key === " ") {
                          e.preventDefault();
-                          handleAgentClick(agent.name);
+                          handleAgentClick(agent.name, agent.id, agent.version);
                        }
                      }}
                      tabIndex={0}
--- a/autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx
@@ -1,11 +1,22 @@
+"use client";
+
 import * as React from "react";
 import Image from "next/image";
 import { Button } from "../agptui/Button";
 import { IconClose, IconPlus } from "../ui/icons";
+import AutoGPTServerAPI from "@/lib/autogpt-server-api";
+import { createClient } from "@/lib/supabase/client";

 interface PublishAgentInfoProps {
  onBack: () => void;
-  onSubmit: () => void;
+  onSubmit: (
+    name: string,
+    subHeading: string, 
+    description: string,
+    imageUrls: string[],
+    videoUrl: string,
+    categories: string[]
+  ) => void;
  onClose: () => void;
  initialData?: {
    title: string;
@@ -34,21 +45,65 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
  const [selectedImage, setSelectedImage] = React.useState<string | null>(
    initialData?.thumbnailSrc || null,
  );
+  const [title, setTitle] = React.useState(initialData?.title || '');
+  const [subheader, setSubheader] = React.useState(initialData?.subheader || '');
+  const [youtubeLink, setYoutubeLink] = React.useState(initialData?.youtubeLink || '');
+  const [category, setCategory] = React.useState(initialData?.category || '');
+  const [description, setDescription] = React.useState(initialData?.description || '');
+
  const thumbnailsContainerRef = React.useRef<HTMLDivElement | null>(null);

  const handleRemoveImage = (indexToRemove: number) => {
-    console.log(`Remove image at index: ${indexToRemove}`);
-    // Placeholder function for removing an image
+    setImages(prev => prev.filter((_, index) => index !== indexToRemove));
+    if (images[indexToRemove] === selectedImage) {
+      setSelectedImage(images[0] || null);
+    }
  };

-  const handleAddImage = () => {
-    console.log("Add image button clicked");
-    // Placeholder function for adding an image
+  const handleAddImage = async () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    
+    input.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+
+      try {
+        const api = new AutoGPTServerAPI(
+          process.env.NEXT_PUBLIC_AGPT_SERVER_URL,
+          process.env.NEXT_PUBLIC_AGPT_WS_SERVER_URL,
+          createClient()
+        );
+
+        const imageUrl = await api.uploadStoreSubmissionMedia(file);
+        setImages(prev => [...prev, imageUrl]);
+        if (!selectedImage) {
+          setSelectedImage(imageUrl);
+        }
+      } catch (error) {
+        console.error("Error uploading image:", error);
+      }
+    };
+
+    input.click();
+  };
+
+  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    onSubmit(
+      title,
+      subheader,
+      description,
+      images,
+      youtubeLink,
+      [category]
+    );
  };

  return (
-    <div className="mx-auto flex w-full max-w-[670px] flex-col rounded-3xl border border-slate-200 bg-white shadow-lg">
-      <div className="relative border-b border-slate-200 p-6">
+    <div className="mx-auto flex w-full flex-col rounded-3xl">
+      <div className="relative p-6">
        <div className="absolute right-4 top-2">
          <button
            onClick={onClose}
@@ -78,7 +133,8 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
            id="title"
            type="text"
            placeholder="Agent name"
-            defaultValue={initialData?.title}
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
            className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 font-['Geist'] text-base font-normal leading-normal text-slate-500"
          />
        </div>
@@ -94,7 +150,8 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
            id="subheader"
            type="text"
            placeholder="A tagline for your agent"
-            defaultValue={initialData?.subheader}
+            value={subheader}
+            onChange={(e) => setSubheader(e.target.value)}
            className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 font-['Geist'] text-base font-normal leading-normal text-slate-500"
          />
        </div>
@@ -130,10 +187,19 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
                  variant="ghost"
                  className="flex h-[70px] w-[100px] flex-col items-center justify-center rounded-md bg-neutral-200 hover:bg-neutral-300"
                >
-                  <IconPlus size="lg" className="text-neutral-600" />
-                  <span className="mt-1 font-['Geist'] text-xs font-normal text-neutral-600">
-                    Add image
-                  </span>
+                  <label htmlFor="image-upload" className="cursor-pointer">
+                    <input
+                      id="image-upload"
+                      type="file"
+                      accept="image/*"
+                      onChange={handleAddImage}
+                      className="hidden"
+                    />
+                    <IconPlus size="lg" className="text-neutral-600" />
+                    <span className="mt-1 font-['Geist'] text-xs font-normal text-neutral-600">
+                      Add image
+                    </span>
+                  </label>
                </Button>
              </div>
            ) : (
@@ -202,7 +268,8 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
            id="youtube"
            type="text"
            placeholder="Paste a video link here"
-            defaultValue={initialData?.youtubeLink}
+            value={youtubeLink}
+            onChange={(e) => setYoutubeLink(e.target.value)}
            className="w-full rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-14 font-['Geist'] text-base font-normal leading-normal text-slate-500"
          />
        </div>
@@ -216,7 +283,8 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
          </label>
          <select
            id="category"
-            defaultValue={initialData?.category}
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
            className="w-full appearance-none rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-5 font-['Geist'] text-base font-normal leading-normal text-slate-500"
          >
            <option value="">Select a category for your agent</option>
@@ -235,7 +303,8 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
          <textarea
            id="description"
            placeholder="Describe your agent and what it does"
-            defaultValue={initialData?.description}
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
            className="h-[100px] w-full resize-none rounded-2xl border border-slate-200 bg-white py-2.5 pl-4 pr-14 font-['Geist'] text-base font-normal leading-normal text-slate-900"
          ></textarea>
        </div>
@@ -251,7 +320,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
          Back
        </Button>
        <Button
-          onClick={onSubmit}
+          onClick={handleSubmit}
          variant="default"
          size="default"
          className="w-full bg-neutral-800 text-white hover:bg-neutral-900 sm:flex-1"
--- a/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.stories.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.stories.tsx
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PublishAgentPopout } from "@/components/agptui/composite/PublishAgentPopout";
+import { userEvent, within, expect } from "@storybook/test";
+
+const meta = {
+  title: "AGPT UI/Composite/Publish Agent Popout",
+  component: PublishAgentPopout,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    agents: { control: "object" },
+    onOpenBuilder: { action: "onOpenBuilder" },
+  },
+} satisfies Meta<typeof PublishAgentPopout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockAgents = [
+  {
+    name: "Marketing Assistant",
+    lastEdited: "2 days ago",
+    imageSrc: "https://picsum.photos/seed/marketing/300/200",
+  },
+  {
+    name: "Sales Bot",
+    lastEdited: "5 days ago", 
+    imageSrc: "https://picsum.photos/seed/sales/300/200",
+  },
+  {
+    name: "Content Writer",
+    lastEdited: "1 week ago",
+    imageSrc: "https://picsum.photos/seed/content/300/200",
+  }
+];
+
+export const Default: Story = {
+  args: {
+    agents: mockAgents,
+  },
+};
+
+export const WithCustomTrigger: Story = {
+  args: {
+    agents: mockAgents,
+    trigger: <button>Custom Publish Button</button>,
+  },
+};
+
+export const EmptyAgentsList: Story = {
+  args: {
+    agents: [],
+  },
+};
+
+export const WithBuilderCallback: Story = {
+  args: {
+    agents: mockAgents,
+    onOpenBuilder: () => {
+      console.log("Opening builder...");
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const publishButton = canvas.getByText("Publish Agent");
+    await userEvent.click(publishButton);
+    
+    const builderButton = canvas.getByText("Create new agent");
+    await userEvent.click(builderButton);
+  },
+};
+
+export const SelectAndPublishFlow: Story = {
+  args: {
+    agents: mockAgents,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    
+    // Open popout
+    const publishButton = canvas.getByText("Publish Agent");
+    await userEvent.click(publishButton);
+    
+    // Select an agent
+    const agentCard = canvas.getByText("Marketing Assistant");
+    await userEvent.click(agentCard);
+    
+    // Click next
+    const nextButton = canvas.getByText("Next");
+    await userEvent.click(nextButton);
+  },
+};
--- a/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import * as React from "react";
+import {
+    Popover,
+    PopoverTrigger,
+    PopoverContent,
+    PopoverAnchor,
+} from "@/components/ui/popover";
+import { PublishAgentSelect, Agent } from "../PublishAgentSelect";
+import { PublishAgentInfo } from "../PublishAgentSelectInfo";
+import { PublishAgentAwaitingReview } from "../PublishAgentAwaitingReview";
+import { Button } from "../Button";
+import { StoreSubmissionRequest, MyAgentsResponse } from "@/lib/autogpt-server-api";
+import { createClient } from "@/lib/supabase/client";
+import AutoGPTServerAPI from "@/lib/autogpt-server-api/client";
+import { useRouter } from "next/navigation";
+interface PublishAgentPopoutProps {
+    trigger?: React.ReactNode;
+    agents: {
+        name: string;
+        lastEdited: string;
+        imageSrc: string;
+    }[];
+    onOpenBuilder?: () => void;
+}
+
+export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
+    trigger,
+    agents,
+    onOpenBuilder,
+}) => {
+    const [step, setStep] = React.useState<"select" | "info" | "review">("select");
+    const [myAgents, setMyAgents] = React.useState<MyAgentsResponse | null>(null);
+    const [selectedAgent, setSelectedAgent] = React.useState<string | null>(null);
+    const [publishData, setPublishData] = React.useState<StoreSubmissionRequest>({
+        name: "",
+        sub_heading: "",
+        description: "",
+        image_urls: [],
+        agent_id: "",
+        agent_version: 0,
+        slug: "",
+        categories: [],
+    });
+    const [open, setOpen] = React.useState(false);
+
+    const popupId = React.useId();
+    const router = useRouter();
+
+    const supabase = createClient();
+
+    const api = new AutoGPTServerAPI(
+        process.env.NEXT_PUBLIC_AGPT_SERVER_URL,
+        process.env.NEXT_PUBLIC_AGPT_WS_SERVER_URL,
+        supabase,
+    );
+
+
+    React.useEffect(() => {
+        const loadMyAgents = async () => {
+            try {
+                const response = await api.getMyAgents();
+                setMyAgents(response);
+            } catch (error) {
+                console.error("Failed to load my agents:", error);
+            }
+        };
+
+        loadMyAgents();
+    }, []);
+
+
+    const handleClose = () => {
+        setStep("select");
+        setSelectedAgent(null);
+        setPublishData({
+            name: "",
+            sub_heading: "",
+            description: "",
+            image_urls: [],
+            agent_id: "",
+            agent_version: 0,
+            slug: "",
+            categories: [],
+        });
+        setOpen(false);
+    };
+
+    const handleAgentSelect = (agentName: string) => {
+        setSelectedAgent(agentName);
+    };
+
+    const handleNextFromSelect = () => {
+        setStep("info");
+    };
+
+    const handleNextFromInfo = async (
+        name: string,
+        subHeading: string,
+        description: string,
+        imageUrls: string[],
+        videoUrl: string,
+        categories: string[]
+    ) => {
+        const selectedAgentData = myAgents?.agents.find(a => a.agent_name === selectedAgent);
+
+        if (!name || !subHeading || !description || !imageUrls.length || !categories.length) {
+            console.error("Missing required fields");
+            return;
+        }
+
+        setPublishData({
+            name,
+            sub_heading: subHeading,
+            description,
+            image_urls: imageUrls,
+            video_url: videoUrl,
+            agent_id: selectedAgentData?.agent_id || "",
+            agent_version: selectedAgentData?.agent_version || 0,
+            slug: name.toLowerCase().replace(/\s+/g, '-'),
+            categories
+        });
+
+        // Create store submission
+        try {
+            const submission = await api.createStoreSubmission({
+                name: name,
+                sub_heading: subHeading,
+                description: description,
+                image_urls: imageUrls,
+                video_url: videoUrl,
+                agent_id: selectedAgentData?.agent_id || "",
+                agent_version: selectedAgentData?.agent_version || 0,
+                slug: name.toLowerCase().replace(/\s+/g, '-'),
+                categories: categories
+            });
+            console.log("Store submission created:", submission);
+        } catch (error) {
+            console.error("Error creating store submission:", error);
+        }
+        setStep("review");
+    };
+
+
+    const handleBack = () => {
+        if (step === "info") {
+            setStep("select");
+        } else if (step === "review") {
+            setStep("info");
+        }
+    };
+
+    const renderContent = () => {
+        switch (step) {
+            case "select":
+                return (
+                    <div className="flex min-h-screen items-center justify-center">
+                        <div className="mx-auto flex w-full max-w-[900px] flex-col rounded-3xl bg-white shadow-lg">
+                            <div className="h-full overflow-y-auto">
+                                <PublishAgentSelect
+                                    agents={myAgents?.agents.map(agent => ({
+                                        name: agent.agent_name,
+                                        id: agent.agent_id,
+                                        version: agent.agent_version,
+                                        lastEdited: agent.last_edited,
+                                        imageSrc: "https://picsum.photos/300/200" // Fallback image if none provided
+                                    })) || []}
+                                    onSelect={handleAgentSelect}
+                                    onCancel={handleClose}
+                                    onNext={handleNextFromSelect}
+                                    onClose={handleClose}
+                                    onOpenBuilder={onOpenBuilder || (() => router.push(`/build?flowID=${myAgents?.agents.find(a => a.agent_name === selectedAgent)?.agent_id}`))}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                );
+            case "info":
+                return (
+                    <div className="flex min-h-screen items-center justify-center">
+                        <div className="mx-auto flex w-full max-w-[900px] flex-col rounded-3xl bg-white shadow-lg">
+                            <div className="h-[700px] overflow-y-auto">
+                                <PublishAgentInfo
+                                    onBack={handleBack}
+                                    onSubmit={handleNextFromInfo}
+                                    onClose={handleClose}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                );
+            case "review":
+                return publishData ? (
+                    <div className="flex justify-center">
+                        <div className="mx-auto flex w-full max-w-[900px] flex-col rounded-3xl bg-white shadow-lg">
+                            <div className="h-[600px] overflow-y-auto">
+                                <PublishAgentAwaitingReview
+                                    agentName={publishData.name}
+                                    subheader={publishData.sub_heading}
+                                    description={publishData.description}
+                                    thumbnailSrc={publishData.image_urls[0]}
+                                    onClose={handleClose}
+                                    onDone={handleClose}
+                                    onViewProgress={() => router.push('/store/dashboard')}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                ) : null;
+        }
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                {trigger || (
+                    <Button variant="default">
+                        Publish Agent
+                    </Button>
+                )}
+            </PopoverTrigger>
+            <PopoverAnchor asChild>
+                <div className="hidden fixed top-0 left-0 h-screen w-screen items-center justify-center">
+                </div>
+            </PopoverAnchor>
+
+            <PopoverContent
+                id={popupId}
+                align="center"
+                className="w-screen h-screen bg-transparent z-50"
+            >
+            {renderContent()}
+            </PopoverContent>
+        </Popover>
+    );
+};
--- a/autogpt_platform/frontend/src/lib/autogpt-server-api/baseClient.ts
+++ b/autogpt_platform/frontend/src/lib/autogpt-server-api/baseClient.ts
@@ -15,6 +15,7 @@ import {
  GraphMetaWithRuns,
  GraphUpdateable,
  NodeExecutionResult,
+  MyAgentsResponse,
  OAuth2Credentials,
  ProfileDetails,
  User,
@@ -328,6 +329,13 @@ export default class BaseAutoGPTServerAPI {
    return this._request("POST", "/store/profile", profile);
  }

+  getMyAgents(params?: {
+    page?: number;
+    page_size?: number;
+  }): Promise<MyAgentsResponse> {
+    return this._get("/store/myagents", params);
+  }
+  
  ///////////////////////////////////////////
  /////////// INTERNAL FUNCTIONS ////////////
  //////////////////////////////??///////////
--- a/autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts
+++ b/autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts
@@ -462,3 +462,15 @@ export type ScheduleCreatable = {
  graph_id: string;
  input_data: { [key: string]: any };
 };
+
+export type MyAgent = {
+  agent_id: string;
+  agent_version: number;
+  agent_name: string;
+  last_edited: string;
+};
+
+export type MyAgentsResponse = {
+  agents: MyAgent[];
+  pagination: Pagination;
+};