AI 功能Ask Fern设置

独立搜索组件

以 Markdown 格式查看

@fern-api/search-widget 包提供了一个独立的 React 组件，可以将 Ask Fern 的 AI 驱动搜索功能带到您的 Fern Docs 网站之外的任何 React 应用程序中。在您的仪表板、营销网站或内部工具中嵌入搜索模态框，让用户无需离开其工作流程即可找到相关文档。

嵌入在仪表板中的搜索组件。试用在线演示或浏览演示源码。

前提条件

  • React 19 — 所有其他依赖项都已打包。
  • 启用了 Ask Fern 的实时云托管 Fern Docs 站点 — 该组件在运行时连接到您已发布的文档站点。不支持自托管和本地预览环境。
  • 公开文档 — 该组件仅支持公开文档。如果您的站点使用身份验证，该组件将仅返回未经身份验证的结果。

快速开始

1

安装包

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

添加搜索模态框

导入 SearchModal 和打包的样式，然后使用您的文档域名渲染组件。该组件会渲染一个按钮，点击时打开搜索模态框。

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      搜索文档
8    </SearchModal>
9  );
10}
3

自定义触发按钮

SearchModal 组件会渲染一个打开搜索模态框的按钮。使用 className、style 或定位默认的 fern-search-button 类来设置样式。所有标准的 HTML 按钮属性都会被转发。

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

属性

还支持所有标准的 HTML 按钮属性，并转发到触发按钮。

domain
stringRequired

您已发布的 Fern Docs 站点的 URL（例如，https://docs.example.com）。如果您的文档不在根目录，请包含完整路径（例如，https://buildwithfern.com/learn）。

lang
stringDefaults to en

搜索界面的语言代码。

icon
React.ReactNode

在按钮中显示的图标元素。

className
string

触发按钮的 CSS 类名。

style
React.CSSProperties

触发按钮的内联样式。

children
React.ReactNode

按钮内容（文本、图标等）。

disabled
boolean

禁用按钮。

onClick
function

在模态框打开之前运行的额外点击处理程序。