ayjnt Get started
Documentation menu
Documentation

Browser client

Connect a co-located React interface to state and callable methods with generated types.

Start from a fresh project

This guide is self-contained. Create an empty Ayjnt project, then replace the starter agent with the files shown below. Run commands from the new project directory unless a step says otherwise.

terminal 
bunx ayjnt new try-client --empty
cd try-client
bun install

# remove agents/alive once you are ready to add the guide's files

Generated useAgent hook

When app.tsx sits beside an agent, Ayjnt generates a route-bound useAgent() hook. It derives the instance from the URL, subscribes to state, and types stub from the server class.

example 
import { useAgent } from "@ayjnt/counter";

export default function Counter() {
  const agent = useAgent();
  const count = agent.state?.count ?? 0;

  return <button onClick={() => agent.stub.increment(1)}>
    Count: {count}
  </button>;
}

AgentClient without React

Use Ayjnt’s AgentClient when you want the same WebSocket state and RPC protocol without a React hook. The wrapper translates a file route and instance into Cloudflare’s client basePath.

example 
import { AgentClient } from "ayjnt/client";
import type CounterAgent from "./agents/counter/agent";

const client = new AgentClient<CounterAgent>({
  route: "/counter",
  name: "demo",
  onStateUpdate: (state) => console.log(state),
});

await client.ready;
await client.stub.increment(1);

Run it and verify the result

Open the browser route in two tabs. A state change in one tab should synchronize to the other.

terminal 
bun run build
bun run dev

# the local app is now available at http://localhost:8787