AI 功能Ask Fern设置Standalone widgets

Search modal with AI chat

以 Markdown 格式查看

SearchModal renders a trigger button that opens a modal over the page, combining keyword search with AI chat. It’s one of the two components in the @fern-api/search-widget package, which covers the prerequisites and the Content Security Policy the widget needs.

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

Setup

1

Install the package

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

Render the modal

Import the component and the bundled styles, then render it with your docs domain. The component renders its own trigger button, and citations in its answers link to your docs domain and open in a new tab.

1import { SearchModal } from '@fern-api/search-widget';
2import '@fern-api/search-widget/styles';
3
4function App() {
5  return (
6    <SearchModal domain="https://docs.example.com" lang="en">
7      Search Docs
8    </SearchModal>
9  );
10}
3

Style the trigger

Style the trigger button with className, style, or by targeting the default fern-search-button class.

1<SearchModal
2  domain="https://docs.example.com"
3  lang="en"
4  className="my-search-button"
5>
6  Search Docs
7</SearchModal>

Properties

All standard HTML button attributes are also supported and forwarded to the trigger button.

domain
stringRequired

The URL of your published Fern Docs site (for example, https://docs.example.com). Include the full path if your docs aren’t at the root (for example, https://buildwithfern.com/learn).

lang
stringDefaults to en

Language code for the interface.

icon
React.ReactNode

Icon element to display in the trigger button.

children
React.ReactNode

Trigger button content (text, icons, etc.).

className
string

CSS class names for the trigger button.

style
React.CSSProperties

Inline styles for the trigger button.

disabled
boolean

Disables the button.

onClick
function

Additional handler that runs before the modal opens.