---
title: "Copy the search component from the starter kit"
slug: "copy-the-search-component-from-the-starter-kit"
abstract: "The procedural steps followed to copy the search component from the starter kit."
---
# Copy the search component from the starter kit

> [!important]
> Feature availability is part of a phased rollout. Your organization may not see the search experience functionality yet. It will become available when your environment is included in the rollout.

Before you can start working with search experiences in SitecoreAI, you must either be working with the latest starter kit version, or copy the search component into your project.

This topic describes how to copy the search component from the latest starter kit template and add it to your own SitecoreAI project.

If you would like to start a new project with this starter kit enabled, create a "fork of starters" repository from the source-main branch.

> [!note]
> See Content SDK's [Search API](https://doc.sitecore.com/sai/en/developers/content-sdk/search-api.html) for more information on the underlying search capabilities, and [Search hooks](https://doc.sitecore.com/sai/en/developers/content-sdk/search-hooks-for-react-and-next-js.html) for implementing search in React and Next.js projects.

## Copy the search component from the starter kit to an existing project

From the starter kit `main` branch, copy the following into your rendering host project without changing the folder structure:

- The React component and its subcomponents: `/src/components/search-experience/`

Components are registered automatically once added, so no manual registration is required.

> [!important]
> Search Experience components use the Next.js `useSearchParams` hook. When integrating the component into a Next.js application, ensure that it is rendered within a React `<Suspense>` boundary. Otherwise, your application can fail during `npm run build`. For a reference implementation, see the [Product Listing starter example](https://github.com/Sitecore/xmcloud-starter-js/tree/main/examples/kit-nextjs-product-listing) in the starter repository.
>
> You can also review the [example page implementation](https://github.com/Sitecore/xmcloud-starter-js/blob/main/examples/kit-nextjs-product-listing/src/app/%5Bsite%5D/%5Blocale%5D/%5B%5B...path%5D%5D/page.tsx) that wraps the Search Experience component appropriately.

### Create templates for authored search items

To create Sitecore templates that hold authored data and enable the Search Configuration Manager Marketplace app:

1. Create a template for search experience items:
   1. For example, in `/Templates/Project/<YOUR_PROJECT>/Components/Search Experience`: Right-click **Search Experience** and then click **Insert** > **New Template**.
   2. Enter the name *Search Experience* and keep the **Base template** to its default (`Templates/System/Templates/Standard template`).
   3. Click **Next** to choose a location for the template. Choose the *Search Experience* folder you're currently in.
   4. Click **Next** to create the template.
2. Choose the newly created template and add a **Search** field (or similarly named) to store the search source ID and field mappings used by the component.
3. Set its **Type** to **Plugin** available under the **Marketplace Types** section.
4. Set the **Source** value to the **Search Configuration Manager** Marketplace application ID. This enables the **Search Configuration Manager** tab when editing the component instance.
5. Now, create a template for the rendering parameters:
   1. For example, in `/Templates/Project/<YOUR_PROJECT>/Components/Search Experience/Rendering Parameters`: Right-click **Rendering Parameters** and then click **Insert** > **New Template**.
   2. Enter the name *Search Experience Parameters* and set the **Base template** to `/Templates/Foundation/Headless Experience Accelerator/Presentation/Rendering Parameters/Base Rendering Parameters`
   3. Click **Next** to choose a location for the template. Choose the *Rendering Parameters* folder you're currently in.
   4. Click **Next** to create the template.
6. Choose the newly created template and add a **columns** field. This provides a configurable *columns* parameter in the Page builder.

### Create the SearchExperience rendering item

To create a rendering item that describes how SitecoreAI should instantiate the React component.

1. In the **Content Editor**, in `/sitecore/layout/Renderings/Project/<YOUR_PROJECT>/Search Experience`, create a rendering named **SearchExperience**.
2. In the **Parameters Template** field, enter the `Search Experience Parameters` parameters template you created in the previous procedure.
3. In the **Datasource Location** field, enter a fixed path or query such as `./ancestor-or-self::*[@@templatename='Home']/*[@@templatename='Search Experiences']`
4. In the **Datasource Template** field, enter the `Search Experience` template created above.
5. In the **Component Name** field, enter `SearchExperience`, or the exact name you registered above.
6. Click **Save**.

### Make the rendering available to content authors

To add the rendering to the site so authors can insert it in **Page builder**:

1. Open your site’s Home item (or site definition item).
2. Click **Presentation** > **Available Renderings**.
3. Add `SearchExperience` to the appropriate group. For example, **Components** > **Search**.
4. Click **Save** and then **Publish**.

After copying the search component into your project, you can proceed to create a source.