Marvin: OpenAI API Usage example in a react app

This app is an example search engine implementation of OpenAI's GPT API using react.js with Firebase as a backend.

Try the live demo here
Do you have questions, comments, or feature requests? Open an issue here or Tweet at me.

Requirements

node.js 16 (note, this repo has an .nvmrc for use with nvm)
A Firebase project with billing enabled
OpenAI API keys

Installation

Step 1: clone this repository:

git clone https://github.com/actuallymentor/marvin.git

Step 2: install all dependencies

cd marvin
npm i
cd functions
npm i
cd ..

Step 3: set environment variables

# This file is called .env in the project root

# Firebase configs
REACT_APP_apiKey=
REACT_APP_authDomain=
REACT_APP_projectId=
REACT_APP_storageBucket=
REACT_APP_messagingSenderId=
REACT_APP_appId=
REACT_APP_measurementId=

# Recaptcha/appcheck config, get these at "AppCheck" in the firebase console and https://www.google.com/recaptcha/admin
REACT_APP_APPCHECK_DEBUG_TOKEN=
REACT_APP_recaptcha_site_key=

# Whether to use the local firebase emulator
REACT_APP_useEmulator=true

# This file is called .env in the ./functions folder

# Find this at https://beta.openai.com/account/org-settings
OPENAI_ORG=

# Find this at https://beta.openai.com/account/api-keys
OPENAI_APIKEY=

# See pricing differences at https://openai.com/api/pricing/
OPENAI_MODEL="text-davinci-003"

Running it locally

To run this locally you need 2 things:

To run the react frontend
To run the Firebase functions emulator (which allows you to see logs as well)

To do this:

Open 2 terminal windows
Navigate to the project directory
In the project root run npm start
In the second window open ./functions and run npm run serve
Open http://localhost:3000/ in a browser

You can now play with the code.