ChatGPT Clone

A complete ChatGPT-like interface built with React and Hono, featuring:

  • Modern ChatGPT-style UI with dark theme
  • Real-time chat interface
  • Message history
  • Typing indicators
  • Responsive design
  • OpenAI GPT integration

Project Structure

├── backend/
│   └── index.ts             # Main Hono server with API routes
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main chat application
│   │   ├── ChatMessage.tsx  # Individual message component
│   │   └── ChatInput.tsx    # Message input component
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   └── style.css            # Custom styles
├── shared/
│   └── types.ts             # Shared TypeScript types
└── README.md

Features

  • Chat Interface: Clean, modern design matching ChatGPT's appearance
  • Message History: Persistent conversation history
  • Real-time Responses: Streaming-like response display
  • Responsive Design: Works on desktop and mobile
  • Dark Theme: Modern dark theme similar to ChatGPT

Setup

  1. Set your OpenAI API key in environment variables as OPENAI_API_KEY
  2. The app will be available at the HTTP endpoint

Usage

Simply start typing in the chat input and press Enter or click Send to get AI responses.