# Setup

Source: https://docs.interop.io/browser/capabilities/search/setup/index.html

## Overview

The Search API offers two distinct functionalities: you can use it to create both search providers and search clients. Search providers are apps that respond to search queries, whereas search clients are apps that initiate searches. For instance, a search provider may return a list of instruments as a response to a search query, and may also support one or more actions - like showing a chart for the selected instrument. Actions may be executed when the user clicks on a result in the UI of a search client app. You may present multiple actions as options to the user via the search client UI, so that they may choose how to handle the search result depending on their current needs. The Search API also enables you to define search types, set debounce time for search queries, set limits for search results and more.

## Enabling Search

To be able to use the Search API in your interop-enabled apps, install the [`@interopio/search-api`](https://www.npmjs.com/package/@interopio/search-api) library in your project and reference it in your app. Depending on whether you want to use the Search API in your [Main app](https://docs.interop.io/browser/developers/browser-platform/overview/index.md), or in a [Browser Client](https://docs.interop.io/browser/developers/browser-client/overview/index.md) app, see the respective initialization examples in the following sections.

## Main App

Install the necessary packages:

```cmd
npm install @interopio/browser-platform @interopio/search-api
```

Initialize the [`@interopio/browser-platform`](https://www.npmjs.com/package/@interopio/browser-platform) library and enable the Search API by passing the `IOSearch()` factory function to the `libraries` array of the configuration object:

```javascript
import IOBrowserPlatform from "@interopio/browser-platform";
import IOSearch from "@interopio/search-api";

const config = {
    licenseKey: "my-license-key",
    browser: {
        libraries: [IOSearch]
    }
};

const { io } = await IOBrowserPlatform(config);

// Now you can access the Search API via `io.search`.
```

## Browser Clients

To enable the Search API in your [Browser Client](https://docs.interop.io/browser/developers/browser-client/overview/index.md) apps, install the [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) and [`@interopio/search-api`](https://www.npmjs.com/package/@interopio/search-api) libraries and initialize the [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) library by passing the `IOSearch()` factory function in the configuration object. When `IOBrowser()` resolves, the Search API will be accessible via the `search` property of the returned object - e.g., `io.search`. The following examples demonstrate how to enable the Search API in JavaScript, React, and Angular apps.

### JavaScript

Install the necessary packages:

```cmd
npm install @interopio/browser @interopio/search-api
```

Initialize the [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) library and pass the `IOSearch()` factory function to the `libraries` array of the configuration object for initializing the library:

```javascript
import IOBrowser from "@interopio/browser";
import IOSearch from "@interopio/search-api";

const config = {
    libraries: [IOSearch]
};

const io = await IOBrowser(config);

// Now you can access the Search API via `io.search`.
```

By default, the `IOBrowser()` and `IOSearch()` factory functions are injected in the global `window` object.

### React

Install the necessary packages:

```cmd
npm install @interopio/react-hooks @interopio/search-api
```

Initialize the [`@interopio/react-hooks`](https://www.npmjs.com/package/@interopio/react-hooks) library in one of the following ways and pass the `IOSearch()` factory function to the `libraries` array of the configuration object for initializing the library.

- using the `<IOConnectProvider />` component:

```javascript
import { createRoot } from "react-dom/client";
import { IOConnectProvider } from "@interopio/react-hooks";
import IOBrowser from "@interopio/browser";
import IOSearch from "@interopio/search-api";

const settings = {
    browser: {
        factory: IOBrowser,
        config: {
            libraries: [IOSearch]
        }
    }
};

const domElement = document.getElementById("root");
const root = createRoot(domElement);

root.render(
    <IOConnectProvider fallback={<h2>Loading...</h2>} settings={settings}>
        <App />
    </IOConnectProvider>
);
```

-  using the `useIOConnectInit()` hook:

```javascript
import { useIOConnectInit } from "@interopio/react-hooks";
import IOBrowser from "@interopio/browser";
import IOSearch from "@interopio/search-api";

const App = () => {
    const settings = {
        browser: {
            factory: IOBrowser,
            config: {
                libraries: [IOSearch]
            }
        }
    };

    const io = useIOConnectInit(settings);

    return io ? <Main io={io} /> : <Loader />;
};

export default App;
```

### Angular

Install the necessary packages:

```cmd
npm install @interopio/ng @interopio/search-api
```

Initialize the [`@interopio/ng`](https://www.npmjs.com/package/@interopio/ng) library and pass the `IOSearch()` factory function to the `libraries` array of the configuration object for initializing the library.

In `app.config.ts` of the Browser Client app:

```typescript
import { ApplicationConfig } from "@angular/core";
import { provideIoConnect } from "@interopio/ng";
import IOBrowser, { IOConnectBrowser } from "@interopio/browser";
import IOSearch from "@interopio/search-api";

const config: IOConnectBrowser.Config = {
    libraries: [IOSearch]
};

export const appConfig: ApplicationConfig = {
    providers: [
        provideIoConnect({
            browser: {
                factory: IOBrowser,
                config
            }
        })
    ]
};
```

> ℹ️ *For more details on initializing and configuring the `@interopio/ng` library depending on whether you are using Angular standalone components or modules, see the [Developers > Browser Client > Angular](https://docs.interop.io/browser/developers/browser-client/angular/index.md) section.*