Svelte 5 + AI SDK Integration Guide

Project Setup

Create a new SvelteKit project with Tailwind CSS support:

When prompted, select:

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

UI Setup with shadcn-svelte

Install and configure shadcn-svelte for beautiful, accessible UI components:

This will create a lib/components/ui directory with pre-built components that integrate seamlessly with Tailwind CSS.

Follow the prompts to configure components.json:

Which base color would you like to use? › Neutral
Where is your global CSS file? (this file will be overwritten) › 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

AI SDK Integration & OpenRouter Setup

Install the Vercel AI SDK and set up OpenRouter for accessing AI models:

Create a .env.local file:

Note: Sign up at OpenRouter to get your free API key. OpenRouter provides access to multiple AI models through a single API.

Text Streaming Configuration

Configure streamText and UIMessage[] to handle real-time AI responses:

This configuration allows your app to stream AI responses in real-time, providing a smooth user experience similar to ChatGPT's interface.

File Structure & Backend API

Create the backend API endpoint in src/routes/api/chat/+server.ts:

This server endpoint handles incoming chat messages and streams AI responses back to the frontend using the AI SDK's streaming capabilities.

Frontend Chat Interface

Build the chat interface in src/routes/+page.svelte using AI SDK's Svelte integration:

The Chat class from AI SDK automatically handles message state, streaming, and form submission, making it incredibly easy to build chat interfaces.

For more details, refer to the official Vercel AI SDK Svelte documentation.

Add Actions, Message, Prompt Input Component

Enhance your chat interface with actions, messages, and a prompt input from Svelte AI Elements:

Free AI Models for Testing

Additional Resources