@frenchfryai/react

React bindings for Frenchfry voice + tool orchestration, including a high-level VoiceAgent component and outlet-based generative UI rendering.

Installation

npm install @frenchfryai/react @frenchfryai/core react

What This Package Provides

• VoiceAgent for connection lifecycle, tool execution, and render-state
• FrenchfryProvider + VoiceUiOutlet for outlet-based generated UI delivery
• useGenUi to bridge streaming tool args to Hashbrown UI rendering
• useVoiceAgent context hook
• Re-exported Hashbrown React helpers: useTool, useUiKit, useJsonParser

Basic Usage

import {
  FrenchfryProvider,
  VoiceAgent,
  VoiceUiOutlet
} from "@frenchfryai/react";

export const App = () => {
  return (
    <FrenchfryProvider>
      <VoiceAgent
        sessionEndpoint="http://localhost:8787/realtime/session"
        session={{ model: "gpt-realtime", type: "realtime" }}
      >
        {(agent) => (
          <>
            <button onClick={agent.start} disabled={agent.isRunning}>
              Start
            </button>
            <button onClick={agent.stop} disabled={!agent.isRunning}>
              Stop
            </button>
            <VoiceUiOutlet name="voice-main" />
          </>
        )}
      </VoiceAgent>
    </FrenchfryProvider>
  );
};

Using useGenUi

useGenUi registers a tool contract and stream handlers you pass to VoiceAgent via genUi.

import { VoiceAgent, useGenUi } from "@frenchfryai/react";
import { useMyUiKit } from "./my-ui-kit";

export const AgentWithUi = () => {
  const kit = useMyUiKit();
  const genUi = useGenUi({ kit, outlet: "voice-main" });

  return (
    <VoiceAgent
      sessionEndpoint="http://localhost:8787/realtime/session"
      session={{ model: "gpt-realtime", type: "realtime" }}
      genUi={[genUi]}
    >
      {() => null}
    </VoiceAgent>
  );
};

Main Exports

• FrenchfryProvider
• VoiceAgent
• VoiceUiOutlet
• useGenUi
• useVoiceAgent
• useTool
• useUiKit
• useJsonParser