Full Chatbot

A complete AI chatbot setup with frontend chat UI, local AI configuration, and the chat API route.

Showcase

This is the real component wired to the current /api/chat route.

How to setup

Install packages

Install the runtime packages first.

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

Add the shadcn-svelte primitives used by the chatbot UI.

pnpm dlx shadcn-svelte@latest add button textarea tooltip

AI setup

Configure your model provider in src/lib/config/ai.ts.

src/lib/config/ai.ts

Add chat/+server.ts

Create the API route that streams responses back to the UI.

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

Folder structure

Keep the files arranged like this so the imports match the example setup.

folder-structure

Add other components

Copy the chatbot component files into your primitives folder.