AI Elements Remix Template

A modern chat interface template built with AI SDK and customizable UI components.

Tech Stack

• React Router V7 - Full-stack React framework
• AI SDK - Vercel AI SDK for chat functionality
• shadcn/ui - Beautiful UI components built on Radix UI
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server

Features

• 🤖 AI Chat Interface - Complete chat UI with streaming responses
• 🎨 Beautiful Components - Pre-built AI Elements components
• 🔧 Configurable - Easy to customize and extend
• 🌙 Dark Mode - Built-in theme switching
• 📱 Responsive - Mobile-first design
• 🔑 Client-side API Key - Secure local storage of credentials

Getting Started

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

Usage

1. Click the settings icon to configure your AI Gateway API Key
2. Select your preferred model from the dropdown
3. Start chatting with the AI assistant

Components

This template includes reusable AI-focused components:

• Conversation interface with scrolling
• Message rendering with syntax highlighting
• Model selection dropdown
• Settings dialog for API configuration
• Responsive prompt input with toolbar