React

npm install @wireface/chat

import { WirefaceChat, useWirefaceChatEvent, useWirefaceTool } from '@wireface/chat/react';

export function App({ user }) {
  useWirefaceChatEvent('lead', lead => analytics.track('lead', lead.fields));

  useWirefaceTool('open_product', {
    description: 'Show a product page',
    parameters: { type: 'object', properties: { slug: { type: 'string' } }, required: ['slug'] },
    handler: ({ slug }) => {
      navigate(`/products/${slug}`);
      return { opened: slug };
    },
  });

  return (
    <>
      {/* your app */}
      <WirefaceChat
        host="https://chat.example.com"
        bot="pk_your_bot_id"
        theme="auto"
        user={user ? { id: user.id, hash: user.wirefaceHash, name: user.name, email: user.email } : undefined}
        on={{ open: () => console.log('chat opened') }}
      />
    </>
  );
}

Compute user.wirefaceHash on your server: see Identity verification.

Components

Component	What it does
<WirefaceChat host bot ... />	Adds the launcher and the chat window (panel, drawer or floating, as the bot or layout says). It renders nothing itself.
<WirefaceChatInline host bot className style ... />	Draws the chat inside a div it renders, filling it. Give it a height with style or className (the div is at least 420 px tall).

Props are the boot options (except target), the load options of the npm package (host, version, integrity, nonce, timeoutMs), and:

• tools: page tools by name, as for registerTool(). Handlers can change between renders; the tools are registered again only when a name, description, schema, confirm or timeout changes.
• on: event handlers by event name, e.g. on={{ message: m => ..., lead: l => ... }}. The latest handlers are always called.

Changes to layout, launcher, theme, accentColor, locale, strings, zIndex, user and context are applied to the running chat. Changing bot or host starts a new one.

Hooks

Hook	What it does
useWirefaceChat(bot?)	The chat instance for bot (or the first on the page), or null until it's there. Chats started by a script tag count too.
useWirefaceChatEvent(event, handler, bot?)	Listens to an event while the component is mounted.
useWirefaceTool(name, tool, bot?)	Gives the agent a page tool while the component is mounted.

function HelpButton() {
  const chat = useWirefaceChat();
  return <button disabled={!chat} onClick={() => chat?.open()}>Ask us</button>;
}

Notes

• Server rendering is safe: nothing loads until the component mounts in the browser.
• StrictMode: its quick unmount and remount keep the same chat.
• Shared chats: several components for the same bot share one chat, which closes when the last of them unmounts. Put <WirefaceChat> high in the tree (a root layout) so route changes don't close it.
• Page tools only reach the agent when the bot allows them: see Client tools.
• Signing out: call getWirefaceChat()?.shutdown({ forget: true }) (from @wireface/chat), so the next person on that browser doesn't continue the user's chat. The component notices the chat is gone and starts a new one the next time it mounts: give it key={user?.id ?? 'anonymous'} so it remounts when the user changes. A running chat can't switch from one signed-in user to another. See Identity verification.

examples/react-vite/ in the repo is a runnable app.