Build your own UI

Every layer is exported, so you can go as far as you like.

Swap individual pieces

ChatPanel, Composer, MessageBubble, Markdown, Choices, SuggestedPrompts, ToolActivityList and the shadcn/ui primitives are exported. Use them inside the provider to rebuild the panel your way.

useFrankieChat

Everything a custom chat needs, inside a FrankieProvider:

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

function MyChat() {
  const { messages, send, busy } = useFrankieChat();
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        void send(String(new FormData(event.currentTarget).get("q")));
      }}
    >
      {messages.map((message) => <p key={message.id}>{message.text}</p>)}
      <input name="q" disabled={busy} />
    </form>
  );
}

Field	What it is
messages	The conversation so far, including each action the agent took
send(text)	Send a message
busy	A reply is streaming
stop()	Stop the current reply
reset()	Start a new conversation
error	The last error, in words you can show
restoring	An earlier conversation is loading

No React at all

FrankieClient handles the sign-in handshake, sessions and the event stream; applyEvent() is a pure reducer from server events to renderable messages. That's all useFrankieChat is built on.

Pick-one answers

The agent can offer choices by ending a reply with a ```frankie:choices block, one option per line. The widget renders them as buttons with a "type your own answer" fallback; extractChoices() does the same for your own UI.