Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elebitzero/openai-react-chat
Chat webapp frontend to OpenAI's API with similar features to ChatGPT. Written in React, TailwindCSS, and Typescript..
https://github.com/elebitzero/openai-react-chat
chatgpt openai openai-api react tailwindcss typescript webapp
Last synced: 5 days ago
JSON representation
Chat webapp frontend to OpenAI's API with similar features to ChatGPT. Written in React, TailwindCSS, and Typescript..
- Host: GitHub
- URL: https://github.com/elebitzero/openai-react-chat
- Owner: elebitzero
- License: mit
- Created: 2023-06-26T00:04:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-21T08:42:18.000Z (13 days ago)
- Last Synced: 2025-01-21T11:11:06.671Z (13 days ago)
- Topics: chatgpt, openai, openai-api, react, tailwindcss, typescript, webapp
- Language: TypeScript
- Homepage:
- Size: 10.5 MB
- Stars: 77
- Watchers: 3
- Forks: 26
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# OpenAI React Chat Web Application
This project provides a web frontend for the OpenAI chat API. This project is for developers or advanced users that are familiar with [OpenAI ChatGPT](https://chat.openai.com/) but want to customize the web interface.
## Goals
* Provide the same features as [OpenAI ChatGPT](https://chat.openai.com/) and
[OpenAI Playground](https://platform.openai.com/playground?mode=chat).
* Use a modern web stack of React, Tailwind CSS, and Typescript.See [FEATURES.md](FEATURES.md) for details.
## Preview
![openai-react-chat-0812-demo](https://github.com/user-attachments/assets/4140d46c-cff2-481b-b606-d2ce869209f3)
## Requirements
* [Node.JS](https://nodejs.dev/en/)
* [npm](https://www.npmjs.com/)
* [OpenAI API Account](https://openai.com/blog/openai-api)
* Note: GPT-4 API access is currently accessible to those who have made at least [one successful payment](https://help.openai.com/en/articles/7102672-how-can-i-access-gpt-4) through the OpenAI developer platform.## Setup
1. Clone the repository.
```
git clone https://github.com/elebitzero/openai-react-chat.git
```
2. Copy [env.json](src/env.json) to `local.env.json` and change 'your-api-key-here' to your [OpenAI Key](https://platform.openai.com/account/api-keys)
3. Build & Run the web server
```
npm install
npm run start
```The local website [http://localhost:3000/](http://localhost:3000/) should open in your browser.
## Contributions
All contributions are welcome. Feel free to open an issue or create a pull request.