AI Chat Application

A professional AI chat assistant powered by Claude 3.5 Sonnet, built with Next.js and deployed on Google Cloud Run.

Features

• 🤖 Real-time AI conversations with Claude 3.5 Sonnet
• 💬 Streaming responses for better user experience
• 📱 Fully responsive design for desktop and mobile
• 🔄 Session-based conversation management
• 🎨 Clean, business-like UI with TailwindCSS
• 🚀 Optimized for Google Cloud Run deployment

Tech Stack

• Frontend: Next.js 15 (App Router), React 19, TypeScript
• Backend: Next.js API Routes, Hono
• Database: MongoDB with Prisma ORM
• AI: Anthropic Claude 3.5 Sonnet
• Styling: TailwindCSS
• Deployment: Google Cloud Run, Docker

Prerequisites

• Node.js 20+
• Docker and Docker Compose (for MongoDB)
• Anthropic API key
• Google Cloud account (for deployment)

Installation

1. Clone the repository:

git clone <repository-url>
cd ai-chat

2. Start MongoDB with Docker:

docker compose up -d mongodb

3. Install dependencies:

npm install

4. Set up environment variables:

cp .env.local.example .env.local

Edit .env.local with your values:

ANTHROPIC_API_KEY=your_anthropic_api_key
MONGODB_URI=mongodb://localhost:27017/ai-chat
NEXT_PUBLIC_APP_URL=http://localhost:3000

5. Generate Prisma client:

npx prisma generate

6. Run the development server:

npm run dev

Open http://localhost:3000 to see the application.

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm test - Run tests
• npm run test:watch - Run tests in watch mode
• npm run test:coverage - Run tests with coverage

Project Structure

/
├── app/                # Next.js app directory
│   ├── api/           # API routes
│   │   ├── chat/      # Chat endpoint
│   │   ├── session/   # Session management
│   │   └── health/    # Health check
│   ├── layout.tsx     # Root layout
│   └── page.tsx       # Home page
├── components/        # React components
│   ├── ChatInterface.tsx
│   ├── MessageList.tsx
│   ├── InputArea.tsx
│   └── TypingIndicator.tsx
├── lib/              # Utility libraries
│   ├── prisma/       # Prisma client
│   └── mastra/       # AI client
├── prisma/           # Database schema
└── __tests__/        # Test files

Deployment

MongoDB Management

Stop MongoDB:

docker compose down

View MongoDB logs:

docker compose logs mongodb

Using Docker

1. Build the Docker image:

docker build -t ai-chat .

2. Run the container:

docker run -p 3000:3000 --env-file .env.local ai-chat

Google Cloud Run

1. Ensure you have the gcloud CLI installed and configured

2. Deploy using the provided script:

./deploy.sh [PROJECT_ID] [REGION]

3. After deployment, set the environment variables in Cloud Run console:
   • ANTHROPIC_API_KEY
   • MONGODB_URI
   • NEXT_PUBLIC_APP_URL

API Endpoints

Health Check

• GET /api/health
• Returns service health status

Session Management

• GET /api/session/new
• Creates a new chat session

Chat

• POST /api/chat
• Body: { sessionId: string, message: string }
• Returns: Server-sent events stream

Security Considerations

• API keys are stored as environment variables
• Sessions expire after 24 hours
• Input validation on all endpoints
• Rate limiting considerations for production

Performance

• React.memo optimization for message components
• Streaming responses for real-time feel
• Standalone Next.js build for optimal Docker images
• Configured for 5-10 concurrent users

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

This project is licensed under the ISC License.