Add Support and Docs agents to your site

Support and Docs agents talk to visitors who aren't signed in, so adding one takes less than the Product agent. Each one needs:

• Its publishable key. Every agent has its own key. Find it on the agent's tab in Frankie.
• Anonymous chat on. Visitors chat without signing in, so there's no token endpoint and no getUserToken.
• Your site in Allowed sites. Add every origin it runs on. Local development on any localhost port works while Allow localhost is on (the default for new workspaces); otherwise add your dev origin too, for example http://localhost:3000. The widget doesn't load anywhere else.
• Its pages. Your site reads them from Frankie when a page loads, so changing them never needs a new deploy. See Choosing pages.

It needs no API description and no actions.

On the agent's tab, open Add to your site and pick your kind of site: a React site (Next.js, Docusaurus, Vite…) or Any website (Mintlify, GitBook, Webflow, static HTML). Then pick one of two ways in: Connect GitHub or Use your AI coding assistant (on any website: the prompt or Paste the script tag). The tab watches your site and says when the agent first loads there.

React sites

Use your AI coding assistant

Click Copy prompt and paste it into Claude Code, Cursor, Copilot or Windsurf at your site's repository root. See Set up with your AI assistant. The prompt has the agent's key filled in. It tells the assistant to:

1. Install @frankieai/react.
2. Add @import "@frankieai/react/styles.css"; to your global CSS, after Tailwind.
3. Mount the provider once, with the agent's key and no token.
4. Read the key from a public environment variable and add it to .env.example.
5. Run your typecheck and build, then summarize what it changed.

If the site turns out not to be React, the prompt adds the script tag below instead.

Connect GitHub

Frankie opens one draft pull request in your repository. Nothing changes until you merge it. This works with the Next.js App Router today. Other frameworks are coming soon; use the prompt or the code until then.

Add the code yourself

Install the package, add the stylesheet to your global CSS after Tailwind, and render this once in your root layout:

app/frankie-chat.tsx

"use client";

import { FrankieAgents } from "@frankieai/react";

export function FrankieChat() {
  return <FrankieAgents docsKey={process.env.NEXT_PUBLIC_FRANKIE_KEY_DOCS} />;
}

It renders nothing until the key is set, and only on the pages chosen for the agent in Frankie. If the app already mounts FrankieAgents (for the Product agent, say), add the key prop there instead of a second mount.

Each framework names the variable its own way:

Framework	Variable
Next.js	NEXT_PUBLIC_FRANKIE_KEY_DOCS
Vite	VITE_FRANKIE_KEY_DOCS (read import.meta.env)
Docusaurus	FRANKIE_KEY_DOCS, passed through customFields

Use SUPPORT instead of DOCS for the Support agent.

Docusaurus

Docusaurus wraps every page in src/theme/Root.tsx. Render the widget there, in the browser only. These docs add their own Docs agent this way.

docusaurus.config.ts

export default {
  // …
  customFields: { frankieKey: process.env.FRANKIE_KEY_DOCS },
};

src/theme/Root.tsx

import BrowserOnly from "@docusaurus/BrowserOnly";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import { FrankieProvider, FrankieWidget } from "@frankieai/react";
import type { ReactNode } from "react";

export default function Root({ children }: { children: ReactNode }) {
  const { siteConfig } = useDocusaurusContext();
  const key = siteConfig.customFields?.frankieKey as string | undefined;
  return (
    <>
      {children}
      {key ? (
        <BrowserOnly>
          {() => (
            <FrankieProvider publishableKey={key}>
              <FrankieWidget />
            </FrankieProvider>
          )}
        </BrowserOnly>
      ) : null}
    </>
  );
}

Add @import "@frankieai/react/styles.css"; to the top of src/css/custom.css.

Any website

For Mintlify, GitBook, Webflow, or plain HTML, add one script tag. Paste it before </body>, or in your platform's custom code or head scripts setting:

<script
  src="https://cdn.jsdelivr.net/npm/@frankieai/react@0.2.29/dist/embed.js"
  data-key="pk_live_…"
  async
></script>

The script includes everything it needs, React too. The widget loads in its own container (a Shadow DOM), so your site's styles can't change it and it can't change your site.

Optional attributes:

Attribute	What it does
data-theme	light, dark or system. Overrides the agent's theme.
data-agent	A name for this agent's saved conversation, when two agents share one site.
data-api	The Frankie server's URL, when you host Frankie yourself.

Open and close it from your own button or link:

<button onclick="window.Frankie.open()">Ask the docs</button>

window.Frankie.close() closes it. Any element with a data-frankie-open attribute also opens it when clicked.

When it's live

The status line on the agent's tab says Live on docs.acme.com once the widget has loaded on one of your allowed sites. That works for every install path, including the script tag. After you deploy, open a page on your site, then reload the agent's tab. If nothing shows, check that the site is in Allowed sites.