AI featuresAsk FernSetupStandalone widgets

Standalone widgets

View as Markdown

The @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, a modal that opens over the page and combines keyword search with AI chat
  • AskAiChat, a sidebar panel with AI chat (no keyword search), with floating, inline, and custom trigger options
SearchModal

The SearchModal component embedded in a dashboard. Try the live demo or browse the demo source.

The AskAiChat component embedded in a marketing site.

Prerequisites

  • React 19 — all other dependencies are bundled.
  • A live, cloud-hosted Fern Docs site with Ask Fern enabled — 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, the widget will only return unauthenticated results.

Installation

Both components ship in the same package:

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

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

Search modal with AI chat

SearchModal, a modal combining keyword search with AI chat.

Ask AI chat panel

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.
1Content-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.