Getting Started

Introduction Setup SvelteKit

Let's set up a basic AI app with SvelteKit, OpenRouter, and the AI SDK.

Prerequisites

  • Node.js 18+ installed

  • A SvelteKit project with Tailwind CSS and TypeScript

  • Add shadcn-svelte to your project

  • An OpenRouter API key (get one free)

1. Install Packages

Install the AI SDK, the Svelte bindings, the OpenRouter provider, and Zod.

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

2. Set Up Environment

Add your OpenRouter API key to a .env file in the project root.

.env

Get your free API key from openrouter.ai/keys

3. Create AI Config

Create one shared AI config file so you can reuse the same provider and model anywhere.

src/lib/config/ai.ts

4. Create API Endpoint

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

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

5. Build Your Chat UI

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

Preview

This is the simple chat app you will have at the end of this setup.

Want to keep going? Visit the Generate Text recipe for the next example.