文档

Svelte 客户端 SDK

ModelRiver Svelte SDK 利用 Svelte 原生 store 体系,提供超快、响应式的 AI 更新体验。它通过简单的 createModelRiver 函数返回用于响应和连接状态的 store。

安装

Bash
npm install @modelriver/client

Svelte 集成已包含在核心包 @modelriver/client 中。

快速开始(Svelte 4 与 5)

使用 createModelRiver 创建连接状态、响应数据和操作方法,然后从你的后端拿到 ws_token 后调用 connect()。

为什么在 AI 场景下选择 Svelte?

原生 Stores

SDK 直接返回真正的 Svelte store(如 $response、$status),无需额外状态管理样板代码。WebSocket 有新数据时,UI 会立刻响应更新。

SvelteKit 支持

SDK 与 SvelteKit 完全兼容。你可以在 SSR 应用里结合 onMount 和 reconnectWithBackend 恢复 AI 会话。

体积小

Svelte 是编译型框架,因此 AI 功能带来的额外包体积很小,页面仍然能保持快速加载和良好 SEO 表现。

Svelte 中的 SEO 与性能建议

  1. 借助 SvelteKit hydration,使页面在 JS 加载后立即可交互,同时保留有意义的初始 HTML
  2. 配合 fade、fly、blur 等过渡效果,让 AI 文本流更自然
  3. 利用 $response.data 动态生成 meta 标签或结构化数据

下一步