🚀 Astro AI Chatbot Template - Vercel SDK Edition

🌟 Overview

Astro AI Chatbot Template is a modern, production-ready template for building AI-powered chat interfaces. Built with Astro, React, and the Vercel AI SDK, it provides a beautiful, responsive UI with mock implementations that you can easily replace with real AI providers.

Perfect for developers who want to quickly bootstrap AI chat applications with multiple provider support, conversation history, file uploads, and a polished user experience.

🚀 Quick Start

1. Clone and Install

   git clone https://github.com/Marve10s/Astro-Vercel-SDK-AI-Chatbot.git
   cd Astro-Vercel-SDK-AI-Chatbot
   pnpm install

   Or Fork and Install

   1.1 Click the 'Fork' button in the top right corner of this repository

   1.2 Clone your forked repository

   git clone https://github.com/YOUR_USERNAME/Astro-Vercel-SDK-AI-Chatbot.git
   cd Astro-Vercel-SDK-AI-Chatbot && pnpm install

2. Development

   pnpm dev

3. Configure Environment

   cp .env.example .env.local

   Add your API keys for the providers you want to use:

   • OpenAI (OPENAI_API_KEY)
   • Anthropic (ANTHROPIC_API_KEY)
   • Google Gemini (GOOGLE_GENERATIVE_AI_API_KEY)
   • Groq (GROQ_API_KEY)

4. Build

   pnpm build
   pnpm preview

⭐ Features

• 🤖 Multiple AI Providers - OpenAI, Anthropic, Google Gemini, Groq
• 💬 Real-time Streaming - Token-by-token response streaming
• 📁 File Uploads - Support for image attachments
• 🌙 Dark/Light Mode - Built-in theme switching
• 💾 Conversation History - Persistent chat sessions
• 📱 Responsive Design - Mobile-first approach
• 🎨 Beautiful UI - Modern design with Tailwind CSS
• ⚡ Fast Performance - Astro's static generation + React islands
• 🔧 TypeScript - Full type safety
• 🧩 Modular Components - Easy to customize and extend

📁 Project Structure

/
├── public/              # Static assets
├── src/
│   ├── components/
│   │   ├── Chatbot.tsx          # Main chat interface
│   │   ├── ThemeToggle.tsx      # Theme switcher
│   │   ├── prompt-kit/          # UI primitives
│   │   │   ├── chat-container.tsx
│   │   │   ├── message.tsx
│   │   │   ├── prompt-input.tsx
│   │   │   └── ...
│   │   └── ui/                  # Shared UI components
│   ├── lib/
│   │   └── utils.ts             # Utility functions
│   ├── mocks/                   # Mock implementations
│   │   ├── ai-vercel-sdk.ts     # AI provider mocks
│   │   └── supabase.ts          # Database mocks
│   ├── pages/
│   │   └── index.astro          # Main page
│   └── styles/
│       └── global.css           # Global styles + Tailwind
├── astro.config.mjs     # Astro configuration
├── tailwind.config.mjs  # Tailwind configuration
└── package.json

📊 Performance

Metric	Score
🚀 Performance	98/100
♿ Accessibility	96/100
🏗️ Best Practices	100/100
🔍 SEO	100/100

🛠️ Customization

AI Providers

Add support for new AI providers by extending the mock implementations in src/mocks/ai-vercel-sdk.ts:

export type Provider = "openai" | "anthropic" | "google" | "groq" | "your-provider";

UI Components

• Modify src/components/prompt-kit/ for core UI changes
• Add custom components in src/components/
• Customize themes in src/styles/global.css

Backend Integration

Replace mock functions with real API calls:

// Replace this in Chatbot.tsx
import { generateChat } from "@/mocks/ai-vercel-sdk";

// With your real implementation
import { generateChat } from "@/lib/ai-service";

🚀 Deployment

Vercel (Recommended)

1. Push to GitHub
2. Connect to Vercel
3. Add environment variables
4. Deploy!

Other Platforms

The template works with any static hosting service. For API routes, use:

// src/pages/api/chat.ts
export const config = { runtime: "edge" };

export async function POST({ request }) {
  // Your AI logic here
}

🎨 Share Your Creation

Have you built something amazing with this template? I'd love to see it!

• Create a GitHub issue with screenshots
• Share your demo link and modifications

🌟 Community Showcases

Check out these amazing implementations by our community:

[Your project here - be the first to showcase!]

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ using Astro and Vercel AI SDK