OpenAI Chatbot

A beautiful, modern chatbot application built with React, TypeScript, and the OpenAI API.

Features

• Clean and intuitive chat interface
• Real-time messaging with OpenAI's GPT models
• Markdown support for rich text formatting
• Responsive design that works on all devices
• Secure API key handling (stored locally)
• Dark/Light mode support (system preference)

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn
• An OpenAI API key (Get one here)

Installation

1. Clone the repository:

git clone <repository-url>
cd react-tsx

2. Install dependencies:

npm install

Running the Application

1. Start the development server:

npm run dev

2. Open your browser and navigate to http://localhost:3000

3. Enter your OpenAI API key when prompted

4. Start chatting with the AI!

Building for Production

To create a production build:

npm run build

The built files will be in the dist directory.

To preview the production build:

npm run preview

Project Structure

react-tsx/
├── src/
│   ├── components/
│   │   ├── ChatMessage.tsx      # Individual message component
│   │   ├── ChatMessage.css
│   │   ├── ChatInput.tsx        # Input field component
│   │   └── ChatInput.css
│   ├── services/
│   │   └── openai.ts            # OpenAI API integration
│   ├── App.tsx                  # Main app component
│   ├── App.css
│   ├── main.tsx                 # Application entry point
│   └── index.css
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Technologies Used

• React 18 - UI framework
• TypeScript - Type-safe JavaScript
• Vite - Fast build tool and dev server
• OpenAI API - AI chat capabilities
• React Markdown - Markdown rendering

Security Note

This application uses dangerouslyAllowBrowser: true for the OpenAI client, which is suitable for development and personal use. For production applications, you should:

1. Create a backend server to handle OpenAI API calls
2. Store the API key securely on the server
3. Never expose your API key in client-side code

Customization

Change the AI Model

Edit src/services/openai.ts and modify the model parameter:

model: 'gpt-4', // or 'gpt-3.5-turbo', 'gpt-4-turbo', etc.

Adjust AI Behavior

Modify the temperature and max_tokens parameters in src/services/openai.ts:

temperature: 0.7,  // Lower = more focused, Higher = more creative
max_tokens: 1000,  // Maximum response length

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.