AI Chat Assistant: React Based Project

Here is an AI Chat Assistant, a React-based web app that offers smart, interactive conversations. It uses advanced AI to understand and respond to user queries, providing a simple and engaging chat experience. Built with React, the app is fast, responsive, and easy to customize.

File and Folder Organization

Setup

• Install Client Dependencies: Navigate to the client folder and install the dependencies:

cd client
npm install

• Install Server Dependencies: Navigate to the server folder and install the server-side dependencies:

cd ../server
npm install

• Start the Client (React App):

cd client
npm run dev

• Start the Server (Backend):

cd ../server
npm run dev

Code base

• src

• src/components

• src/services

• src/server

Output

Core Files Explained

Entry Point

main.jsx: Renders the root React component (App) into the DOM.

App Component

App.jsx: Sets up the layout and renders the header, titles, and the main Chat component. It provides the structure for the chat interface and contains static content like the app title.

Components

• Chat.jsx: Handles chat functionality, manages state (messages, loading, error), and sends/receives messages from the server.
• Avatar.jsx: Displays avatars for user, AI, or error.
• MessageBubble.jsx: Renders individual chat messages with an option to copy.
• CopyButton.jsx: Allows the user to copy a specific message to the clipboard.
• SendIcon.jsx: Displays the send icon used in the chat input form.

API Interaction

api.js: Handles communication with the back-end server. It sends a POST request to the /api/chat route with the chat messages and receives the AI’s response.

Backend (Express)

server.js: Handles two routes:

• /api/health: Health check to verify server is running.
• /api/chat: Sends messages to OpenAI API and returns responses.

Environment Variables

.env: Stores the OpenAI API key and server port.