AI Chat Application with Next.js 15 and Gemini 2.0

A modern AI chat application built on Val Town using:

  • Next.js 15-inspired structure
  • TailwindCSS for styling
  • Google's Gemini 2.0 model for AI responses

Project Structure

├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts     # API endpoint for chat
│   ├── layout.tsx           # Root layout component
│   └── page.tsx             # Main page component
├── components/
│   ├── chat-input.tsx       # Chat input component
│   ├── chat-message.tsx     # Message component
│   ├── chat.tsx             # Main chat component
│   └── providers.tsx        # Context providers
├── lib/
│   ├── gemini.ts            # Gemini API utilities
│   ├── storage.ts           # Storage utilities
│   └── types.ts             # TypeScript types
└── public/
    └── favicon.svg          # Favicon

Setup

  1. Create a Google AI Studio API key at https://aistudio.google.com/
  2. Add your API key as an environment variable in Val Town named GEMINI_API_KEY

Features

  • Real-time chat interface
  • Message history persistence
  • Markdown rendering for code blocks and formatting
  • Responsive design with TailwindCSS
  • Next.js 15 App Router-inspired structure

Usage

Access the application through the HTTP endpoint URL.