Installation

+ import { config as compassConfig } from '@sf-modules-middleware/compass';

export const config = {
  integrations: {
    // ...other integrations
+   compass: compassConfig,
  },
};

+ export * from '@/sf-modules/compass/types';

import type { CompassModuleTypeParams } from 'storefront-middleware/types';
import { defineSdkModule } from '@vue-storefront/next';
import { getConfigSwitcherHeader } from './utils';
import { compassModule } from '@alokai/compass/sdk';
import { STATE_PATCHES } from '@sf-modules-middleware/compass/responses/state-patches';
import { UI_COMPONENTS } from '@sf-modules-middleware/compass/responses/dynamic-ui';

export const compass = defineSdkModule(({ buildModule, config, getRequestHeaders }) =>
  buildModule(compassModule<CompassModuleTypeParams>, {
    apiUrl: `${config.apiUrl}/compass`,
    ssrApiUrl: `${config.ssrApiUrl}/compass`,
    cdnCacheBustingId: config.cdnCacheBustingId,
    defaultRequestConfig: {
      getConfigSwitcherHeader,
      headers: getRequestHeaders(),
    },
    responseSchemas: {
      statePatches: STATE_PATCHES,
      uiComponents: UI_COMPONENTS,
    },
  }),
);

+ export * from "./compass";

+ import { FRONTEND_HINTS } from '@sf-modules-middleware/compass/responses/frontend-hints';
+ import { STATE_PATCHES } from '@sf-modules-middleware/compass/responses/state-patches';
+ import { STRUCTURED_OUTPUTS } from '@sf-modules-middleware/compass/responses/structured-outputs';
+ import { UI_COMPONENTS } from '@sf-modules-middleware/compass/responses/dynamic-ui';

+ export const AI_RESPONSE_TYPES = {
+   FRONTEND_HINTS,
+   STATE_PATCHES,
+   STRUCTURED_OUTPUTS,
+   UI_COMPONENTS,
+ };

export { default } from '@/sf-modules/compass/components/search/search';

+ import AiAssistant from '@/sf-modules/compass/components/ai-assistant/ai-assistant';
+ import { CompassProvider } from '@/sf-modules/compass/contexts/compass-context';
+ import type { PropsWithChildren } from 'react';

export default function RootLayoutContentWrapper({ children }: PropsWithChildren) {
  return (
+   <CompassProvider>
+     <AiAssistant>
        {children}
+     </AiAssistant>
+   </CompassProvider>
  );
}

+ import LatestUseCases from '@sf-modules/compass/components/use-cases/latest-use-cases';

export interface ProductCardVerticalProps {
  /* ...other properties */
+ /**
+  * Show use cases ratings (uses product.$custom.description)
+  */
+ showUseCases?: boolean;
}

export default function ProductCardVertical({
  product,
  /* ...other props */
+ showUseCases,
}: ProductCardVerticalProps) {
  return (
    <>
      {/* Product Rating component */}
+     {showUseCases && (
+       <div className="mt-auto pb-2 pt-2">
+         <LatestUseCases product={product} />
+       </div>
+     )}
      {/* Decorated Price component */}
    </>
  );
}

- <ProductCardVertical /* ...other props */ />
+ <ProductCardVertical /* ...other props */ showUseCases />

+ import UseCasesManager from '@/sf-modules/compass/components/use-cases/use-cases-manager';
+ import { UseCasesProvider } from '@/sf-modules/compass/contexts/use-cases-context';

export default function ProductsListingPage(/* ...props */) {
  return (
+   <UseCasesProvider>
      {/* ... */}
      <FiltersContainer>
+       <FilterGroup title={'Use cases'}>
+         <UseCasesManager />
+       </FilterGroup>
        {/* ...other filter groups */}
      </FiltersContainer>
      {/* ... */}
+   </UseCasesProvider>
  );
}

+ import ProductListingMessage from '@/sf-modules/compass/components/ai-assistant/product-listing-message';

export default function ProductsListingPage({
  /* ...other props */
+ searchParams,
  title,
}: ProductsListingPageProps) {
  const { products } = productsCatalog;

  return (
    <>
      {/* ... */}
      <h1 data-testid="category-title">
        {title}
      </h1>
+     <ProductListingMessage products={products} searchParams={searchParams} title={title} />
      {/* ... */}
    </>
  );
}

+ import ProductMessage from '@/sf-modules/compass/components/ai-assistant/product-message';

export default function ProductPage(/* ...props */) {
  return (
    <>
      <Breadcrumbs /* ... */ />
+     <ProductMessage product={product} />
      {/* ... */}
    </>
  );
}

+ import { compassCustomFields } from '@sf-modules-middleware/compass';
+ import { methods } from '@sf-modules-middleware/compass';

export const unifiedApiExtension = createUnifiedExtension({
  // ...
+ methods: {
+   override: {
+     ...methods,
+   },
+ },
  normalizers: {
    addCustomFields: [
-     {},
+     compassCustomFields,
    ],
  },
});

  {
+   "Compass": {
+     "internalServerError": "Something went wrong. Please try again.",
+     "payloadTooLarge": "Your conversation has reached the size limit. Please start a new conversation."
+   }
  }

  {
+   "Compass": {
+     "internalServerError": "Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut.",
+     "payloadTooLarge": "Ihre Konversation hat das Größenlimit erreicht. Bitte starten Sie eine neue Konversation."
+   }
  }

+ import type bodyParserNamespace from 'body-parser';

+ const bodyParserConfig: CreateServerOptions['bodyParser'] = ({ functionName, integrationName }) => {
+   const optionsMap: Record<string, Record<string, bodyParserNamespace.OptionsJson>> = {
+     compass: {
+       devToolsImport: {
+         limit: '2mb',
+       },
+       invoke: {
+         limit: '40mb',
+       },
+     },
+   };
+
+   return (
+     optionsMap[integrationName]?.[functionName] || {
+       limit: '100kb',
+     }
+   );
+ };

async function runApp() {
  const app = await createServer(config, {
+   bodyParser: bodyParserConfig,
  });
}

  {
+   "resolutions": {
+     "zod": "4.1.12"
+   }
  }