diff --git a/fern/products/ask-fern/ask-fern.yml b/fern/products/ask-fern/ask-fern.yml index cda99036e..667c49d79 100644 --- a/fern/products/ask-fern/ask-fern.yml +++ b/fern/products/ask-fern/ask-fern.yml @@ -31,6 +31,8 @@ navigation: path: ./pages/features/rbac.mdx - page: Ask Fern Slack app path: ./pages/features/slack-app.mdx + - page: Standalone search widget + path: ./pages/features/search-widget.mdx - api: API reference api-name: fai paginated: true diff --git a/fern/products/ask-fern/pages/features/search-widget.mdx b/fern/products/ask-fern/pages/features/search-widget.mdx new file mode 100644 index 000000000..488baa4e4 --- /dev/null +++ b/fern/products/ask-fern/pages/features/search-widget.mdx @@ -0,0 +1,182 @@ +--- +title: Standalone search widget +description: Embed Ask Fern's AI-powered search in any React application with the standalone search widget. +--- + +The standalone search widget lets you embed Ask Fern's AI-powered search capabilities in any React application outside of your Fern documentation site. This is useful for adding documentation search to your main product, dashboard, or support portal. + + + The search widget requires React 19. All other dependencies are bundled with the package. + + +## Installation + +Install the package and its peer dependencies: + + + +```bash +npm install @fern-api/search-widget react react-dom +``` + + +```bash +pnpm add @fern-api/search-widget react react-dom +``` + + + +## Usage + +Import the component and styles, then add the `SearchModal` component to your application: + +```jsx +import { SearchModal } from '@fern-api/search-widget'; +import '@fern-api/search-widget/styles'; + +function App() { + return ( +
+ + Search Documentation + +
+ ); +} +``` + +The `SearchModal` component renders a button that opens a search modal when clicked. The modal provides the same AI-powered search experience as your Fern documentation site. + +## Props + +The `SearchModal` component accepts the following props: + +| Prop | Type | Required | Description | +|------|------|----------|-------------| +| `domain` | `string` | Yes | The documentation domain to search against (e.g., `"https://buildwithfern.com/learn"`) | +| `lang` | `string` | No | Language code for the search interface. Defaults to `"en"` | +| `icon` | `React.ReactNode` | No | Icon element to display in the button | +| `className` | `string` | No | Additional CSS classes for the button | +| `style` | `object` | No | Inline styles for the button | +| `children` | `React.ReactNode` | No | Button content (text, icons, etc.) | + +All standard HTML button props are also supported and forwarded to the trigger button. + +## Styling the button + +You can style the trigger button using inline styles, CSS classes, or the default class. + +### Inline styles + +```jsx + + Search Documentation + +``` + +### CSS classes + +```jsx + + Search + +``` + +```css +.my-search-button { + padding: 0.75rem 1.5rem; + background: #2563eb; + color: white; + border: none; + border-radius: 6px; +} +``` + +### Default class + +The button has a `fern-search-button` class that you can target in your stylesheets: + +```css +.fern-search-button { + padding: 0.75rem 1.5rem; + background: #2563eb; + color: white; +} +``` + +## Complete example + +```jsx +import { SearchModal } from '@fern-api/search-widget'; +import '@fern-api/search-widget/styles'; + +function App() { + return ( +
+
+

My Application

+ + Search Docs + +
+
+ ); +} + +export default App; +``` + +## Features + +The search widget includes the following features: + +- **AI-powered search**: Natural language search with AI-generated responses +- **Real-time results**: Fast search results as you type +- **Code highlighting**: Syntax-highlighted code blocks in search results +- **Keyboard navigation**: Full keyboard support for navigation +- **Responsive design**: Works on desktop and mobile devices + +## Troubleshooting + +### Styles not loading + +Make sure you import the CSS file: + +```jsx +import '@fern-api/search-widget/styles'; +``` + +### Button not visible + +The button shows "Loading..." while fetching API keys. If it disappears, check that the `domain` prop is a valid documentation site URL and that network requests to `${domain}/api/fern-docs/search/api-key` succeed. + +### Modal not opening + +Ensure React 19 peer dependencies are installed: + +```bash +npm install react@19 react-dom@19 +``` diff --git a/fern/products/docs/pages/changelog/2026-01-08.mdx b/fern/products/docs/pages/changelog/2026-01-08.mdx new file mode 100644 index 000000000..b63a8968b --- /dev/null +++ b/fern/products/docs/pages/changelog/2026-01-08.mdx @@ -0,0 +1,18 @@ +## Standalone search widget + +You can now embed Ask Fern's AI-powered search in any React application using the new `@fern-api/search-widget` package. This standalone widget provides the same search experience as your Fern documentation site, making it easy to add documentation search to your main product, dashboard, or support portal. + +```jsx +import { SearchModal } from '@fern-api/search-widget'; +import '@fern-api/search-widget/styles'; + +function App() { + return ( + + Search Documentation + + ); +} +``` + +Learn more about the [standalone search widget](/learn/ask-fern/features/search-widget).