Labsco
rivet-dev logo

rivetkit-client-react

★ 16

by rivet-dev · part of rivet-dev/skills

React client for connecting to Rivet Actors with hooks and realtime state management. Create typed hooks with createRivetKit() and connect to actor instances using useActor() with keys and optional parameters Subscribe to actor events with useEvent() and monitor connection lifecycle through connStatus and error states Use createClient() for stateless one-off calls, actor discovery methods (get, getOrCreate, create, getForId), and low-level HTTP/WebSocket access Supports compound array keys...

🔥🔥🔥✓ VerifiedFreeQuick setup
#git
🧩 One of 7 skills in the rivet-dev/skills package — works on its own, and pairs well with its siblings.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

name: "rivetkit-client-react" description: "RivetKit React client guidance. Use for React apps that connect to Rivet Actors with @rivetkit/react, create hooks with createRivetKit, or manage realtime state with useActor."

RivetKit React Client

Use this skill when building React apps that connect to Rivet Actors with @rivetkit/react.

First Steps

  1. Install the React client (latest: 2.3.2) 
    npm install @rivetkit/react@2.3.2
  2. Create hooks with createRivetKit() and connect with useActor().

Error Handling Policy

  • Prefer fail-fast behavior by default.
  • Avoid try/catch unless absolutely needed.
  • If a catch is used, handle the error explicitly, at minimum by logging it.

Minimal Client

Stateless vs Stateful

Getting Actors

Connection Parameters

Subscribing to Events

Connection Lifecycle

Low-Level HTTP & WebSocket

Use the JavaScript client for raw HTTP and WebSocket access:

import { createClient } from "rivetkit/client";

const client = createClient();
const handle = client.chatRoom.getOrCreate(["general"]);

const response = await handle.fetch("history");
const history = await response.json();

const ws = await handle.webSocket("stream");
ws.addEventListener("message", (event) => {
  console.log("message:", event.data);
});
ws.send("hello");

Calling from Backend

Use the JavaScript client on your backend (Node.js/Bun). See the JavaScript client docs.

Error Handling

Concepts

Keys

Keys uniquely identify actor instances. Use compound keys (arrays) for hierarchical addressing:

Don't build keys with string interpolation like "org:${userId}" when userId contains user data. Use arrays instead to prevent key injection attacks.

Environment Variables

createRivetKit() (and the underlying createClient() instance) automatically read:

  • RIVET_ENDPOINT
  • RIVET_NAMESPACE
  • RIVET_TOKEN
  • RIVET_RUNNER

Defaults to http://localhost:6420 when unset. RivetKit runs on port 6420 by default.

Endpoint Format

Endpoints support URL auth syntax:

https://namespace:token@api.rivet.dev

You can also pass the endpoint without auth and provide RIVET_NAMESPACE and RIVET_TOKEN separately. For serverless deployments, use your app's /api/rivet URL. See Endpoints for details.

API Reference

Package: @rivetkit/react

Need More Than the Client?

If you need more about Rivet Actors, registries, or server-side RivetKit, add the main skill:

npx skills add rivet-dev/skills

Then use the rivetkit skill for backend guidance.