+ );
+ },
+ ],
+ loaders: [mswLoader],
+};
+
+export default preview;
diff --git a/autogpt_platform/frontend/.storybook/stoybook_guide.md b/autogpt_platform/frontend/.storybook/stoybook_guide.md
new file mode 100644
index 000000000000..15fdcb7c68db
--- /dev/null
+++ b/autogpt_platform/frontend/.storybook/stoybook_guide.md
@@ -0,0 +1,60 @@
+# For Client-Side Components
+
+When communicating with the server in client components, use the `useBackendAPI` hook. It automatically detects when running in a Storybook environment and switches to the mock client.
+
+To provide custom mock data instead of the default values, add the `mockBackend` parameter in your stories:
+
+```tsx
+export const MyStory = {
+ parameters: {
+ mockBackend: {
+ credits: 100,
+ isAuthenticated: true,
+ // Other custom mock data
+ },
+ },
+};
+```
+
+# For Server-Side Components
+
+The server-based Supabase client automatically switches between real requests and mock responses.
+
+For server-side components, use the following pattern to select between backend client and mock client:
+
+```tsx
+const api = process.env.STORYBOOK ? new MockClient() : new BackendAPI();
+```
+
+You need to override specific API request methods in your mock client implementation. If you don't override a method, you can use the default methods provided by `BackendAPI` in both server-side and client-side environments.
+
+To use custom mock data in server components, pass it directly to the `MockClient` constructor:
+
+```tsx
+const api = process.env.STORYBOOK
+ ? new MockClient({ credits: 200, isAuthenticated: true })
+ : new BackendAPI();
+```
+
+> Note: For client components, always use the `mockBackend` parameter in stories instead.
+
+# Using MSW
+
+If you haven't overridden an API request method in your mock client, you can use Mock Service Worker (MSW) to intercept HTTP requests from both the browser and Node.js environments, then respond with custom mock data:
+
+```tsx
+// In your story
+export const WithMSW = {
+ parameters: {
+ msw: {
+ handlers: [
+ http.get("/api/user", () => {
+ return HttpResponse.json({ name: "John", role: "admin" });
+ }),
+ ],
+ },
+ },
+};
+```
+
+Currently, it doesn't have support for client-side Supabase client and custom data for Supabase server-side client. You could use MSW for both cases.
diff --git a/autogpt_platform/frontend/public/agpt-logo.png b/autogpt_platform/frontend/public/agpt-logo.png
new file mode 100644
index 000000000000..ffb6947bd24c
Binary files /dev/null and b/autogpt_platform/frontend/public/agpt-logo.png differ
diff --git a/autogpt_platform/frontend/public/agpt-logo.svg b/autogpt_platform/frontend/public/agpt-logo.svg
new file mode 100644
index 000000000000..1f3d1ac9ec29
--- /dev/null
+++ b/autogpt_platform/frontend/public/agpt-logo.svg
@@ -0,0 +1,37 @@
+
diff --git a/autogpt_platform/frontend/public/testing_agent_image.jpg b/autogpt_platform/frontend/public/testing_agent_image.jpg
new file mode 100644
index 000000000000..c30b04fda3d9
Binary files /dev/null and b/autogpt_platform/frontend/public/testing_agent_image.jpg differ
diff --git a/autogpt_platform/frontend/public/testing_avatar.png b/autogpt_platform/frontend/public/testing_avatar.png
new file mode 100644
index 000000000000..19859c96d867
Binary files /dev/null and b/autogpt_platform/frontend/public/testing_avatar.png differ
diff --git a/autogpt_platform/frontend/src/app/(platform)/layout.tsx b/autogpt_platform/frontend/src/app/(platform)/layout.tsx
index 10a278f5f7ba..05ebe203c03e 100644
--- a/autogpt_platform/frontend/src/app/(platform)/layout.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/layout.tsx
@@ -8,13 +8,14 @@ export default function PlatformLayout({ children }: { children: ReactNode }) {
- {children}
+ {children}
);
}
diff --git a/autogpt_platform/frontend/src/app/(platform)/marketplace/agent/[creator]/[slug]/page.tsx b/autogpt_platform/frontend/src/app/(platform)/marketplace/agent/[creator]/[slug]/page.tsx
index c0e1115fdff7..05bee18907fe 100644
--- a/autogpt_platform/frontend/src/app/(platform)/marketplace/agent/[creator]/[slug]/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/marketplace/agent/[creator]/[slug]/page.tsx
@@ -56,62 +56,49 @@ export default async function Page({
const breadcrumbs = [
{ name: "Marketplace", link: "/marketplace" },
- {
- name: agent.creator,
- link: `/marketplace/creator/${encodeURIComponent(agent.creator)}`,
- },
{ name: agent.agent_name, link: "#" },
];
return (
-
-
+
+
-
- {/* 100px margin because our featured sections button are placed 40px below the container */}
-
+
+
+
+ {/* Below Separator's mt is 44px as per design; I need to add extra to counter the absolute positioning of the arrows above */}
+
-
+
-
+
-
-