FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
loading

loading

chat

Public
Like
chat
Home
Code
3
backend
1
frontend
2
README.md
Branches
1
Pull requests
Remixes
History
Environment variables
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
/
README.md
Code
/
README.md
Search
4/8/2025
Viewing readonly version of main branch: v13
View latest version
README.md

AI Chat App

A simple AI chat application built on Val Town using the OpenAI API.

Features

  • Real-time chat interface with an AI assistant
  • Powered by OpenAI's GPT models
  • Modern, responsive design with Tailwind CSS
  • TypeScript for type safety and better developer experience
  • Markdown-like formatting for code blocks and other elements

Project Structure

├── backend/
│   └── index.ts       # Backend API with Hono and OpenAI integration
├── frontend/
│   ├── index.html     # Main HTML template
│   └── index.ts       # Frontend TypeScript
└── README.md

How It Works

  1. The frontend provides a chat interface where users can type messages
  2. Messages are sent to the backend API endpoint
  3. The backend uses the OpenAI API to generate responses
  4. Responses are formatted and displayed in the chat interface

Technologies Used

  • TypeScript: For type safety and better code organization
  • Tailwind CSS: For styling without custom CSS files
  • Hono: Lightweight web framework for the backend
  • OpenAI API: For generating AI responses

Requirements

This app requires an OpenAI API key to be set as an environment variable in Val Town.

Setup

  1. Fork this project in Val Town
  2. Add your OpenAI API key as an environment variable named OPENAI_API_KEY
  3. Run the project

Customization

You can customize the app by:

  • Changing the OpenAI model in the backend (currently using gpt-4o-mini)
  • Adjusting the max tokens parameter for longer or shorter responses
  • Modifying the Tailwind classes to change the appearance
  • Adding additional features like message history or user authentication
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareersBrandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.