🎯 Why SvelteKit?

AI-VIBE-CHAT-V2 is the performance-first entry in the chat series. SvelteKit 5's new Runes API eliminates the virtual DOM overhead entirely — delivering sub-50ms UI updates, smaller bundles, and a ChatGPT-inspired interface that feels instantly responsive.

Pillar 1, Iteration 2 — Same mission as V1, 3× faster.

🚀 Performance Benchmarks

✨ Features

• ⚡ SvelteKit 5 Runes — $state, $derived, $effect — reactive without overhead
• 🎨 Tailwind CSS 4 — JIT with CSS variables, container queries, @layer cascade
• 🔄 TanStack Query — Smart caching, background refetch, optimistic updates
• 💬 ChatGPT-Inspired UX — Conversation sidebar, message threading, code blocks
• 📝 Markdown Rendering — Full GFM support with syntax highlighting
• 🌊 SSE Streaming — Server-Sent Events for token-by-token responses
• 🔊 Voice Input — Web Speech API with visual waveform indicator
• 📤 Export — Download as Markdown, JSON, or share link
• 🎭 System Prompts — Custom personas, conversation starters
• 🔌 Multi-Provider — OpenAI, Anthropic, Groq, Ollama

🏗️ Architecture (Runes-First)

src/
├── lib/
│   ├── stores/
│   │   ├── chatStore.ts         # $state rune for conversation state
│   │   ├── sessionStore.ts      # Session management
│   │   ├── uiStateStore.ts      # Sidebar, modals, theme
│   │   └── errorStore.ts        # Error boundary state
│   ├── components/
│   │   ├── chat/
│   │   │   ├── ChatWindow.svelte      # Main chat with virtualized list
│   │   │   ├── MessageBubble.svelte   # Rune-powered reactive message
│   │   │   ├── InputBar.svelte        # Composer with voice + file upload
│   │   │   └── StreamingCursor.svelte # Animated typing cursor
│   │   └── ui/
│   │       ├── Button.svelte    # Design system button
│   │       ├── Input.svelte     # Controlled input with validation
│   │       ├── Badge.svelte     # Status/label badge
│   │       └── Avatar.svelte    # User/AI avatar
│   ├── providers/
│   │   ├── anthropic.ts         # Claude streaming client
│   │   ├── openai.ts            # OpenAI streaming client
│   │   ├── groq.ts              # Groq ultra-fast client
│   │   └── index.ts             # Provider registry + routing
│   └── utils/
│       ├── markdown.ts          # Marked + shiki syntax highlighting
│       ├── export.ts            # Chat export utilities
│       └── speech.ts            # Web Speech API wrapper
├── routes/
│   ├── +layout.svelte           # Root layout with theme provider
│   ├── +page.svelte             # Main chat interface
│   └── api/
│       ├── chat/+server.ts      # Streaming API endpoint
│       └── models/+server.ts    # Available models endpoint
└── app.css                      # Tailwind 4 + custom properties

🛠️ Quick Start

# Clone and install
git clone https://github.com/mk-knight23/AI-VIBE-CHAT-V2.git
cd AI-VIBE-CHAT-V2
npm install

# Configure
cp .env.example .env.local
# Add your API keys to .env.local

# Run
npm run dev        # → http://localhost:5173
npm run build      # Production build
npm run preview    # Preview production

Environment Variables

ANTHROPIC_API_KEY=sk-ant-...
OPENAI_API_KEY=sk-...
GROQ_API_KEY=gsk_...
OLLAMA_BASE_URL=http://localhost:11434

💡 SvelteKit 5 Runes Example

<!-- ChatWindow.svelte — Runes API -->
<script lang="ts">
  import { chatStore } from '$lib/stores/chatStore'

  let message = $state('')
  let isStreaming = $state(false)
  
  let messageCount = $derived(chatStore.messages.length)
  let lastMessage = $derived(chatStore.messages.at(-1))

  $effect(() => {
    // Auto-scroll when new message arrives
    if (lastMessage) scrollToBottom()
  })

  async function sendMessage() {
    if (!message.trim() || isStreaming) return
    isStreaming = true
    await chatStore.sendWithStream(message)
    message = ''
    isStreaming = false
  }
</script>

📦 Commands

npm run dev          # Development
npm run build        # Production build
npm run preview      # Preview
npm run check        # Svelte type-check
npm run lint         # ESLint + Prettier
npm run test         # Vitest
npm run test:e2e     # Playwright

🚀 Deployment

# Vercel
npx vercel --prod

# Adapter-node (self-hosted)
npm run build
node build/index.js

# Docker
docker-compose up --build

🔗 AI-VIBE Ecosystem

Part of AI-VIBE-ECOSYSTEM — 11 production AI projects by Kazi Musharraf