Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.firstflow.app/llms.txt

Use this file to discover all available pages before exploring further.

import { FirstflowWidget } from "@firstflow/react";
FirstflowWidget wraps your chat UI and renders the active experience in the correct position relative to your composer. It must be a descendant of FirstflowProvider.

​
Usage

import { FirstflowWidget } from "@firstflow/react";

export function ChatApp() {
  return (
    <FirstflowWidget experiencePlacement="inlineStack">
      <div className="messages">
        <MessageList />
      </div>
      <div className="composer">
        <Composer />
      </div>
    </FirstflowWidget>
  );
}

​
Props

​
experiencePlacement
"overlay" | "inlineStack"
default:"\"overlay\""
Controls where experiences appear relative to the widget boundary:
  • overlay — centered modal over the chat area
  • inlineStack — inline, rendered above the composer (the last child of the widget)
Use inlineStack for experiences that should feel like part of the conversation flow.
​
experienceMinimize
boolean
default:"false"
When true, a minimize button appears on the experience chrome. Users can collapse the experience to a pill and restore it by clicking the pill.
​
appearance
"light" | "dark" | "auto"
default:"\"auto\""
Color scheme for experience UI elements:
  • light — always light
  • dark — always dark
  • auto — follows the OS color scheme preference
To apply your brand colors, use CSS variables. See Theming.
​
onShow
(experienceId: string, type: string) => void
Called when an experience becomes visible. Useful for analytics or pausing other UI elements.
<FirstflowWidget
  onShow={(experienceId, type) => {
    console.log(`Showing ${type} experience: ${experienceId}`);
  }}
>
​
onDismiss
() => void
Called when an experience is dismissed by the user.

​
Notes

  • Only one experience renders at a time — the highest-priority eligible one
  • Experience priority is set in the Dashboard
  • The widget renders nothing when no experience is eligible