Log inSign up
tijs
tijsfamily-gpt-chat
Public
Like
family-gpt-chat
Code
6
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Search
index.ts
README.md

Family GPT Chat

A ChatGPT-like chat application built for Val Town using React and Hono with OpenAI integration.

Features

  • 💬 Real-time chat interface with ChatGPT-like styling
  • 🤖 OpenAI GPT-3.5-turbo integration via Val Town's standard library
  • 📱 Responsive design with Tailwind CSS
  • ⚡ Fast TypeScript development with Deno
  • 🔄 Conversation history maintained during session
  • ⏳ Loading states and error handling
  • ✅ Full type safety with TypeScript

Project Structure

family-gpt/
├── backend/
│   ├── index.ts          # Hono server with chat API
│   └── index.test.ts     # Backend tests
├── frontend/
│   ├── components/
│   │   ├── App.tsx       # Main chat interface
│   │   ├── ChatMessage.tsx # Individual message component
│   │   └── MessageInput.tsx # Message input form
│   ├── index.html        # Bootstrap HTML file
│   └── index.tsx         # React entry point
├── shared/
│   └── types.ts          # Shared TypeScript types
└── deno.json             # Deno configuration

API Endpoints

  • GET / - Serves the React frontend
  • POST /api/chat - Chat with OpenAI (requires message and optional conversation history)
  • GET /api/health - Health check endpoint
  • GET /frontend/* - Static file serving

Development

Prerequisites

  • Deno runtime
  • Val Town account (for deployment)

Local Development

# Type check
deno task check

# Format code
deno task fmt

# Lint code
deno task lint

# Run tests
deno task test

# Run all quality checks
deno task quality

Deployment to Val Town

# Deploy (runs quality checks first)
deno task deploy

Technology Stack

  • Backend: Hono framework
  • Frontend: React with TypeScript
  • Styling: Tailwind CSS (via CDN)
  • AI: OpenAI GPT-3.5-turbo via Val Town's standard library
  • Runtime: Deno
  • Platform: Val Town

Usage

  1. Open the application in your browser
  2. Type a message in the input field
  3. Press Enter or click Send
  4. The AI will respond with helpful information
  5. Continue the conversation - history is maintained during the session

Features to Add

  • Streaming responses for real-time chat feel
  • Conversation persistence across sessions
  • Message editing and deletion
  • Export conversation history
  • Custom system prompts
  • Multiple conversation threads

Contributing

This project follows Val Town development best practices:

  • TypeScript everywhere
  • Testable code with dependency injection
  • SOLID principles
  • Quality checks before deployment

🤖 Generated with opencode

HTTP
Code