FluxyChat

Getting Started

Chat-only quickstart

Minimal path: install SDK, mint JWT, useChat — no platform modules, no wrangler.

Chat-only quickstart

Use this path when you want in-app chat only — not stream, IoT, fleet, or spatial modules.

1. Install

pnpm add @fluxy-chat/sdk @fluxy-chat/react

Import chat hooks (keeps your bundle small):

import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";

2. Client + JWT

Hosted (fastest): sign up → Onboarding → copy Worker URL + member JWT.

Local: from repo root:

pnpm install && pnpm run first-message

3. Three lines to live chat

"use client";

import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";

export function ChatPanel({
  workerUrl,
  jwt,
  roomId,
}: {
  workerUrl: string;
  jwt: string;
  roomId: string;
}) {
  return (
    <FluxyRealtimeProvider workerUrl={workerUrl} authTokenProvider={jwt}>
      <Room roomId={roomId} />
    </FluxyRealtimeProvider>
  );
}

function Room({ roomId }: { roomId: string }) {
  const { messages, sendMessage, connectionState } = useChat({
    roomId,
    markReadLatest: true,
  });

  return (
    <>
      <p>Status: {connectionState.status}</p>
      <ul>
        {messages.map((m) => (
          <li key={m.id}>{m.content}</li>
        ))}
      </ul>
      <button type="button" onClick={() => sendMessage("Hello")}>
        Send
      </button>
    </>
  );
}

4. Optional: AI agent in the same room

Mention an agent configured in the console:

await sendMessage("@assistant How can you help?");

Streaming replies use the same WebSocket — see Agents guide.

5. Inbox

import { useInbox } from "@fluxy-chat/react";

const { items, unreadCount, markRead } = useInbox({ client });

Next steps

Quickstart

First live message — CLI hosted, or a few lines of React.

Client setup

Connect FluxyChat to React, vanilla JavaScript, React Native, or Flutter.

On this page

Chat-only quickstart1. Install2. Client + JWT3. Three lines to live chat4. Optional: AI agent in the same room5. InboxNext steps