Skip to main content

Add AI to Fern

Integrate the Kapa Website Widget into your Fern documentation to enable users to ask natural language questions about your product, significantly enhancing user experience by providing quick and accurate answers.

Prerequisites​

Before adding the widget to your Fern site, you'll need to:

  1. Ensure you have a Kapa project set up with your knowledge sources added
  2. Follow the general installation instructions to enabled your domain and obtain your Website ID
  3. Have the Fern docs repository cloned locally

Installation​

1. Create kapa.js​

Create a new file called kapa.js in your docs directory with the following code:

var script = document.createElement("script");
script.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
script.setAttribute("data-website-id", "YOUR_WEBSITE_ID");
script.setAttribute("data-project-name", "YOUR_PROJECT_NAME");
script.setAttribute("data-project-color", "YOUR_PROJECT_COLOR");
script.setAttribute("data-project-logo", "https://LINK_TO_LOGO.com/logo.png");
script.async = true;
document.head.appendChild(script);

2. Register kapa.js in docs.yml​

Add a reference to kapa.js in your docs.yml file under the js key:

js:
  - path: ./kapa.js
Replacing Fern's Built-in AI Search

Fern includes a built-in AI search feature. To avoid a duplicate AI experience on your docs site, consider disabling it in your docs.yml and using Kapa as your sole AI assistant instead. Refer to Fern's documentation for instructions on disabling their native AI search.

Customization Options

To tailor the widget to your brand and specific needs, visit our Configuration page. There, you'll find detailed instructions on how to adjust colors, logos, and other widget properties.