React SDK

@frankieai/react is the chat itself. It works in any React 18 or 19 app; the install pull request sets it up for Next.js App Router for you.

The SDK runs in the user's browser and talks to Frankie's hosted cloud, where the agent runs. You don't run a Frankie server, and you don't need an AI API key. It works the same on localhost: new workspaces allow it by default (Allow localhost under allowed sites), or add that address to your workspace's allowed sites. See What runs where.

npm install @frankieai/react

The smallest setup

"use client";
import { FrankieProvider, FrankieWidget } from "@frankieai/react";
import "@frankieai/react/styles.css";

export function Assistant() {
  return (
    <FrankieProvider publishableKey={process.env.NEXT_PUBLIC_FRANKIE_KEY!}>
      <FrankieWidget />
    </FrankieProvider>
  );
}

That's a working chat only for a workspace created with Let visitors chat without signing in. Anywhere else it answers "This assistant requires a signed-in user.", so add getUserToken.

Pick a layout

Component	Looks like	Use it for
<FrankieWidget />	A launcher in the corner that opens a chat panel	Most apps and websites
<FrankieChatPage />	A full-page chat with a conversation list	A dedicated /chat page
<FrankieInline />	A chat that fills its container	Placing the chat inside your own layout

All three sit inside one FrankieProvider.

Where to go next

• Provider: keys, signed-in users and page context.
• Components: every layout's props.
• Styling: themes, scoped CSS and Tailwind.
• Build your own UI: hooks and the client, without our components.