Val Town Code SearchReturn to Val Town

14|                     | Before                    | Now        |
15|---------------------|---------------------------|------------|
16| **Rendering**       | Astro                     | React      |
17| **Version control** | GitHub                    | Val Town   |
18| **Text editing**    | Local editor              | Val Town   |

1# AI Chat App
2
3A sleek, dark-themed AI chat application built with React on Val Town using the OpenAI API.
4
5## Features
6
7- React-based chat interface with component architecture
8- Elegant dark theme with purple/indigo accents
9- Powered by OpenAI's GPT models
20│   └── index.ts       # Backend API with Hono and OpenAI integration
21├── frontend/
22│   ├── components/    # React components
23│   │   ├── App.tsx    # Main application component
24│   │   ├── Message.tsx # Message component for chat bubbles
25│   │   └── ChatInput.tsx # Input component with send button
26│   ├── index.html     # HTML shell for React app
27│   └── index.tsx      # React entry point
28└── README.md
29```
31## How It Works
32
331. The React frontend provides a component-based chat interface
342. Messages are managed with React state
353. API requests are sent to the backend endpoint
364. The backend uses the OpenAI API to generate responses
40## Technologies Used
41
42- **React**: For component-based UI architecture
43- **TypeScript**: For type safety and better code organization
44- **Tailwind CSS**: For styling without custom CSS files
60
61You can customize the app by:
62- Modifying React components to add new features
63- Changing the OpenAI model in the backend (currently using gpt-4o-mini)
64- Adjusting the max tokens parameter for longer or shorter responses

44});
45
46// Serve React app files
47app.get("/", (c) => serveFile("/frontend/index.html", import.meta.url));
48app.get("/index.tsx", (c) => serveFile("/frontend/index.tsx", import.meta.url));
49
50// Serve React components
51app.get("/components/:filename", (c) => {
52  const filename = c.req.param("filename");

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
4import { App } from './components/App.tsx';
5
11    const root = createRoot(rootElement);
12    root.render(
13      <React.StrictMode>
14        <App />
15      </React.StrictMode>
16    );
17  }

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState, useRef, useEffect } from 'https://esm.sh/react@18.2.0';
3import { Message } from './Message.tsx';
4import { ChatInput } from './ChatInput.tsx';

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState, useRef, useEffect, KeyboardEvent, MouseEvent } from 'https://esm.sh/react@18.2.0';
3
4interface ChatInputProps {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useEffect, useRef } from 'https://esm.sh/react@18.2.0';
3
4interface MessageProps {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export function ValCard({ val }) {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { BlogPost as BlogPostType } from "../utils/types.ts";
4import Byline from "./Byline.tsx";

20
21- **`/index.ts`**: Main entry point that sets up Hono routing and middleware
22- **`/components/`**: React components for rendering the blog
23  - **`Layout.tsx`**: Shared layout with header, footer, and styling
24  - **`HomePage.tsx`**: Renders the blog homepage with featured and recent posts
37### Technical Stack
38
39- **React**: For server-side rendering components
40- **Hono**: Lightweight web framework for routing
41- **Custom CSS**: For styling (no external frameworks)