Basic Setup Guide

Goal: Set up a complete development environment for building AI-powered Svelte applications with all necessary tools and configurations

Reusable Guide: This setup guide is referenced across all Svelte AI Elements tutorials. Complete these steps once, and you're ready for any advanced guide!

Step 1: Installing Svelte

Create a new SvelteKit project with TypeScript and Tailwind CSS support. We'll use the sv CLI for quick setup:

pnpm dlx sv create my-ai-app

When prompted, select the following options:

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

Navigate to your project directory:

terminal

Success! You now have a modern SvelteKit project with TypeScript and Tailwind CSS ready to go.

Step 2: Installing shadcn-svelte

shadcn-svelte provides beautiful, accessible UI components that integrate seamlessly with Tailwind CSS. Install and configure it:

pnpm dlx 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/app.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

This creates a lib/components/ui directory structure with pre-configured components that work perfectly with Svelte AI Elements.

Step 3: Configuring OpenRouter & AI Models

OpenRouter provides free access to multiple AI models through a single API. Let's set it up:

1. Get Your API Key

Visit https://openrouter.ai/keys and sign up for a free account. Generate your API key.

2. Create Environment File

Create a .env.local file in your project root:

.env.local

3. Free AI Models Available

You can use these free models for testing and development:

x-ai/grok-4-fast:free
deepseek/deepseek-chat-v3.1:free
z-ai/glm-4.5-air:free
qwen/qwen3-coder:free
moonshotai/kimi-k2:free

Important: Never commit your .env.local file to version control. Add it to .gitignore.

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

This configuration file allows you to easily switch between different AI models and manage your API credentials in one place.

Step 5: Adding Svelte AI Elements Components

Svelte AI Elements provides pre-built components for common AI patterns. Add components as needed using the CLI:

Example: Adding Components

Install specific components for your project:

For chat interfaces:

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

For prompt inputs:

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

For loading states:

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

Note: Each guide will specify which components to install using the [COMPONENT] placeholder. Install only the components you need for that specific tutorial.

Verifying Your Setup

Let's verify everything is working correctly. Start the development server:

terminal

Your development server should start at http://localhost:5173. Check for:

No TypeScript errors in terminal
Tailwind CSS styles loading correctly
No console errors in browser DevTools
Environment variables loaded (check your backend routes)

Your development environment is ready. You can now proceed with any Svelte AI Elements tutorial or guide.

Ready to Build Something Amazing?

You've completed the basic setup! This foundation will be referenced in all other guides. Bookmark this page for quick reference.

Browse All Guides Explore Components