# Installation & Integration

This document describes how to integrate the AI Powered Search package into Next.js projects for all brands. It is prepared to enable technical teams to perform a fast and standardized integration.

***

## <mark style="color:$primary;">1. Package Installation</mark>

```bash
yarn add git+https://bitbucket.org/akinonteam/samanlik-client-js.git
```

***

## <mark style="color:$primary;">2. Environment Variables</mark>

#### Required

```env
SAMANLIK_API_URL=https://<ai-powered-search-api-url>
```

#### Optional

The following variables are optional. Default values are used if not defined.

| Variable                 | Default   |
| ------------------------ | --------- |
| `SAMANLIK_FALLBACK_PATH` | `/list/`  |
| `SAMANLIK_PREFIX_PATH`   | *(empty)* |
| `SAMANLIK_LANGUAGE`      | `tr`      |
| `SAMANLIK_TIMEOUT`       | `5000`    |

***

## <mark style="color:$primary;">3. Creating the Server Action</mark>

Create the file `src/views/header/samanlik-client.tsx`:

```tsx
'use server';

import { getNavigationAction } from 'samanlik-client';
import { ROUTES } from '@theme/routes';

const fetchSearchRedirectionResult = async (search_text: string) => {
  const params = new URLSearchParams();
  params.append('search_text', search_text);

  if (process.env.SAMANLIK_API_URL === undefined) {
    return { url_path: `${ROUTES.LIST}/?${params.toString()}` };
  }

  try {
    const result = await getNavigationAction(search_text);

    if (result.error || !result.url_path) {
      console.error('AI Powered Search API Error:', result.error);
      return { url_path: `${ROUTES.LIST}/?${params.toString()}` };
    }

    return { url_path: result.url_path };
  } catch (error) {
    console.error('AI Powered Search fetch error:', error);
    return { url_path: `${ROUTES.LIST}/?${params.toString()}` };
  }
};

export default fetchSearchRedirectionResult;
```

***

## <mark style="color:$primary;">4. Search Component Integration</mark>

#### Import

```tsx
import fetchSearchRedirectionResult from '../samanlik-client';
```

#### Usage

* The AI Powered Search API call must be added to the `handleSearchQuery` function.
* On a successful response, redirect using `router.push(data.url_path)`.
* On error, the user is redirected to the list page as a fallback.

***

## <mark style="color:$primary;">5. File Structure</mark>

```
src/views/header/
├── samanlik-client.tsx
├── search/
│   └── index.tsx
└── index.tsx
```

***

## <mark style="color:$primary;">6. Testing</mark>

1. Start the project with `yarn dev`.
2. Enter test queries into the search box (e.g. `polo`, `tişört`, `ayakkabı`).
3. Verify that the redirect works correctly.
4. Test the fallback redirect in case of an API error.