docs: adjust createAlokaiContext method (#7363)

Author: Szymon-dziewonski

Diff for: docs/content/4.sdk/2.getting-started/1.index.md

@@ -6,7 +6,7 @@ If you're setting your Alokai application from scratch, you'll need to configure
 In the examples below, we assume that you have an Alokai app with the Unified Data Model. However, the approach for non-unified Alokai applications is similar.
 :::
 
-There are various ways to configure the SDK, depending on your chosen framework. For Next.js and Nuxt, you can use the `@vue-storefront/next` and `@vue-storefront/nuxt` packages respectively. 
+There are various ways to configure the SDK, depending on your chosen framework. For Next.js and Nuxt, you can use the `@vue-storefront/next` and `@vue-storefront/nuxt` packages respectively.
 These packages also provide tools for handling the global state management.
 
 If you're looking for framework agnostic experience, you can use the `@vue-storefront/sdk` package.
@@ -174,15 +174,34 @@ To use it, you'll need to create a new file in your application, for example `sd
 'use client';
 
 import { createAlokaiContext } from '@vue-storefront/next/client';
+import type { SfContract } from 'storefront-middleware/types';
 
 import type { Sdk } from './sdk.server';
 
-export const { AlokaiProvider, useSdk } = createAlokaiContext<Sdk>();
+export const {
+  AlokaiProvider,
+  useSdk,
+  useSfCartState,
+  useSfCurrenciesState,
+  useSfCurrencyState,
+  useSfCustomerState,
+  useSfLocaleState,
+  useSfLocalesState,
+} = createAlokaiContext<Sdk, SfContract>();
 ```
 
-This is also a place where you can import hooks for handling the state management. You can read more about the state management in the [State Management](/sdk/getting-started/state-management) page.
+The `SfContract` interface is used to define the contract between the SDK and the state management. It contains the types for:
 
-Once you have created the Alokai context, you can create client-side SDK instance and register it in your application. 
+- cart (`SfCart` type)
+- customer (`SfCurrency` type)
+- currency (`SfCurrency` type)
+- locale (`SfLocale` type)
+
+This is needed to ensure that the state management is aware of the types that you have within the middleware, as those types can be changed within the middleware.
+
+You can read more about the state management in the [State Management](/sdk/getting-started/state-management) page.
+
+Once you have created the Alokai context, you can create client-side SDK instance and register it in your application.
 
 You can do it in two steps: