A sleek, dark-themed AI chat application built with React on Val Town using the OpenAI API.

• React-based chat interface with component architecture
• Elegant dark theme with purple/indigo accents
• Powered by OpenAI's GPT models
• Modern, responsive design with Tailwind CSS
• TypeScript for type safety and better developer experience
• Enhanced markdown-like formatting for code blocks and other elements
• Smooth animations and loading indicators
• Auto-resizing text input

├── backend/
│   └── index.ts       # Backend API with Hono and OpenAI integration
├── frontend/
│   ├── components/    # React components
│   │   ├── App.tsx    # Main application component
│   │   ├── Message.tsx # Message component for chat bubbles
│   │   └── ChatInput.tsx # Input component with send button
│   ├── index.html     # HTML shell for React app
│   └── index.tsx      # React entry point
└── README.md

1. The React frontend provides a component-based chat interface
2. Messages are managed with React state
3. API requests are sent to the backend endpoint
4. The backend uses the OpenAI API to generate responses
5. Responses are formatted with enhanced markdown support and displayed in the chat interface
6. UI includes loading indicators and smooth animations for better user experience

• React: For component-based UI architecture
• 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
• CSS Animations: For smooth transitions and loading indicators

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

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

You can customize the app by:

• Modifying React components to add new features
• Changing the OpenAI model in the backend (currently using gpt-4o-mini)
• Adjusting the max tokens parameter for longer or shorter responses
• Modifying the color scheme by changing the Tailwind classes
• Adding additional features like message history or user authentication
• Extending the markdown formatting to support more elements