Basic Setup Guide

Step 1: Installing Svelte

Create a new SvelteKit project with TypeScript and Tailwind CSS.

pnpm dlx sv create sv-ai-app

When prompted, select the following options:

Which template? → SvelteKit minimal
Add type checking? → Yes, using TypeScript
Add additional options? → Add Tailwind CSS

Step 2: Installing shadcn-svelte

pnpm dlx shadcn-svelte@latest init

Configure components.json with the following settings:

Which base color would you like to use? › Neutral
Where is your global CSS file? › src/routes/layout.css
Configure the import alias for lib: › $lib
Configure the import alias for components: › $lib/components
Configure the import alias for utils: › $lib/utils
Configure the import alias for hooks: › $lib/hooks
Configure the import alias for ui: › $lib/components/ui

Step 3: OpenRouter Setup

OpenRouter provides free access to multiple AI models through a single API. Generate API Key

.env.local

Step 4: AI SDK Integration

Install the Vercel AI SDK and OpenRouter provider to enable streaming AI responses:

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

Create an AI configuration file to manage your AI settings:

src/lib/ai-config.ts

Step 5: Add Components

Svelte AI Elements provides pre-built components for common AI patterns.
Let's add the Message component to your project:

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/message.json