> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Standalone widgets

> Embed Fern's AI-powered search and Ask AI chat in any React application using the @fern-api/search-widget package.

The [`@fern-api/search-widget`](https://www.npmjs.com/package/@fern-api/search-widget) package provides standalone React components that search and answer questions from your documentation anywhere outside your Fern Docs site. Embed them in your dashboard, marketing site, or internal tool so users can get answers without leaving their workflow.

The package ships two components:

* [`SearchModal`](/learn/docs/ai-features/search-widget/search-modal), a modal that opens over the page and combines keyword search with AI chat
* [`AskAiChat`](/learn/docs/ai-features/search-widget/ask-ai-chat), a sidebar panel with AI chat (no keyword search), with floating, inline, and custom trigger options

#### SearchModal

#### AskAiChat

## Prerequisites

* **React 19** — all other dependencies are bundled.
* **A live, cloud-hosted Fern Docs site with [Ask Fern enabled](/learn/docs/ai-features/ask-fern/overview)** — the widget connects to your published docs site at runtime. Self-hosted and local preview environments aren't supported.
* **Public documentation** — the widget only supports public docs. If your site uses [authentication](/learn/docs/authentication/overview), the widget will only return unauthenticated results.

## Installation

Both components ship in the same package:

**`npm`**

```bash npm
npm install @fern-api/search-widget react@19 react-dom@19
```

**`pnpm`**

```bash pnpm
pnpm add @fern-api/search-widget react@19 react-dom@19
```

**`yarn`**

```bash yarn
yarn add @fern-api/search-widget react@19 react-dom@19
```

The package is approximately 2 MB (JS + CSS combined).

Then follow the component page for usage, customization, and the full list of properties:

#### [Search modal with AI chat](/learn/docs/ai-features/search-widget/search-modal)

`SearchModal`, a modal combining keyword search with AI chat.

#### [Ask AI chat panel](/learn/docs/ai-features/search-widget/ask-ai-chat)

`AskAiChat`, a sidebar chat panel with floating, inline, and custom triggers.

## Content Security Policy

If your application enforces a Content Security Policy, allow the widget's runtime requests in `connect-src`:

* Your published docs origin (the `domain` prop), which serves the search key, chat, and facet endpoints under `/api/fern-docs/search/v2/`.
* Algolia's search hosts, which the widget queries directly. The app ID is part of the host name and Algolia rotates across fallback hosts, so allowlist the wildcards rather than individual hosts.
* `https://fai.buildwithfern.com`, which receives answer ratings from `AskAiChat`.

```http
Content-Security-Policy: connect-src 'self' https://docs.example.com https://*.algolia.net https://*.algolianet.com https://fai.buildwithfern.com;
```

Replace `https://docs.example.com` with your `domain`. The Algolia wildcards cover the hosts the widget resolves at runtime: `<app-id>-dsn.algolia.net` and `<app-id>-1.algolianet.com` through `<app-id>-3.algolianet.com`.

> Embed Fern's AI-powered search and Ask AI chat in any React application using the @fern-api/search-widget package.