Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eziodevio/chatgpt-app
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 and see how it works.
https://github.com/eziodevio/chatgpt-app
chatgpt chatgpt-api chatgpt-app
Last synced: about 1 month ago
JSON representation
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 and see how it works.
- Host: GitHub
- URL: https://github.com/eziodevio/chatgpt-app
- Owner: EzioDEVio
- Created: 2024-04-28T23:42:52.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-02T12:43:28.000Z (8 months ago)
- Last Synced: 2024-05-03T13:21:09.196Z (8 months ago)
- Topics: chatgpt, chatgpt-api, chatgpt-app
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/EzioDEVio/chatgpt-app/actions/workflows/docker-publish.yml)
# 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](#overview)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Obtaining an OpenAI API Key](#obtaining-an-openai-api-key)
- [Project Structure](#project-structure)
- [Installation](#installation)
- [Using the App](#using-the-app)
- [Server Setup](#server-setup)
- [Client Interaction](#client-interaction)
- [Customization](#customization)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#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](https://platform.openai.com/signup) 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:
```bash
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:
```env
OPENAI_API_KEY=your_api_key_here
```
Start the server:
```bash
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: [email protected]
Project Link: [https://github.com/EzioDEVio/chatgpt-app](https://github.com/EzioDEVio/chatgpt-app)
```