前端 SDK

为您的前端提供实时 AI 流式传输

适用于 React、Vue、Angular 和 Svelte 的官方 SDK。具有自动重连和页面刷新恢复功能的 WebSocket 管理。.

框架适配器 自动重连 页面刷新恢复 TypeScript

可视化

ModelRiver 工作原理

后端调用异步 API，前端通过 WebSocket 连接并接收流式响应。.

01

后端发出异步请求

POST /v1/ai/异步

02

后端返回 ws_token

+ channel_id, websocket_url

03

前端 SDK 连接

带 Token 的 WebSocket

04

AI 响应流

前端实时更新

Quick Start
# Install the SDK
npm install @modelriver/client

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

无需公网 URL

通过后端的 WebSocket Token 连接。无 CORS 问题，无需轮询。.

2

框架适配器

React Hooks、Vue Composables、Angular 服务及 Svelte Stores。.

3

页面刷新恢复

在页面重新加载后保持状态并重新连接到正在进行的请求。.

框架支持

React

useModelRiver hook

Vue

useModelRiver composable

Angular

ModelRiverService

Svelte

ModelRiver store

核心功能

  • ● 针对瞬时故障的自动 WebSocket 重连
  • ● 带有持久化辅助工具的页面刷新恢复
  • ● 支持 TypeScript 并提供完整的类型定义
  • ● 针对 React、Vue、Angular、Svelte 的特定框架适配器

使用场景

  • ● 实时 AI 聊天界面
  • ● 带进度追踪的流式文本生成
  • ● 带有前端通知的后台 AI 处理
  • ● 带有实时更新的多步 AI 工作流

React 示例

使用 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>
  );
}

完整示例和 API 参考请见 客户端 SDK 文档.

让实时 AI 流式传输变得简单

安装 SDK，开始在您的前端接收实时 AI 响应。.

安装 SDK 查看文档