ChatGPT Web Interface - Project Documentation

📖 Project Overview

ChatGPT Web Interface is a modern, feature-rich web application built with React that provides a beautiful and intuitive chat experience with OpenAI API integration. This project offers real-time messaging, conversation history management, full markdown support with syntax highlighting, dark/light theme toggle, message actions (copy, edit, delete, regenerate), and a fully responsive design. Perfect for developers looking to build modern AI chatbot interfaces or integrate ChatGPT functionality into their applications.

⚡ Quick Facts

🎯 Type: React Web Application

🤖 AI Models: GPT-3.5 Turbo, GPT-4, GPT-4 Turbo

⚡ Setup Time: ~5 minutes

📦 Dependencies: 7 npm packages

🎨 UI Framework: React 18.2.0

🌐 API: OpenAI API v4.20.1

📱 Responsive: Mobile, Tablet, Desktop

🌙 Themes: Light & Dark Mode

15+

Files

3000+

Lines of Code

10+

Features

Components

Developer: Molla Samser | Website: rskworld.in | Email: help@rskworld.in

Difficulty Level: Beginner to Intermediate - Perfect for developers new to React, AI chatbots, and OpenAI API integration.

✨ Features

Core Features

🔌 OpenAI API Integration

Seamless integration with OpenAI GPT-3 and GPT-4 APIs for intelligent conversations.

🤖 GPT-3 & GPT-4 Support

Support for multiple models including GPT-3.5 Turbo, GPT-4, and GPT-4 Turbo.

💬 Conversation Management

Full conversation history and context handling for natural conversations.

⚙️ Easy Customization

Highly customizable system prompts, temperature, and response parameters.

Advanced Features

🚀 Real-time Messaging

Interactive chat interface with message timestamps and real-time updates.

📱 Responsive Design

Works perfectly on mobile, tablet, and desktop with adaptive layouts.

💾 Conversation History

Multiple conversations with localStorage persistence and management.

💾 Export Conversations

Export conversations as JSON format with all message data included.

🔍 Conversation Search

Search through conversation history with easy-to-use interface.

📝 Markdown Rendering

Beautiful markdown and code syntax highlighting with multiple language support.

🌙 Dark Mode

Toggle between light and dark themes with persistent preference storage.

💬 Message Actions

Copy, edit, delete, and regenerate messages with intuitive user interface.

🔄 Advanced Error Handling

Retry logic with exponential backoff, graceful error messages, and network error handling.

🌐 React Web Interface

Beautiful and modern React-based web application with responsive design.

⚙️ Settings Panel

Configure model, temperature, max tokens, and streaming options easily.

⌨️ Keyboard Shortcuts

Quick navigation with Ctrl+K (sidebar), Ctrl+N (new conversation), Ctrl+, (settings).

🛠️ Technologies

OpenAI API

Official OpenAI API for GPT models

API

React 18.2.0+

Modern React JavaScript library

Framework

JavaScript (ES6+)

Modern JavaScript programming language

Language

GPT-3 & GPT-4

Advanced language models

AI Models

React Markdown

Markdown parsing and rendering

Library

React Syntax Highlighter

Code syntax highlighting for multiple languages

Library

Remark GFM

GitHub Flavored Markdown support

Library

📦 Installation

Prerequisites

Node.js 14.0 or higher and npm
OpenAI API key (Get one here)

Quick Installation (Copy & Paste)

# 1. Install dependencies
npm install

# 2. Create .env file in root directory
echo REACT_APP_OPENAI_API_KEY=your_api_key_here > .env

# 3. Start development server
npm start

Detailed Setup Steps

Clone or download this project

git clone https://github.com/rskworld/chatgpt-web-interface.git
cd chatgpt-web-interface

Install dependencies:
```
npm install
```
Set up your OpenAI API key:
Using .env file (Recommended)

Create a .env file in the root directory:
```
REACT_APP_OPENAI_API_KEY=your_openai_api_key_here
```
Replace your_openai_api_key_here with your actual API key.

Get your API key from: https://platform.openai.com/api-keys
Run the application:
```
npm start
```
The application will automatically open in your browser at http://localhost:3000
Build for production (optional):
```
npm run build
```
This creates an optimized production build in the build folder.

✅ Quick Start: After installation, you're ready to chat with GPT! The React web interface provides the best user experience with all advanced features. Just run npm install, create .env file with your API key, and run npm start.

📚 Usage

Getting Started

Start the development server: npm start
The app will automatically open at http://localhost:3000
Start chatting with the AI assistant
Use the Settings panel (Ctrl+,) to configure:
- Model selection (GPT-3.5 Turbo, GPT-4, GPT-4 Turbo)
- Temperature (controls randomness, 0-2)
- Max tokens (response length, 100-4000)
- Streaming responses toggle

Features Usage

New Conversation: Click "New Chat" button or press Ctrl+N
Toggle Sidebar: Click sidebar icon or press Ctrl+K
Open Settings: Click settings icon or press Ctrl+,
Message Actions: Copy, edit, delete, or regenerate messages using action buttons
Search Conversations: Use the search bar in the sidebar
Export Conversations: Click export button to save as JSON
Theme Toggle: Switch between light and dark themes

💻 Code Examples

Basic React Component Usage

import React from 'react';
import ChatInterface from './components/ChatInterface';

function App() {
  const [conversation, setConversation] = React.useState([]);
  
  const handleAddMessage = (message) => {
    setConversation([...conversation, message]);
  };
  
  return (
    <ChatInterface
      conversation={conversation}
      onAddMessage={handleAddMessage}
      settings={{
        model: 'gpt-3.5-turbo',
        temperature: 0.7,
        maxTokens: 1000,
        useStreaming: false
      }}
    />
  );
}

export default App;
                

OpenAI Service Usage

import { sendMessage } from './services/openaiService';

// Send message with GPT-3.5 Turbo
const response = await sendMessage(
  'Hello, how are you?',
  {
    model: 'gpt-3.5-turbo',
    temperature: 0.7,
    maxTokens: 1000
  }
);
console.log(response.content);

// Send message with GPT-4
const gpt4Response = await sendMessage(
  'Explain quantum computing',
  {
    model: 'gpt-4',
    temperature: 0.8,
    maxTokens: 1000
  }
);
                

Streaming Response

import { streamMessage } from './services/openaiService';

// Stream response
const stream = await streamMessage('Hello', {
  model: 'gpt-3.5-turbo'
});

for await (const chunk of stream) {
  console.log(chunk.content);
}
                

Theme Management

import { toggleTheme, getTheme } from './utils/theme';

// Toggle between light and dark theme
toggleTheme();

// Get current theme
const currentTheme = getTheme();
console.log(currentTheme); // 'light' or 'dark'
                

Markdown Rendering

import { renderMarkdown } from './utils/markdownRenderer';

// Render markdown content
const htmlContent = renderMarkdown('# Hello World\n\nThis is **bold** text.');
// Returns HTML with syntax highlighting
                

Environment Configuration

// .env file
REACT_APP_OPENAI_API_KEY=your_api_key_here

// Access in code
const apiKey = process.env.REACT_APP_OPENAI_API_KEY;
                

🔗 OpenAI API Integration

Service Methods

The application uses the OpenAI API directly through the openaiService.js service layer.

Main Functions

Function	Description
sendMessage()	Send message and get response from OpenAI API
streamMessage()	Stream response from OpenAI API in real-time
getModels()	Get available OpenAI models

Configuration Options

Option	Description	Default
model	OpenAI model (gpt-3.5-turbo, gpt-4, gpt-4-turbo)	gpt-3.5-turbo
temperature	Controls randomness (0-2)	0.7
maxTokens	Maximum tokens in response (100-4000)	1000
stream	Enable streaming responses	false

⚙️ Configuration

Configuration in this React application is handled through:

Environment Variables

Create a .env file in the root directory:

REACT_APP_OPENAI_API_KEY=your_openai_api_key_here

Note: All React environment variables must start with REACT_APP_

Settings Panel

Use the Settings panel (Ctrl+,) to configure:

Model Selection: Choose between GPT-3.5 Turbo, GPT-4, or GPT-4 Turbo
Temperature: Control response randomness (0.0 - 2.0, default: 0.7)
Max Tokens: Set maximum response length (100 - 4000, default: 1000)
Streaming: Toggle real-time streaming responses (optional)

Settings are automatically saved to localStorage and persist across sessions.

Theme Configuration

The application supports both light and dark themes. Theme preference is automatically saved to localStorage and persists across sessions. You can toggle themes using the theme switcher in the interface.

📁 Project Structure

chatgpt-web-interface

chatgpt-web-interface/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── components/
│   │   ├── ChatInterface.js
│   │   ├── MessageList.js
│   │   ├── Message.js
│   │   ├── Sidebar.js
│   │   ├── SidebarEnhanced.js
│   │   ├── InputArea.js
│   │   └── SettingsPanel.js
│   ├── services/
│   │   └── openaiService.js
│   ├── utils/
│   │   ├── markdownRenderer.js
│   │   └── theme.js
│   ├── styles/
│   │   └── App.css
│   ├── App.js
│   └── index.js
├── package.json
├── README.md
├── RELEASE_NOTES.md
├── LICENSE
└── .gitignore

Note: Create a .env file in the root directory with your REACT_APP_OPENAI_API_KEY.

📄 Detailed File Descriptions

⚛️ App.js

Purpose: Main React application component. Contains the root component that manages the application state, conversation management, and coordinates all child components.

Key Features:

React application root component
State management for conversations
Sidebar and chat interface coordination
Settings management
Theme management
LocalStorage persistence

💬 ChatInterface.js

Purpose: Main chat interface component. Handles message display, input area, and real-time messaging functionality.

Key Features:

Message list rendering
Message input handling
OpenAI API integration
Streaming response support
Message actions (copy, edit, delete, regenerate)
Markdown rendering

📋 MessageList.js

Purpose: Message list component. Renders all messages in the conversation with proper formatting and styling.

Key Features:

Message list rendering
Scroll management
Message formatting
Timestamp display

💭 Message.js

Purpose: Individual message component. Displays a single message with markdown rendering, code highlighting, and action buttons.

Key Features:

Message display with markdown
Code syntax highlighting
Copy, edit, delete, regenerate actions
User and assistant message styling

📂 Sidebar.js

Purpose: Sidebar navigation component. Displays conversation list and navigation controls.

Key Features:

Conversation list display
New conversation button
Conversation selection
Sidebar toggle functionality

🔍 SidebarEnhanced.js

Purpose: Enhanced sidebar component with search functionality. Extends the basic sidebar with conversation search capabilities.

Key Features:

Conversation search
Search result highlighting
Rename conversations
Delete conversations
Export conversations

⌨️ InputArea.js

Purpose: Message input component. Handles user input, send button, and keyboard shortcuts.

Key Features:

Message input field
Send button
Enter to send, Shift+Enter for new line
Input validation
Loading states

⚙️ SettingsPanel.js

Purpose: Settings panel component. Provides configuration options for model, temperature, max tokens, and streaming.

Key Features:

Model selection (GPT-3.5, GPT-4)
Temperature control
Max tokens configuration
Streaming toggle
Settings persistence

🔌 openaiService.js

Purpose: OpenAI API service. Handles all API calls to OpenAI including standard and streaming responses.

Key Features:

OpenAI API integration
Chat completion API
Streaming response support
Error handling
API key management
Request configuration

📝 markdownRenderer.js

Purpose: Markdown rendering utilities. Provides functions for rendering markdown content with syntax highlighting.

Key Features:

Markdown parsing
Code syntax highlighting
Multiple language support
HTML sanitization

🎨 theme.js

Purpose: Theme management utilities. Handles dark/light theme switching and persistence.

Key Features:

Theme toggle functionality
LocalStorage persistence
Theme state management
CSS variable updates

🎨 App.css

Purpose: Main stylesheet. Contains all styling including dark/light theme, responsive design, and component styles.

Key Features:

CSS variables for theming
Dark and light theme styles
Responsive design
Component-specific styles
Animations and transitions

📦 package.json

Purpose: NPM package configuration. Contains dependencies, scripts, and project metadata.

Key Features:

Dependency management
Build scripts (start, build, test)
Project metadata
React and OpenAI dependencies

📖 README.md

Purpose: Project overview and quick start guide. Provides introduction, features, installation instructions, and usage examples.

Contents:

Project description
Features list
Installation guide
Usage instructions
Project structure
Support information

📝 RELEASE_NOTES.md

Purpose: Release notes. Documents features, changes, and updates in the current version.

Contents:

Release information
Feature list
Technical details
Changelog

⚖️ LICENSE

Purpose: MIT License file. Contains the full MIT License text and copyright information.

License Type: MIT License

🚫 .gitignore

Purpose: Git ignore rules. Specifies files and directories that should not be tracked by version control.

Excluded Items:

.env files (API keys)
node_modules/ directory
build/ directory
IDE configuration files
OS-specific files
Log files

📊 File Statistics

15+

Total Files

React Components

Documentation Files

Service/Utils Files

3000+

Lines of Code

Directories

📌 File Organization

React Components: App.js, ChatInterface.js, MessageList.js, Message.js, Sidebar.js, SidebarEnhanced.js, InputArea.js, SettingsPanel.js

Services & Utils: openaiService.js, markdownRenderer.js, theme.js

Documentation: README.md, RELEASE_NOTES.md, LICENSE

Configuration: package.json, .gitignore, .env

Styles: App.css

🚀 Advanced Features Details

1. Real-time Messaging & Streaming

Interactive chat interface with OpenAI API integration. Support for GPT-3.5 Turbo, GPT-4, and GPT-4 Turbo models. Optional streaming responses provide a real-time typing effect as the AI generates its response, creating a more engaging user experience.

2. Markdown & Code Rendering

Full markdown rendering with GitHub Flavored Markdown (GFM) support. Includes syntax highlighting for code blocks with automatic language detection, supporting multiple programming languages. Supports tables, lists, links, headings, blockquotes, and more.

3. Conversation Management

Multiple conversations with localStorage persistence. Create, rename, search, export as JSON, and delete conversations easily through the enhanced sidebar interface. All conversation history is automatically saved and restored on page reload.

4. Message Actions & Editing

Copy messages to clipboard with one click, edit user messages after sending, delete messages, and regenerate AI responses. Each message has intuitive action buttons for quick interactions without disrupting the conversation flow.

5. Customizable Settings

Settings panel allows you to customize model selection (GPT-3.5 Turbo, GPT-4, GPT-4 Turbo), temperature (0-2), max tokens (100-4000), and streaming options. All settings are automatically saved and persist across sessions.

6. Modern UI/UX Design

Clean, modern interface design inspired by ChatGPT's design language. Features smooth animations, transitions, beautiful typography, and a polished user experience. Dark and light themes with CSS variables for easy customization.

7. Keyboard Shortcuts

Powerful keyboard shortcuts for quick navigation: Ctrl/Cmd+K to toggle sidebar, Ctrl/Cmd+N for new conversation, Ctrl/Cmd+, to open settings. Enter to send messages, Shift+Enter for new lines in the input field.

8. Responsive & Accessible

Fully responsive design that works perfectly on mobile, tablet, and desktop devices. Adaptive layouts, touch-friendly controls, and optimized user experience across all screen sizes and devices.

🔧 Troubleshooting

API Key Issues

Make sure your .env file contains REACT_APP_OPENAI_API_KEY=your_key
Note: React environment variables must start with REACT_APP_
Restart the development server after changing .env file
Verify your API key is valid at OpenAI Platform

Installation Errors

Install all dependencies: npm install
Make sure you're using Node.js 14.0+
Clear cache and reinstall: rm -rf node_modules package-lock.json && npm install

Rate Limits

OpenAI API has rate limits based on your plan
If you hit rate limits, wait a moment and try again
Consider upgrading your OpenAI plan for higher limits

Common Issues

Module not found errors: Run npm install to install all dependencies
API key errors: Check your .env file contains REACT_APP_OPENAI_API_KEY
Port already in use: The default port is 3000. Change it in package.json or set PORT environment variable
Build errors: Clear cache with npm start -- --reset-cache
Streaming not working: Check browser console for errors, ensure your API key has streaming permissions

📋 Requirements

react: ^18.2.0
react-dom: ^18.2.0
react-scripts: 5.0.1
openai: ^4.20.1
axios: ^1.6.2
react-markdown: ^9.0.1
remark-gfm: ^4.0.0
react-syntax-highlighter: ^15.5.0
                

See package.json for the complete list of dependencies.

🎯 Use Cases

💻 Development

AI coding assistant for developers

📚 Education

Learning and tutoring platform

💼 Business

Professional consultation and advice

✍️ Creative Writing

Storytelling and content creation

💬 General Chat

Casual conversations and assistance

🌍 Translation

Multilingual support and translation

💬 Support

For support, questions, or more projects:

Website: https://rskworld.in
Email: help@rskworld.in
Phone: +91 93305 39277

📄 License

This project is provided as-is for educational and development purposes.

MIT License - See LICENSE file for details.

📂 Demo Folder Structure

The demo/ folder contains demonstration and documentation files for this project.

demo/
├── index.html    # This documentation page
├── style.css     # Stylesheet (optional, styles are inline)
└── script.js     # JavaScript (optional, can be added for interactivity)
                

📄 Demo Files Description

📄 index.html

Purpose: Comprehensive project documentation and information page. This HTML file contains all details about the ChatGPT Web Interface project.

Contents:

Complete project overview
All features documentation
Installation instructions
Usage examples
Code examples
API integration reference
Configuration details
Detailed file and folder descriptions
Project structure
Troubleshooting guide
Support information

Features:

Self-contained HTML with inline CSS
Responsive design
Modern, beautiful UI
Well-organized sections
Easy navigation

🎨 style.css

Purpose: External stylesheet file (optional). Currently, all styles are embedded inline in index.html, but this file can be used for additional custom styles if needed.

Status: Empty file - can be used for custom styling

Usage: Add custom CSS styles here if you want to override or extend the inline styles in index.html

📜 script.js

Purpose: External JavaScript file (optional). Can be used to add interactive features to the documentation page.

Status: Empty file - can be used for additional functionality

Potential Uses:

Table of contents navigation
Smooth scrolling
Search functionality
Copy code snippets
Theme toggle
Print functionality
Interactive elements

💡 About the Demo Folder

The demo/ folder is separate from the main chatgpt-web-interface/ project folder. It contains:

Documentation: This comprehensive HTML documentation page that explains the entire project
Styling: Optional CSS file for custom styling
Scripts: Optional JavaScript file for enhanced interactivity

Note: To view this documentation, simply open demo/index.html in any web browser. The page is self-contained and works offline.