add mock backend provider in preview.tsx

autogpt_platform/frontend/.storybook/preview.tsx

@@ -1,6 +1,8 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
 import { initialize, mswLoader } from "msw-storybook-addon";
 import "../src/app/globals.css";
+import { Providers } from "../src/app/providers";
 
 // Initialize MSW
 initialize();
@@ -17,6 +19,17 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [
+    (Story, context) => {
+      const mockOptions = context.parameters.mockBackend || {};
+
+      return (
+        <Providers useMockBackend mockClientProps={mockOptions}>
+          <Story />
+        </Providers>
+      );
+    },
+  ],
   loaders: [mswLoader],
 };
 

autogpt_platform/frontend/src/app/providers.tsx

@@ -8,11 +8,26 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import CredentialsProvider from "@/components/integrations/credentials-provider";
 import { LaunchDarklyProvider } from "@/components/feature-flag/feature-flag-provider";
 import OnboardingProvider from "@/components/onboarding/onboarding-provider";
+import { MockClientProps } from "@/lib/autogpt-server-api/mock_client";
 
-export function Providers({ children, ...props }: ThemeProviderProps) {
+export interface ProvidersProps extends ThemeProviderProps {
+  children: React.ReactNode;
+  useMockBackend?: boolean;
+  mockClientProps?: MockClientProps;
+}
+
+export function Providers({
+  children,
+  useMockBackend,
+  mockClientProps,
+  ...props
+}: ProvidersProps) {
   return (
     <NextThemesProvider {...props}>
-      <BackendAPIProvider>
+      <BackendAPIProvider
+        useMockBackend={useMockBackend}
+        mockClientProps={mockClientProps}
+      >
         <CredentialsProvider>
           <LaunchDarklyProvider>
             <OnboardingProvider>

autogpt_platform/frontend/src/lib/autogpt-server-api/context.tsx

@@ -2,15 +2,27 @@
 
 import BackendAPI from "./client";
 import React, { createContext, useMemo } from "react";
+import MockClient, { MockClientProps } from "./mock_client";
 
 const BackendAPIProviderContext = createContext<BackendAPI | null>(null);
 
+interface BackendAPIProviderProps {
+  children?: React.ReactNode;
+  useMockBackend?: boolean;
+  mockClientProps?: MockClientProps;
+}
+
 export function BackendAPIProvider({
   children,
-}: {
-  children?: React.ReactNode;
-}): React.ReactNode {
-  const api = useMemo(() => new BackendAPI(), []);
+  useMockBackend,
+  mockClientProps,
+}: BackendAPIProviderProps): React.ReactNode {
+  const api = useMemo(() => {
+    if (useMockBackend) {
+      return new MockClient(mockClientProps);
+    }
+    return new BackendAPI();
+  }, [useMockBackend, mockClientProps]);
 
   return (
     <BackendAPIProviderContext.Provider value={api}>

autogpt_platform/frontend/src/lib/autogpt-server-api/mock_client.ts

@@ -0,0 +1,105 @@
+import { faker } from "@faker-js/faker";
+import BackendAPI from "./client";
+import { Block, BlockUIType, ProfileDetails, User } from "./types";
+
+export interface MockClientProps {
+  credits?: number;
+  blocks?: Block[];
+  profile?: ProfileDetails;
+  isAuthenticated?: boolean;
+}
+
+// Default mock data
+export const DEFAULT_MOCK_DATA: Required<MockClientProps> = {
+  credits: 10,
+  blocks: [
+    {
+      id: faker.string.uuid(),
+      name: faker.lorem.word(),
+      description: faker.lorem.sentence(),
+      inputSchema: {
+        type: "object",
+        properties: {},
+      },
+      outputSchema: {
+        type: "object",
+        properties: {},
+      },
+      staticOutput: false,
+      categories: [],
+      uiType: BlockUIType.STANDARD,
+      costs: [],
+      hardcodedValues: {},
+    },
+  ],
+  profile: {
+    name: "John Doe",
+    username: "johndoe",
+    description: "",
+    links: [],
+    avatar_url: "https://avatars.githubusercontent.com/u/123456789?v=4",
+  },
+  isAuthenticated: true,
+};
+
+export default class MockClient extends BackendAPI {
+  private props: Required<MockClientProps>;
+
+  constructor(props: MockClientProps = {}) {
+    super();
+    this.props = {
+      ...DEFAULT_MOCK_DATA,
+      ...props,
+    };
+  }
+
+  override isAuthenticated(): Promise<boolean> {
+    return Promise.resolve(this.props.isAuthenticated);
+  }
+
+  override createUser(): Promise<User> {
+    const userId = faker.string.uuid() as unknown as User["id"];
+    return Promise.resolve({
+      id: userId,
+      email: "test@test.com",
+    });
+  }
+
+  override getUserCredit(page?: string): Promise<{ credits: number }> {
+    return Promise.resolve({ credits: this.props.credits });
+  }
+
+  override getAutoTopUpConfig(): Promise<{
+    amount: number;
+    threshold: number;
+  }> {
+    return Promise.resolve({ amount: 10, threshold: 10 });
+  }
+
+  override setAutoTopUpConfig(config: {
+    amount: number;
+    threshold: number;
+  }): Promise<{ amount: number; threshold: number }> {
+    return Promise.resolve(config);
+  }
+
+  override requestTopUp(amount: number): Promise<{ checkout_url: string }> {
+    return Promise.resolve({ checkout_url: "https://checkout.stripe.com" });
+  }
+
+  override getUserPaymentPortalLink(): Promise<{ url: string }> {
+    return Promise.resolve({ url: "https://payment.stripe.com" });
+  }
+
+  override fulfillCheckout(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  override getBlocks(): Promise<Block[]> {
+    return Promise.resolve(this.props.blocks);
+  }
+
+  override getStoreProfile(page?: string): Promise<ProfileDetails> {
+    return Promise.resolve(this.props.profile);
+  }
+}

autogpt_platform/frontend/src/lib/supabase/getServerUser.ts

@@ -1,6 +1,10 @@
 import getServerSupabase from "./getServerSupabase";
+import { User } from "@supabase/supabase-js";
 
-const getServerUser = async () => {
+const getServerUser = async (mockUser?: User) => {
+  if (mockUser) {
+    return { user: mockUser, role: "admin", error: null };
+  }
   const supabase = getServerSupabase();
 
   if (!supabase) {