Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions fern/products/docs/pages/ask-fern/ask-ai-chat.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Ask AI chat panel
description: Embed Fern's Ask AI chat panel in any React application, with a floating, inline, or custom trigger.
description: Embed Fern's Ask AI chat panel in any React application, with a floating launcher, a bottom prompt, an inline button, or a custom trigger.
---

`AskAiChat` renders a sidebar panel with AI chat (no keyword search). It's one of the two components in the [`@fern-api/search-widget` package](/learn/docs/ai-features/ask-fern/search-widget/overview), which covers the prerequisites and the Content Security Policy the widget needs.
Expand Down Expand Up @@ -51,7 +51,7 @@ description: Embed Fern's Ask AI chat panel in any React application, with a flo
```
</Step>
<Step title="Match the chat to your product">
`theme` controls light and dark mode, and `accentColor` sets the accent used for the sparkles, the send button, and links in answers, in both modes. `trigger` chooses between the corner launcher (`floating`), an unpainted button you place and style yourself (`inline`), and no button at all (`none`).
`theme` controls light and dark mode, and `accentColor` sets the accent used for the sparkles, the send button, and links in answers, in both modes. `trigger` chooses between the corner launcher (`floating`), a prompt input centered at the bottom of the viewport (`prompt`), an unpainted button you place and style yourself (`inline`), and no button at all (`none`).

```tsx
<AskAiChat domain="https://docs.example.com" theme="inherit" accentColor="#6b4eff" />
Expand Down Expand Up @@ -94,6 +94,7 @@ description: Embed Fern's Ask AI chat panel in any React application, with a flo
* `AskAiChat.Root` holds the state and takes the configuration props: `domain`, `lang`, `searchLocale`, `placement`, `theme`, `accentColor`, `open`, `defaultOpen`, and `onOpenChange`. Its `children` is the subtree to wrap, the menu and the panel.
* `AskAiChat.Trigger` is a real `<button>`, so `asChild` works and the menu keeps its keyboard behavior. Styling props (`className`, `style`, `icon`, and any button attributes) go here. `variant="floating"` renders the corner launcher instead of an unpainted button.
* `AskAiChat.Panel` is the chat. Render exactly one per root, outside any menu.
* `AskAiChat.Prompt` is the bottom prompt input, an alternative to a trigger. It takes `placeholder`, `icon`, `className`, and any form attributes.

The same shape covers a popover, a command palette, or a nav bar dropdown, and a single root supports multiple triggers, at most one of them `variant="floating"`.

Expand Down Expand Up @@ -160,8 +161,8 @@ All standard HTML button attributes are also supported and forwarded to the trig
Accent color for the sparkles, send button, and links in answers. Accepts any CSS color (for example, `#6b4eff`), and derives the light and dark variants from it. Defaults to a neutral gray.
</ParamField>

<ParamField path="trigger" type="'floating' | 'inline' | 'none'" default="floating">
`floating` renders a styled launcher pinned to a corner of the viewport. `inline` renders an unpainted button to place and style yourself, such as in a nav bar. Both carry the sparkle icon and an `Ask AI` label by default. `none` renders no trigger at all, for [driving the open state from your own UI](#custom-triggers).
<ParamField path="trigger" type="'floating' | 'prompt' | 'inline' | 'none'" default="floating">
`floating` renders a styled launcher pinned to a corner of the viewport. `inline` renders an unpainted button to place and style yourself, such as in a nav bar. Both carry the sparkle icon and an `Ask AI` label by default. `prompt` renders a single-line input pinned to the bottom center of the viewport instead of a button, and sending a question opens the chat directly above it with that question already in flight. It ignores `placement`, sizes the input with `--fern-ask-ai-prompt-width` and `--fern-ask-ai-prompt-width-focus`, and the chat it opens with `--fern-ask-ai-prompt-card-width`. Below 768px the chat is the same bottom drawer the corner launcher opens. `none` renders no trigger at all, for [driving the open state from your own UI](#custom-triggers).
</ParamField>

<ParamField path="open" type="boolean">
Expand All @@ -177,7 +178,7 @@ All standard HTML button attributes are also supported and forwarded to the trig
</ParamField>

<ParamField path="placement" type="'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'" default="bottom-right">
The corner the launcher and card anchor to.
The corner the launcher and card anchor to. Ignored when `trigger` is `prompt`.
</ParamField>

<ParamField path="searchLocale" type="string">
Expand Down
Loading