open-index/open-npm huggingface dataset:
npm package: @sitecore-cloudsdk/core
Description: This package is for initializing the Cloud SDK and its other packages in your app.
Latest version: 0.6.1

# core

This package is for initializing the Cloud SDK and its other packages in your app.

## Installation

```bash
npm install @sitecore-cloudsdk/core
```

To initialize other Cloud SDK packages, first install them:

```bash
npm install @sitecore-cloudsdk/events
npm install @sitecore-cloudsdk/personalize
npm install @sitecore-cloudsdk/search
```

## Usage

1. Import the modules of all installed Cloud SDK packages that you want to initialize.
2. Initialize the Cloud SDK and its packages using the `CloudSDK` function, available in the `core` package.

## Code examples

Initialize the Cloud SDK and its packages on the browser side:

```tsx
'use client';

import { useEffect } from 'react';
import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
import '@sitecore-cloudsdk/events/browser';
import '@sitecore-cloudsdk/personalize/browser';

export default function Home() {
  useEffect(() => {
    CloudSDK({
      sitecoreEdgeContextId: '<YOUR_CONTEXT_ID>',
      siteName: '<YOUR_SITE_NAME>',
      enableBrowserCookie: true
    })
      .addEvents() // Initialize the `events` package.
      .addPersonalize({
        enablePersonalizeCookie: true,
        webPersonalization: true
      }) // Initialize the `personalize` package and enable web personalization.
      .addSearch() // Initialize the `search` package.
      .initialize();
  }, []);

  return <></>;
}
```

Initialize the Cloud SDK and its packages on the server side:

```ts
import type { NextRequest, NextResponse } from 'next/server';
import { CloudSDK } from '@sitecore-cloudsdk/core/server';
import '@sitecore-cloudsdk/events/server';
import '@sitecore-cloudsdk/personalize/server';

export async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  await CloudSDK(request, response, {
    sitecoreEdgeContextId: '<YOUR_CONTEXT_ID>',
    siteName: '<YOUR_SITE_NAME>',
    enableServerCookie: true
  })
    .addEvents() // Initialize the `events` package.
    .addPersonalize({ enablePersonalizeCookie: true }) // Initialize the `personalize` package.
    .addSearch() // Initialize the `search` package.
    .initialize();

  return response;
}
```

## Documentation

[Official Sitecore Cloud SDK documentation](https://doc.sitecore.com/xmc/en/developers/sdk/latest/cloud-sdk/index.html)
npm package: @sitecore-cloudsdk/events
Description: This package provides browser- and server-side functions to ​capture events in your app and send them to Sitecore. Events are for collecting behavioral data about your users as they interact with your app.
Latest version: 0.6.1

# events

This package provides browser- and server-side functions to ​capture events in your app and send them to Sitecore. Events are for collecting behavioral data about your users as they interact with your app.

## Installation

```bash
npm install @sitecore-cloudsdk/events
```

## Usage

1. Initialize the package using the `CloudSDK` function, available in the `core` package.
2. Send events using the following functions:
   - `pageView` - send a VIEW event.
   - `identity` - send an IDENTITY event.
   - `form` - send a FORM event (browser-side only).
   - `event` - send SC_SEARCH events, other standard events, or a custom event.

## Code examples

Capture and send a VIEW event from the browser side:

```tsx
'use client';

import { useEffect } from 'react';
import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
import { pageView } from '@sitecore-cloudsdk/events/browser';

export default function Home() {
  useEffect(() => {
    CloudSDK({
      /* Initialization settings. See `core` package code examples. */
    })
      .addEvents()
      .initialize();

    // Send VIEW event:
    pageView();
  }, []);

  return <></>;
}
```

Capture and send a VIEW event from the server side:

```ts
import type { NextRequest, NextResponse } from 'next/server';
import { CloudSDK } from '@sitecore-cloudsdk/core/server';
import { pageView } from '@sitecore-cloudsdk/events/server';

export async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  await CloudSDK(request, response, {
    /* Initialization settings. See `core` package code examples. */
  })
    .addEvents()
    .initialize();

  // Send VIEW event:
  await pageView(request);

  return response;
}
```

## Documentation

[Official Sitecore Cloud SDK documentation](https://doc.sitecore.com/xmc/en/developers/sdk/latest/cloud-sdk/index.html)
npm package: @sitecore-cloudsdk/personalize
Description: This package provides browser- and server-side functions to run personalizations in your app. Personalization is for showing the most relevant content to your users.
Latest version: 0.6.1

# personalize

This package provides browser- and server-side functions to run personalizations in your app. Personalization is for showing the most relevant content to your users.

## Installation

```bash
npm install @sitecore-cloudsdk/personalize
```

## Usage

1. Initialize the package using the `CloudSDK` function, available in the `core` package.
2. To run web personalization (browser-side only):
   1. Initialize the `events` package.
   2. Enable web personalization during initialization.
3. To run interactive personalization, use the `personalize` function.

## Code examples

Run personalizations from the browser side:

```ts
'use client';

import { useEffect } from 'react';
import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
import { personalize } from '@sitecore-cloudsdk/personalize/browser';

export default function Home() {
  const getPersonalizeData = async () => {
    // Run interactive personalization:
    const data = await personalize({
      channel: 'WEB',
      currency: 'EUR',
      friendlyId: '<YOUR_EXPERIENCE_FRIENDLY_ID>'
    });

    console.log(data);
  };

  useEffect(() => {
    CloudSDK({
      /* Initialization settings. See `core` package code examples. */
    })
      .addEvents() // Initialize the `events` package to enable web personalization
      .addPersonalize({ enablePersonalizeCookie: true, webPersonalization: true }) // Enable web personalization
      .initialize();

    getPersonalizeData();
  }, []);

  return <></>;
}
```

Run personalizations from the server side:

```ts
import type { NextRequest, NextResponse } from 'next/server';
import { CloudSDK } from '@sitecore-cloudsdk/core/server';
import { personalize } from '@sitecore-cloudsdk/personalize/server';

export async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  await CloudSDK(request, response, {
    /* Initialization settings. See `core` package code examples. */
  })
    .addPersonalize({ enablePersonalizeCookie: true })
    .initialize();

  // Run interactive personalization:
  const data = await personalize(request, {
    channel: 'WEB',
    currency: 'EUR',
    friendlyId: '<YOUR_EXPERIENCE_FRIENDLY_ID>'
  });

  console.log(data);

  return response;
}
```

## Documentation

[Official Sitecore Cloud SDK documentation](https://doc.sitecore.com/xmc/en/developers/sdk/latest/cloud-sdk/index.html)
npm package: @sitecore-discover/cli
Description: Sitecore Discover SDK cli
Author: Sitecore Corporation
Latest version: 1.2.4

<div align="center" style="width:100%;">
  <a href="https://doc.sitecore.com/discover/">
    <img src="https://doc.sitecore.com/img/logo.svg" alt="Logo" height="60">
  </a>
</div>
<br><br>

## Sitecore Discover JS SDK CLI

Command line tool for the Sitecore Discover React SDK.

## Installation

`npm install --save-dev @sitecore-discover/cli`

## Available commands
| Command                  | Description | Aliases |
|--------------------------|-------------|---------|
| `sc-discover new-widget` | Generates files to create a new widget | `nw` |


## Available options

| Option      | Description          |
|-------------|----------------------|
| `--version` | Shows version number |
| `-h`, `--h` | Shows help           |

### Create new widget
For widget creation, the CLI provides a command to generate the files based on the template [repository](https://d25yt10j4dyvpr.cloudfront.net/latest/storybook/index.html?path=/story/templates-introduction--page)
The command needs a file named `.sc-discover-settings.json` in the same folder as the command has been called. 
If the file does not exist, the cli will create it. 
The following is an example of how this file should look:

```json
{
    "components-path": "src-test/components"
}
```

Then, by executing `sc-discover new-widget` or `sc-discovre nw` a wizard will take over and will ask some questions for your component creation. 

![](clinw.gif)

## Sitecore Discover

Sitecore Discover lets you create best-in-class, engaging, and predictive personalized shopping experiences across all
your e-commerce channels.
Using [Discover JS SDK and UI Components packages](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
is the fastest way to integrate Discover experiences into your React applications. The two packages are exclusively
created for React. You can install them in your project to access their contents. At compile time, the JS SDK is
integrated into your React browser application.

The Discover JS SDK package contains components, functions, and query hooks.

For rapid integration, you can install
the [Sitecore Discover UI components](https://www.npmjs.com/package/@sitecore-discover/ui) package
which contains headless primitives and widget templates for your React application.

## Get started

You can get started with the [Discover JS SDK starter site](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit).
Download the repository and customize.

## Documentation

- [Preparing data feeds and setting up for integration](https://doc.sitecore.com/discover/en/developers/discover-developer-guide/index-en.html?contentId=introduction)
- [Details on components, functions, query hooks, templates, and ui primitives](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
- [Discover UI Components reference site](https://developers.sitecorecloud.io/discover-sdk/react/1.x-alpha/storybook/index.html?path=/docs/introduction--page)
npm package: @sitecore-discover/common
Description: Common Sitecore Discover SDK
Author: Sitecore Corporation
Latest version: 1.2.4

<div align="center" style="width:100%;">
  <a href="https://doc.sitecore.com/discover/">
    <img src="https://doc.sitecore.com/img/logo.svg" alt="Logo" height="60">
  </a>
</div>
<br><br>

## Sitecore Discover JS Common SDK

Sitecore Discover lets you create best-in-class, engaging, and predictive personalized shopping experiences across all
your e-commerce channels.
Using [Discover JS SDK and UI Components packages](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
is the fastest way to integrate Discover experiences into your React applications. The two packages are exclusively
created for React. You can install them in your project to access their contents. At compile time, the JS SDK is
integrated into your React browser application.

The Discover JS SDK package contains components, functions, and query hooks.

For rapid integration, you can install
the [Sitecore Discover UI components](https://www.npmjs.com/package/@sitecore-discover/ui) package
which contains headless primitives and widget templates for your React application.

## Get started

You can get started with the [Discover JS SDK starter site](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit).
Download the repository and customize.

## Documentation

- [Preparing data feeds and setting up for integration](https://doc.sitecore.com/discover/en/developers/discover-developer-guide/index-en.html?contentId=introduction)
- [Details on components, functions, query hooks, templates, and ui primitives](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
- [Discover UI Components reference site](https://developers.sitecorecloud.io/discover-sdk/react/1.x-alpha/storybook/index.html?path=/docs/introduction--page)
npm package: @sitecore-discover/core
Description: Core Sitecore Discover SDK
Author: Sitecore Corporation
Latest version: 1.2.4

<div align="center" style="width:100%;">
  <a href="https://doc.sitecore.com/discover/">
    <img src="https://doc.sitecore.com/img/logo.svg" alt="Logo" height="60">
  </a>
</div>
<br><br>

## Sitecore Discover JS Core SDK

Sitecore Discover lets you create best-in-class, engaging, and predictive personalized shopping experiences across all
your e-commerce channels.
Using [Discover JS SDK and UI Components packages](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
is the fastest way to integrate Discover experiences into your React applications. The two packages are exclusively
created for React. You can install them in your project to access their contents. At compile time, the JS SDK is
integrated into your React browser application.

The Discover JS SDK package contains components, functions, and query hooks.

For rapid integration, you can install
the [Sitecore Discover UI components](https://www.npmjs.com/package/@sitecore-discover/ui) package
which contains headless primitives and widget templates for your React application.

## Get started

You can get started with the [Discover JS SDK starter site](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit).
Download the repository and customize.

## Documentation

- [Preparing data feeds and setting up for integration](https://doc.sitecore.com/discover/en/developers/discover-developer-guide/index-en.html?contentId=introduction)
- [Details on components, functions, query hooks, templates, and ui primitives](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
- [Discover UI Components reference site](https://developers.sitecorecloud.io/discover-sdk/react/1.x-alpha/storybook/index.html?path=/docs/introduction--page)
npm package: @sitecore-discover/data
Description: Data Sitecore Discover SDK
Author: Sitecore Corporation
Latest version: 1.2.4

<div align="center" style="width:100%;">
  <a href="https://doc.sitecore.com/discover/">
    <img src="https://doc.sitecore.com/img/logo.svg" alt="Logo" height="60">
  </a>
</div>
<br><br>

## Sitecore Discover JS Data SDK

Sitecore Discover lets you create best-in-class, engaging, and predictive personalized shopping experiences across all
your e-commerce channels.
Using [Discover JS SDK and UI Components packages](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
is the fastest way to integrate Discover experiences into your React applications. The two packages are exclusively
created for React. You can install them in your project to access their contents. At compile time, the JS SDK is
integrated into your React browser application.

The Discover JS SDK package contains components, functions, and query hooks.

For rapid integration, you can install
the [Sitecore Discover UI components](https://www.npmjs.com/package/@sitecore-discover/ui) package
which contains headless primitives and widget templates for your React application.

## Get started

You can get started with the [Discover JS SDK starter site](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit).
Download the repository and customize.

## Documentation

- [Preparing data feeds and setting up for integration](https://doc.sitecore.com/discover/en/developers/discover-developer-guide/index-en.html?contentId=introduction)
- [Details on components, functions, query hooks, templates, and ui primitives](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
- [Discover UI Components reference site](https://developers.sitecorecloud.io/discover-sdk/react/1.x-alpha/storybook/index.html?path=/docs/introduction--page)
npm package: @sitecore-discover/models
Description: Models Sitecore Discover SDK
Author: Sitecore Corporation
Latest version: 1.2.4

<div align="center" style="width:100%;">
  <a href="https://doc.sitecore.com/discover/">
    <img src="https://doc.sitecore.com/img/logo.svg" alt="Logo" height="60">
  </a>
</div>
<br><br>

## Sitecore Discover JS Models SDK

Sitecore Discover lets you create best-in-class, engaging, and predictive personalized shopping experiences across all
your e-commerce channels.
Using [Discover JS SDK and UI Components packages](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
is the fastest way to integrate Discover experiences into your React applications. The two packages are exclusively
created for React. You can install them in your project to access their contents. At compile time, the JS SDK is
integrated into your React browser application.

The Discover JS SDK package contains components, functions, and query hooks.

For rapid integration, you can install
the [Sitecore Discover UI components](https://www.npmjs.com/package/@sitecore-discover/ui) package
which contains headless primitives and widget templates for your React application.

## Get started

You can get started with the [Discover JS SDK starter site](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit).
Download the repository and customize.

## Documentation

- [Preparing data feeds and setting up for integration](https://doc.sitecore.com/discover/en/developers/discover-developer-guide/index-en.html?contentId=introduction)
- [Details on components, functions, query hooks, templates, and ui primitives](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
- [Discover UI Components reference site](https://developers.sitecorecloud.io/discover-sdk/react/1.x-alpha/storybook/index.html?path=/docs/introduction--page)
npm package: @sitecore-discover/preact
Description: Sitecore Discover SDK for Preact
Author: Sitecore Corporation
Latest version: 1.2.4

<div align="center" style="width:100%;">
  <a href="https://doc.sitecore.com/discover/">
    <img src="https://doc.sitecore.com/img/logo.svg" alt="Logo" height="60">
  </a>
</div>
<br><br>

## Sitecore Discover JS SDK for Preact

Sitecore Discover lets you create best-in-class, engaging, and predictive personalized shopping experiences across all
your e-commerce channels.
Using [Discover JS SDK and UI Components packages](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
is the fastest way to integrate Discover experiences into your Preact applications. The two packages are exclusively
created for Preact. You can install them in your project to access their contents. At compile time, the JS SDK is
integrated into your Preact browser application.

The Discover JS SDK package contains components, functions, and query hooks.

For rapid integration, you can install
the [Sitecore Discover UI components](https://www.npmjs.com/package/@sitecore-discover/ui) package
which contains headless primitives and widget templates for your React application.

## Get started

You can get started with the [Discover JS SDK starter site](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit).
Download the repository and customize.

## Documentation

- [Preparing data feeds and setting up for integration](https://doc.sitecore.com/discover/en/developers/discover-developer-guide/index-en.html?contentId=introduction)
- [Details on components, functions, query hooks, templates, and ui primitives](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
- [Discover UI Components reference site](https://developers.sitecorecloud.io/discover-sdk/react/1.x-alpha/storybook/index.html?path=/docs/introduction--page)
npm package: @sitecore-discover/react
Description: Sitecore Discover SDK for React
Author: Sitecore Corporation
Latest version: 1.2.4

<div align="center" style="width:100%;">
  <a href="https://doc.sitecore.com/discover/">
    <img src="https://doc.sitecore.com/img/logo.svg" alt="Logo" height="60">
  </a>
</div>
<br><br>

## Sitecore Discover JS SDK for React

Sitecore Discover lets you create best-in-class, engaging, and predictive personalized shopping experiences across all
your e-commerce channels.
Using [Discover JS SDK and UI Components packages](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
is the fastest way to integrate Discover experiences into your React applications. The two packages are exclusively
created for React. You can install them in your project to access their contents. At compile time, the JS SDK is
integrated into your React browser application.

The Discover JS SDK package contains components, functions, and query hooks.

For rapid integration, you can install the [Sitecore Discover UI components](https://www.npmjs.com/package/@sitecore-discover/ui) package
which contains headless primitives and widget templates for your React application.

## Get started

You can get started with the [Discover JS SDK starter site](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit). Download the repository and customize.

## Documentation

- [Preparing data feeds and setting up for integration](https://doc.sitecore.com/discover/en/developers/discover-developer-guide/index-en.html?contentId=introduction)
- [Details on components, functions, query hooks, templates, and ui primitives](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
- [Discover UI Components reference site](https://developers.sitecorecloud.io/discover-sdk/react/1.x-alpha/storybook/index.html?path=/docs/introduction--page)
npm package: @sitecore-discover/ui
Description: UI Sitecore Discover SDK
Author: Sitecore Corporation
Latest version: 1.2.4

<div align="center" style="width:100%;">
  <a href="https://doc.sitecore.com/discover/">
    <img src="https://doc.sitecore.com/img/logo.svg" alt="Logo" height="60">
  </a>
</div>
<br><br>

## Sitecore Discover UI Components for React

Sitecore Discover lets you create best-in-class, engaging, and predictive personalized shopping experiences across all
your e-commerce channels.
Using [Discover JS SDK and UI Components packages](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
is the fastest way to integrate Discover experiences into your React applications. The two packages are exclusively
created for React. You can install them in your project to access their contents. At compile
time, [Discover JS SDK](https://www.npmjs.com/package/@sitecore-discover/react) is integrated into your React browser application.

## Get started

You can get started with the [Discover JS SDK starter site](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit). Download the repository and customize.

## Documentation

- [Preparing data feeds and setting up for integration](https://doc.sitecore.com/discover/en/developers/discover-developer-guide/index-en.html?contentId=introduction)
- [Details on components, functions, query hooks, templates, and ui primitives](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
- [Discover UI Components reference site](https://developers.sitecorecloud.io/discover-sdk/react/1.x-alpha/storybook/index.html?path=/docs/introduction--page)
npm package: @sitecore-discover/widgets
Description: Widgets Sitecore Discover SDK
Author: Sitecore Corporation
Latest version: 1.2.4

<div align="center" style="width:100%;">
  <a href="https://doc.sitecore.com/discover/">
    <img src="https://doc.sitecore.com/img/logo.svg" alt="Logo" height="60">
  </a>
</div>
<br><br>

## Sitecore Discover JS Widgets SDK

Sitecore Discover lets you create best-in-class, engaging, and predictive personalized shopping experiences across all
your e-commerce channels.
Using [Discover JS SDK and UI Components packages](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
is the fastest way to integrate Discover experiences into your React applications. The two packages are exclusively
created for React. You can install them in your project to access their contents. At compile time, the JS SDK is
integrated into your React browser application.

The Discover JS SDK package contains components, functions, and query hooks.

For rapid integration, you can install
the [Sitecore Discover UI components](https://www.npmjs.com/package/@sitecore-discover/ui) package
which contains headless primitives and widget templates for your React application.

## Get started

You can get started with the [Discover JS SDK starter site](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit).
Download the repository and customize.

## Documentation

- [Preparing data feeds and setting up for integration](https://doc.sitecore.com/discover/en/developers/discover-developer-guide/index-en.html?contentId=introduction)
- [Details on components, functions, query hooks, templates, and ui primitives](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/index-en.html?contextId=introduction)
- [Discover UI Components reference site](https://developers.sitecorecloud.io/discover-sdk/react/1.x-alpha/storybook/index.html?path=/docs/introduction--page)