← Back to docs

SvelteKit primer

SvelteKit pairs beautifully with Meridian. The framework's server endpoints give you a safe place to hold your API key, while Svelte's reactivity makes streaming completions feel native. This primer walks through scaffolding a fresh SvelteKit app, wiring a server route to the Meridian gateway, and consuming the response from a page component.

1. Scaffold & install

Start from the official template, then drop in the OpenAI SDK. Meridian is wire-compatible, so the same client works against https://llm.getnimbus.net/v1.

# Scaffold a new SvelteKit app
npm create svelte@latest meridian-sveltekit
cd meridian-sveltekit
npm install
npm install openai

# Add your Meridian gateway key
echo "MERIDIAN_API_KEY=sk-mer-..." > .env

# Run dev server
npm run dev

2. Build a server route

SvelteKit endpoints live next to your pages and run only on the server, making them the right home for your Meridian key. The handler below accepts a prompt and returns a JSON reply.

// src/routes/api/chat/+server.ts
import { json } from '@sveltejs/kit';
import OpenAI from 'openai';
import { MERIDIAN_API_KEY } from '$env/static/private';

const client = new OpenAI({
  apiKey: MERIDIAN_API_KEY,
  baseURL: 'https://llm.getnimbus.net/v1',
});

export async function POST({ request }) {
  const { prompt } = await request.json();
  const completion = await client.chat.completions.create({
    model: 'azure/model-router',
    messages: [{ role: 'user', content: prompt }],
  });
  return json({ reply: completion.choices[0].message.content });
}

3. Call it from a page

From any +page.svelte file you can fetch('/api/chat') with a POST body. Svelte's {#await} block renders loading and resolved states without extra state libraries, which keeps the surface area small. For streaming, swap the JSON return for a ReadableStream and pipe the Meridian SSE response straight through.