ChatGPT API Integration Guide

This repository provides a step-by-step guide on how to integrate OpenAI's ChatGPT API with web applications. It includes a simple web app example using Node.js and Express on the server side and basic HTML, CSS, and JavaScript on the client side. I used my paid plan for purpose of testing.

Table of Contents

• Overview
• Getting Started
  • Prerequisites
  • Obtaining an OpenAI API Key
  • Project Structure
  • Installation
• Using the App
  • Server Setup
  • Client Interaction
• Customization
• Contributing
• License
• Contact

Overview

The provided web app sets up a server that communicates with OpenAI's ChatGPT API, accepts user queries through a web interface, sends these queries to the API, and displays the AI's response.

Getting Started

Prerequisites

• Node.js (LTS version recommended)
• npm (comes with Node.js)
• Basic knowledge of JavaScript and Node.js

Obtaining an OpenAI API Key

1. Visit OpenAI's API platform and sign up or log in.
2. Navigate to the API section and create a new API key for your application.
3. Copy the API key, which you'll use in the app to authenticate API requests.

Project Structure

The application's file structure:

/my-app
|-- /public
|   |-- /css
|   |   |-- style.css
|   |-- /js
|   |   |-- script.js
|   |-- index.html
|-- server.js
|-- package.json
|-- .env
|-- .gitignore

• /public: Static files served by the server.
• server.js: Main server file handling API requests.
• .env: Contains environment variables like the OpenAI API key.
• .gitignore: Specifies files to be ignored by version control.

Installation

To set up the app, clone the repo and install the dependencies:

git clone https://github.com/your-github-username/your-repo-name.git
cd your-repo-name
npm install

Using the App

Server Setup

In the root of your project, create a .env file with your OpenAI API key:

OPENAI_API_KEY=your_api_key_here

Start the server:

node server.js

The server will run on http://localhost:3000.

Also I containrized and tested the app locally.....

Client Interaction

Open your web browser and navigate to http://localhost:3000. Use the web interface to submit queries to the ChatGPT API and see responses.

Customization

You can customize the styles by modifying public/css/style.css and extend the app functionality by changing server.js and public/js/script.js.

Contributing

If you'd like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcome.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Email: mohammed.k.aldaraji@hotmail.com

Project Link: https://github.com/EzioDEVio/chatgpt-app