@cybernetyx1/atlasflow-react

React hooks and provider for wiring browser and app UIs to an AtlasFlow agent server.

Install

npm install @cybernetyx1/atlasflow-react

Part of the AtlasFlow monorepo. Proprietary.

Usage

Wrap your app in AtlasFlowProvider (pass either a prebuilt client or options). Then use useAgent to chat with an agent, useRunWatch to follow a durable run's event stream, and useAtlasFlowClient to reach the client directly.

Never put ATLASFLOW_API_KEY in browser code. Mint a short-lived scoped token on your server (see @cybernetyx1/atlasflow-sdk) and pass it to the provider.

import { AtlasFlowProvider, useAgent } from "@cybernetyx1/atlasflow-react";

function Chat() {
  const agent = useAgent({ agent: "hello", instanceId: "user-123" });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const input = new FormData(event.currentTarget).get("message");
        void agent.send(String(input ?? ""));
        event.currentTarget.reset();
      }}
    >
      {agent.messages.map((message, index) => (
        <p key={index}>{message.role}: {message.content}</p>
      ))}
      <input name="message" />
      <button disabled={agent.isStreaming}>Send</button>
    </form>
  );
}

export function App({ token }: { token: string }) {
  return (
    <AtlasFlowProvider options={{ baseUrl: "https://agent.example", apiKey: token }}>
      <Chat />
    </AtlasFlowProvider>
  );
}

import { useRunWatch, useAtlasFlowClient } from "@cybernetyx1/atlasflow-react";

function RunStatus() {
  const client = useAtlasFlowClient();
  // Pass a run id or the RunAdmission returned by client.runs.dispatch(...).
  const run = useRunWatch({ target: "run_abc123" });
  return <pre>{run.status}: {run.events.length} events</pre>;
}

Exports: AtlasFlowProvider, useAtlasFlowClient, useAgent, useRunWatch, plus the AgentChatMessage / AgentHookState / AgentStatus types and the hook option/result types.

License

Proprietary. © 2026 Cybernetyx. See LICENSE.