Frontend SDK

Real-time AI streaming for your frontend

Official SDK for React, Vue, Angular & Svelte. WebSocket management with automatic reconnection and page refresh recovery.

Framework adapters Auto reconnection Page refresh recovery TypeScript

Visual

How it works

Backend calls async API, frontend connects via WebSocket and receives streaming responses.

Backend makes async request

POST /v1/ai/async

Backend returns ws_token

+ channel_id, websocket_url

Frontend SDK connects

WebSocket with token

AI response streams

Real-time updates to frontend

Quick Start

# Install the SDK
npm install @modelriver/client

# Or for React
npm install @modelriver/client
npm install @modelriver/client/react

No public URL needed

Connect via WebSocket token from your backend. No CORS issues, no polling.

Framework adapters

React hooks, Vue composables, Angular services, and Svelte stores.

Page refresh recovery

Persist state and reconnect to ongoing requests after page reload.

Framework Support

React

useModelRiver hook

Vue

useModelRiver composable

Angular

ModelRiverService

Svelte

modelRiver store

Key Features

● Automatic WebSocket reconnection for transient failures
● Page refresh recovery with persistence helpers
● TypeScript support with full type definitions
● Framework-specific adapters for React, Vue, Angular, Svelte

Use Cases

● Real-time AI chat interfaces
● Streaming text generation with progress tracking
● Background AI processing with frontend notifications
● Multi-step AI workflows with real-time updates

React Example

Basic usage with React hooks

import { useModelRiver } from '@modelriver/client/react';

function ChatComponent() {
  const { connect, response, isConnected } = useModelRiver();

  const handleChat = async () => {
    // Call your backend
    const res = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message: 'Hello' })
    });
    const { ws_token } = await res.json();

    // Connect with SDK
    connect({ wsToken: ws_token });
  };

  return (
    <div>
      <button onClick={handleChat}>Start Chatbutton>
      {response && <p>{response.data}p>}
    div>
  );
}

Full examples and API reference in the Client SDK documentation.

Real-time AI streaming made easy

Install the SDK and start receiving real-time AI responses in your frontend.

Install SDK View docs