Add an AI agent chat UI to a React app

An AI agent chat UI needs more than a message list. It must show observed history, live work, prompt admission and connection failures without inventing its own version of the conversation. Parakeet renders those facts from a typed Shiitake Session. Your host supplies the authorized Session; the component does not sign in, create an Agent or grant tools.

Prepare a React host

Use @fungi.computer/parakeet with a compatible React and React DOM pair and TanStack Query. The package supports React ^18.2.0 or ^19.2.0 and TanStack Query ^5.102.8. Its README describes package-tarball setup and the repository build:

TERMINAL

pnpm turbo:run run build --filter=@fungi.computer/parakeet

Import @fungi.computer/parakeet/styles.css once in a browser host. It includes the Caps/Stipe foundation; do not also load @fungi.computer/caps/styles.css in the same document. Import Caps’ fonts.css separately if you use its bundled fonts, with a bundler that handles their URLs.

If the host compiles its own Tailwind utilities, use Parakeet’s /tailwind.css source and supply the host’s @source instead. The built stylesheet cannot scan your extra classes.

Mount the conversation

Illustrative: the host supplies an authorized ParakeetSession and a browser bundler that handles CSS. This component owns and clears its query cache.

TSX

import { useEffect, useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Parakeet, type ParakeetSession } from "@fungi.computer/parakeet";
import "@fungi.computer/parakeet/styles.css";

export function Conversation({ session }: { session: ParakeetSession }) {
  const [queryClient] = useState(() => new QueryClient());
  useEffect(() => () => queryClient.clear(), [queryClient]);
  return (
    <QueryClientProvider client={queryClient}>
      <Parakeet session={session} />
    </QueryClientProvider>
  );
}

The view presents history, live work, a composer and errors. On desktop, Enter submits and Shift+Enter inserts a newline. On touch-primary devices, Enter inserts a newline and the Send button submits.

Keep the Session transport and current permissions in the host. Replacing a conversation means passing its new Session handle, not copying a snapshot into a second writable store. Unmounting stops observation; it does not cancel accepted Agent work or close a borrowed Agent.

Use visitor presentation on public sites

Website hosts mount Parakeet inside an isolated iframe and supply a scoped visitor-session adapter. Admission and credentials stay with that host.

Illustrative: use these props inside the same query provider, with a host-authorized visitor Session rather than an owner’s unrestricted Session.

TSX

<Parakeet
  session={visitorSession}
  markdownPolicy="visitor"
  visitor={{ agentName: "Front Desk" }}
/>

markdownPolicy="visitor" renders Markdown links without loading images or unsafe destinations. visitor hides model, usage and command controls and disables slash commands. Slash-prefixed text remains an ordinary visitor message. These are presentation choices, not authorization.

A prompt recorded for a human returns status: "recorded", not fabricated Agent-work acceptance. Closing the widget does not stop the Agent’s work. For the hosted website installation path, see Add an Agent to WordPress.

Compose a custom browser or terminal view

Use ParakeetProvider and ParakeetView separately when you need custom controls in the same conversation scope. Both still need the host’s QueryClientProvider. Pass the Session to the provider and presentation props and commands to the view.

For a terminal renderer, import the renderer-neutral hooks from @fungi.computer/parakeet/headless. That entry avoids the DOM presentation, Caps and Sprite dependency closure:

• useTimeline() supplies history, the live tail and bounded paging.
• useComposer() supplies draft, submission, cancellation and retry controls.
• useStatus() supplies observed work and connection state.
• useMarkdown(content) supplies parsed Markdown for custom renderers.

For a custom React layout, Caps’ Composer block provides input, attachment, toolbar and action slots. It does not send prompts or own their state. Build with Caps covers the component and stylesheet setup.

Read Parakeet’s docs for composition, author labels, command interactions and admission recovery. A fixture Session can test your view; it does not prove hosted authentication or model delivery.