文档

文档

Vue 客户端 SDK

ModelRiver Vue SDK 提供了为 Vue 3（Composition API）设计的响应式 useModelRiver composable。它负责 WebSocket 编排和状态同步，让你更容易构建 AI 驱动界面。

安装

Bash
npm install @modelriver/client

Vue 适配层包含在核心包 @modelriver/client 中。

实现示例

VUE
1<script setup>
2import { ref } from 'vue';
3import { useModelRiver } from '@modelriver/client/vue';
4 
5const userInput = ref('');
6 
7const {
8 connect,
9 response,
10 error,
11 isConnected,
12 steps,
13 status
14} = useModelRiver({
15 baseUrl: 'wss://api.modelriver.com/socket',
16 persist: true
17});
18 
19async function sendMessage() {
20 const res = await fetch('/api/ai/chat', {
21 method: 'POST',
22 body: JSON.stringify({ message: userInput.value })
23 });
24 
25 const { ws_token, channel_id } = await res.json();
26 connect({ wsToken: ws_token, channelId: channel_id });
27 userInput.value = '';
28}
29</script>

Vue 开发者应关注的点

响应式集成

该 composable 返回 Ref 和计算属性，随着 ModelRiver WebSocket 数据到达会自动更新，天然契合 Vue 的响应式模型。

错误处理

error 不仅能承载网络错误，也能承载 AI 供应商超时、内容过滤等业务错误，便于你渲染不同 UI 状态。

生命周期管理

当组件卸载时，SDK 会自动清理 WebSocket 连接，避免单页应用中的内存泄漏。

在 Vue 中构建 SEO 友好的 AI 应用

  1. 使用 Nuxt 或 Vue SSR 渲染基础页面结构和元数据
  2. 为慢网络用户提供渐进式体验，结合 steps 告知当前进度
  3. 将 response.data 用于 JSON-LD 等结构化数据生成

下一步