diff --git a/packages/storefront/packages/next/src/sdk/client.tsx b/packages/storefront/packages/next/src/sdk/client.tsx
index 1bd93871ef7..189470095cc 100644
--- a/packages/storefront/packages/next/src/sdk/client.tsx
+++ b/packages/storefront/packages/next/src/sdk/client.tsx
@@ -5,6 +5,24 @@ import Script from "next/script";
 import React, { createContext, useContext } from "react";
 import { SdkProviderProps } from "./types";
 
+/**
+ * Creates a new SDK context. This function is dedicated for the client-side usage.
+ *
+ * @example
+ * Create a new SDK context somewhere in your application. It may be the `hooks/sdk.ts` file.
+ *
+ * ```tsx
+ * import { createSdkContext } from "@vue-storefront/next/client";
+ * import { getSdk } from "../../sdk.config.ts";
+ *
+ * export const [SdkProvider, useSdk] = createSdkContext(getSdk());
+ * ```
+ * Then use the `SdkProvider` in the root component of your application.
+ * For Pages Router it would be the `pages/_app.tsx` file,
+ * and for the App Router it would be the `app/layout.tsx` file.
+ * Finally you can use the `useSdk` in any client component of your application.
+ * @returns [SdkProvider, useSdk] - The SDK provider and the `useSdk` hook.
+ */
 export function createSdkContext<TSdk extends SDKApi<any>>(sdk: TSdk) {
   const SdkContext = createContext<TSdk>(sdk);