Getting Started

Introduction Setup SvelteKit

Build AI-powered Svelte applications in minutes. This guide covers everything you need to get started with the Vercel AI SDK and SvelteKit.

Prerequisites

Node.js 18+ installed

A SvelteKit project with shadcn-svelte

An OpenRouter API key (get one free)

Install the AI SDK core, Svelte bindings, OpenRouter provider, and Zod for schema validation.

pnpm add ai @ai-sdk/svelte @openrouter/ai-sdk-provider zod

Create a .env file in your project root with your OpenRouter API key.

.env

Get your free API key from openrouter.ai/keys

Create a shared configuration file. This keeps your AI setup DRY and makes it easy to switch models.

src/lib/config/ai-config.ts

Create a server endpoint that handles chat messages. The streamText function streams the AI response in real-time.

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

Create a Svelte component that connects to your API. The Chat class from @ai-sdk/svelte handles all the state management.

src/routes/+page.svelte

You're all set! Explore more recipes to level up your AI app:

Real-time streaming responses

Type-safe structured data

AI-powered function calling

Create images from text