Code Pack - makeanything

Open AI ChatGPT Create Anything Application

Have AI Create Excel Word PDF Documents for Users Who Want Full NoCode Tools

Technologies
react
python
Themes
fastapi
chatgpt
Skill Level
beginner
Last updated
2023-02-16
Code Package Image for Open AI ChatGPT Create Anything Application

What's Inside

As seen on YouTube: https://youtu.be/4N8_5ZoLutI.

You know how Chat GPT can write any code you ask it to? Well…what if you could have a piece of software which not only tells AI what to write, but also to then structure and execute the code for the end user.

On this application, you will be able to type ‘/excel has’ followed by any command you like for AI to then understand what kind of spreadsheet you want for example. In other words, a user can type in what excel document they want and the ai will go ahead and build it for them.

Very exciting. We truly are at the beginning stages of what generative AI can do and this project if developed further could serve as an excellent no-code tool for people who really don’t want to deal with the coding side.

Uses

-
Use FastAPI to receive requests and interact with the Open AI API in order to turn a request and string output, into actual python code
-
Use React as the frontend with a really smart looking UI that encourages engagement from your end user
-
Use tailwind for easy formatting of your UI and Vite for super fast React Builds

Requirements

-
You need experience working with Python, React and Typescript for this project to a beginner level.
-
You will need to be on the billing plan for Open AI or on a free trial. If you are not on either, Open AI API queries will not work.

START

What you need to get running

Below is the basic software you will need to get started:

Python(developed with version: 3.10.8)
Node(developed with version: 18.11.0)
ts-node(developed with version: 10.9.1)
Yarn(developed with version: 1.22.19)

Step 1

Download package

Click the download button at the top of this page. Then save the project on your desktop of project folder. Going forward, we will assume a project name as 'myproject'.
However, you may of course name the project folder whatever makes sense for your purpose.

Step 2

Setup FastAPI backend

Change directory into your myproject/backend folder where the code package is saved:

$(root/) 

cd myproject/backend
Create a virtual environment:

$(root/myproject/backend) 

python3 -m venv venv
Activate your venv (MAC):

$(root/myproject/backend) 

source venv/bin/activate
Activate your venv (WINDOWS):

$(root/myproject/backend) 

source venv/Scripts/activate
Install packages

$(venv)(root/myproject/backend) 

pip3 install fastapi "uvicorn[standard]" pandas python-decouple openai xlsxwriter docx python-docx reportlab fpdf matplotlib

SPECIAL NOTE: The code which Open AI generates is still young. Meaning it can be prone to forgetting to pull in a python library, or use a python library which is not installed above. Within the backend, you will see this issue print out. When it happens, simply just install the library that the AI wants to use.

Now add a ‘.env’ file

($ myproject/backend) 

touch .env

You will need your Open AI Org and Key, you can get these by going here:

Org: https://platform.openai.com/account/org-settings

Key: https://platform.openai.com/account/api-keys

Within your .env file (the dot is important), add the following environment variables:

OPEN_AI_ORG = "YOUR OPEN AI ORG"
OPEN_AI_KEY = "YOUR OPEN AI KEY"

Open AI is not free, if you do not have billing set up on your account, you will not be able to make use of the application. Now run your FastAPI Instance:

$(venv)(root/myproject/backend) 

uvicorn main:app --reload

You can now test your backend is working by going to the below url in your browser: http://localhost:8000

You should receive a ‘hello’ response.

Step 3

Setup React frontend

Change directory into your ‘frontend’ folder and type the following:

($ myproject/frontend) 

yarn --exact
Build your frontend to check everything is working:

($ myproject/frontend) 

yarn build
Run your frontend in development mode:

($ myproject/frontend) 

yarn dev

You can now test your frontend is working by going to the below url in your browser: http://localhost:3000

You should see something that looks like this:

Step 4

Test it out

Ensure your FastAPI backend instance is running:

~$(venv)(root/myproject/backend) 

uvicorn main:app --reload

Ensure your React frontend instance is running at the same time:

$(venv)(root/myproject/frontend) 

yarn dev
Navigate to the frontend in your browser: http://localhost:3000
Now in the text field on the browser, type:

/excel has 2 columns with binance crypto price data and a third column in
    the color red saying elephants

CONGRATULATIONS

Your application is working

Your file should have now downloaded. Go ahead and delete this file in the backend once you are happy and try other prompts.

That’s it. Congratulations, you made it!