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.