AI Chat Starter Template

A modern, production-ready AI chat application starter built with Vue 3, Nuxt 3, and TypeScript. This template includes pre-built chat components and everything you need to integrate with AI services.

✨ Features

• 🚀 Modern Stack: Vue 3 + Nuxt 3 + TypeScript + Vite
• 💬 Chat Components: Ready-to-use chat interface with typing indicators
• 🎨 Beautiful Design: Dark theme with gradient backgrounds
• 📱 Responsive: Works on desktop, tablet, and mobile
• 🔧 TypeScript: Complete type safety and IntelliSense
• 🤖 AI-Ready: Easy integration with OpenAI or custom APIs

🏗️ Project Structure

├── apps/
│   ├── web/          # Vue 3 chat application
│   └── docs/         # VitePress documentation
├── packages/
│   ├── ui/           # Chat components
│   ├── eslint-config-custom/
│   └── tsconfig/

🚀 Quick Start

# Clone and install
git clone <your-repo>
cd ai-chat-starter
pnpm install

# Start development
pnpm dev

This starts:

• Web app: http://localhost:3000
• Documentation: http://localhost:3001

💬 Components

ChatContainer

Main chat interface combining messages, input, and loading states.

ChatMessage

Individual messages with role-based styling and timestamps.

ChatInput

Auto-resizing input with keyboard shortcuts and send button.

TypingIndicator

Animated typing indicator for better UX.

🤖 Basic Usage

<template>
  <ChatContainer
    :messages="messages"
    :loading="loading"
    @send-message="handleSendMessage"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ChatContainer, type ChatMessageType } from 'ui'

const messages = ref<ChatMessageType[]>([])
const loading = ref(false)

const handleSendMessage = async (content: string) => {
  // Add user message
  messages.value.push({
    id: Date.now().toString(),
    content,
    role: 'user',
    timestamp: new Date(),
  })

  // Add your AI integration here
}
</script>

🎨 Customization

Components use CSS custom properties for easy theming:

:root {
  --chat-bg: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  --message-user-bg: rgba(59, 130, 246, 0.1);
  --message-assistant-bg: rgba(16, 185, 129, 0.1);
}

📦 Scripts

• pnpm dev - Start development
• pnpm build - Build for production
• pnpm lint - Run linting
• pnpm format - Format code

🛠️ Tech Stack

• Frontend: Vue 3, Nuxt 3, TypeScript, Vite
• Build: Turborepo
• Docs: VitePress
• Styling: CSS custom properties

📚 Documentation

Visit the documentation at http://localhost:3001 for:

• Component API reference
• AI integration examples
• Styling guides
• Complete examples

The documentation uses VitePress with minimal customization, making it easy to extend and maintain.

📄 License

MIT License