Components

FrankieWidget

The floating launcher and chat panel.

<FrankieWidget position="bottom-left" />

Prop	Default	What it does
position	"bottom-right"	"bottom-right" or "bottom-left".
offset	24	Distance from the corner, in pixels.
launcher	true	Set false to hide the floating button and open the chat from your own element.
renderLauncher		Draw your own launcher: ({ open, toggle, label }) => ….
defaultOpen	false	Start open.
open / onOpenChange		Control the open state yourself.
closeOnOutsideClick	true	Close when the user clicks or taps outside the chat.
avoidBottomBars	true	Sit above fixed bars along the bottom, such as a mobile tab bar.
zIndex	20	Stacking order of the launcher and panel.
whenSignedOut	"hide"	A visitor who isn't signed in (your getUserToken returns nothing, or throws) doesn't see the product agent at all, and doesn't see a Support or Docs agent whose workspace requires sign-in. With getUserToken, the widget stays hidden until it returns a token, and a config that fails to load hides it except on localhost. The chat appears as soon as they sign in, with no reload. Set "show" to keep the launcher.
pathname	location.pathname	The current path, for a Support or Docs agent's pages (set in Frankie): it shows only on them. Pass your router's path (Next.js usePathname()) to follow navigation at once.
agentContext	false	Show the "Agent context" bar: which skills and APIs each turn loaded. It's a diagnostic for builders, so leave it off for your users.

Any element with data-frankie-open opens the chat when clicked:

<FrankieWidget launcher={false} />
<button data-frankie-open>Ask Frankie</button>

FrankieAgents

Every agent from one mount, with its own providers: the Product agent for signed-in users, and each page agent on the pages chosen for it in Frankie. An agent whose key is unset stays off.

<FrankieAgents
  productKey={process.env.NEXT_PUBLIC_FRANKIE_KEY}
  supportKey={process.env.NEXT_PUBLIC_FRANKIE_KEY_SUPPORT}
  docsKey={process.env.NEXT_PUBLIC_FRANKIE_KEY_DOCS}
  getUserToken={getUserToken}
/>

Where two page agents' pages overlap the earlier one wins (Support, then Docs, then agents in order); the Product agent takes every other page for a signed-in user; a page agent with no pages covers the rest. It also takes agents (custom page agents, { id, publishableKey }), api, baseUrl, pathname and chatPaths (no launcher there; defaults to /chat and /frankie/chat).

FrankieChatPage

A full-page chat with a conversation list. It includes its own provider, so it takes the provider props directly.

<FrankieChatPage
  publishableKey={process.env.NEXT_PUBLIC_FRANKIE_KEY!}
  getUserToken={getUserToken}
  navigation={<a href="/dashboard">Back to dashboard</a>}
/>

Prop	Default	What it does
showHistory	true	Show the conversation list.
navigation		Your own links in the page's header, such as "Back to dashboard".

FrankieInline

The chat panel without a launcher, filling whatever container it's in. Give the container a height.

<div style={{ height: "70vh" }}>
  <FrankieInline />
</div>

Changing parts of the chat

FrankieWidget, FrankieChatPage and FrankieInline all accept these:

Prop	What it does
header	Replace the header, or false to remove it.
emptyState	What shows before the first message.
renderMessage	Draw messages yourself.
renderTool	Draw each action row yourself.
placeholder	The message box's placeholder. Overrides the one saved in the dashboard; unset, the saved one shows, then "Ask name anything…".