Guides

Building SvelteKit with open-source tools

This guide demonstrates how to implement real-time AI streaming responses using Svelte 5 Runes and SvelteKit Form Actions. We focus on maintaining a responsive UI while handling edge-compatible streaming data from an LLM provider.

45 minutes6 steps

Install AI SDK and Configure Environment

Install the necessary libraries for handling stream protocols and LLM communication. Use the 'ai' package for standardized stream handling across providers.

npm install ai openai @ai-sdk/openai
echo "OPENAI_API_KEY=your_key_here" >> .env

⚠ Common Pitfalls

•Ensure your API key is prefixed with 'SECRET_' if not using SvelteKit's built-in $env/static/private module.

Create a Server-Side Streaming Endpoint

Define a POST handler in a +server.ts file. This endpoint will interface with the AI provider and return a ReadableStream using the SvelteKit Response object.

src/routes/api/chat/+server.ts

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
import type { RequestHandler } from './$types';

export const POST: RequestHandler = async ({ request }) => {
  const { prompt } = await request.json();
  const result = await streamText({
    model: openai('gpt-4o'),
    prompt,
  });
  return result.toDataStreamResponse();
};

⚠ Common Pitfalls

•Serverless functions on some platforms have short timeouts; ensure your provider's 'max duration' covers the expected stream length.

Initialize Svelte 5 Runes for State Management

Use $state to manage the chat history and the current streaming chunk. Runes provide more granular reactivity than Svelte 4 stores, which is critical for high-frequency stream updates.

src/routes/chat/+page.svelte

<script lang="ts">
  let messages = $state<{ role: string; content: string }[]>([]);
  let input = $state('');
  let isLoading = $state(false);
</script>

Implement Stream Consumption Logic

Write a function to fetch the API endpoint and iterate over the ReadableStream. Update the $state variables as chunks arrive to provide real-time feedback.

src/routes/chat/+page.svelte

async function handleSubmit() {
  const userMessage = { role: 'user', content: input };
  messages = [...messages, userMessage];
  input = '';
  isLoading = true;

  const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ prompt: userMessage.content })
  });

  const reader = response.body?.getReader();
  let assistantMessage = $state({ role: 'assistant', content: '' });
  messages = [...messages, assistantMessage];

  if (reader) {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      const text = new TextDecoder().decode(value);
      assistantMessage.content += text;
    }
  }
  isLoading = false;
}

⚠ Common Pitfalls

•Directly mutating array elements in Svelte 5 requires the object to be reactive; ensure the assistant message object is defined properly for nested reactivity.

Configure Edge Runtime for Performance

To minimize latency, configure the route to run on the Edge. This avoids cold starts and places the execution closer to the user and the AI provider's API.

src/routes/api/chat/+server.ts

import type { Config } from '@sveltejs/adapter-vercel';

export const config: Config = {
  runtime: 'edge'
};

⚠ Common Pitfalls

•Edge runtimes do not support all Node.js built-in modules (e.g., 'fs' or 'crypto'). Check compatibility if using third-party logging libraries.

Add UI Feedback and Auto-Scrolling

Use $effect to handle side effects like scrolling the chat window to the bottom as the stream grows. This ensures the latest AI-generated text is always visible.

src/routes/chat/+page.svelte

<script lang="ts">
  let viewport: HTMLElement;
  $effect(() => {
    messages;
    if (viewport) {
      viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
    }
  });
</script>

<div bind:this={viewport} class="h-96 overflow-y-auto border p-4">
  {#each messages as msg}
    <div class="mb-2"><strong>{msg.role}:</strong> {msg.content}</div>
  {/each}
</div>

What you built

You have successfully implemented a streaming AI interface using Svelte 5 Runes. This architecture ensures minimal main-thread blocking and provides a superior UX compared to traditional JSON polling. For production, consider adding error handling for stream interruptions and implementing Lucia Auth for rate-limiting requests.