Docs

Documentation

Svelte Client SDK

The ModelRiver Svelte SDK leverages Svelte's native store system for ultra-fast, reactive AI updates. It provides a simple createModelRiver function that returns writable stores for the AI response and connection state.

Installation

Bash
npm install @modelriver/client

The Svelte integration is included in the core @modelriver/client package.

Quick Start (Svelte 4 & 5)

SVELTE
1<script>
2 import { createModelRiver } from '@modelriver/client/svelte';
3 
4 let prompt = '';
5 
6 const {
7 response,
8 error,
9 isConnected,
10 steps,
11 status,
12 connect
13 } = createModelRiver({
14 baseUrl: 'wss://api.modelriver.com/socket'
15 });
16 
17 async function generate() {
18 // 1. Get Token from backend
19 const res = await fetch('/api/chat', {
20 method: 'POST',
21 body: JSON.stringify({ prompt })
22 });
23 const { ws_token } = await res.json();
24 
25 // 2. Connect
26 connect({ wsToken: ws_token });
27 }
28</script>
29 
30<div class="ai-box">
31 <div class="status-indicator">
32 {#each $steps as step}
33 <span class="badge {step.status}">{step.name}</span>
34 {/each}
35 </div>
36 
37 <div class="display">
38 {#if $status === 'loading'}
39 <p>AI is assembling your request...</p>
40 {/if}
41 
42 {#if $response}
43 <div class="content">
44 {$response.content}
45 </div>
46 {/if}
47 </div>
48 
49 <textarea bind:value={prompt}></textarea>
50 <button on:click={generate} disabled={$status === 'loading'}>
51 Send to AI
52 </button>
53 
54 {#if $error}
55 <p class="error">{$error}</p>
56 {/if}
57</div>
58 
59<style>
60 .badge.success { background: #4CAF50; color: white; }
61 .badge.loading { animation: pulse 1s infinite; }
62</style>

Why Svelte for AI?

Native Stores

By returning true Svelte stores ($response, $status, etc.), the SDK eliminates the need for complex state management boilerplate. UI updates are instantaneous as the WebSocket delivers new data.

SvelteKit Support

The SDK is fully compatible with SvelteKit. You can use the reconnectWithBackend helper within onMount to resume AI sessions in SSR applications.

Small Footprint

Because Svelte is a compiler, the additional bundle size for AI features is minimal, keeping your pages incredibly fast and SEO-friendly.

SEO and Performance with Svelte

  1. Hydration: SvelteKit's hydration ensures that your AI dashboard is interactive as soon as the JavaScript loads, while serving a meaningful initial HTML shell for search engines.
  2. Transition Effects: Use Svelte's built-in transitions (fade, fly, blur) alongside the $response store to create smooth, professional-looking AI text streams.
  3. Structured Data: Leverage the $response.data store to dynamically generate meta tags or microdata as the AI finishes its work.

Next Steps