Build a ChatGPT Web App with GPT4

AJ Picard
ZoZo App
Published in
2 min readApr 11, 2023

--

Below is the code that GPT4 generated when we asked it to create a ChatGPT web app, make sure you implement your OpenAI key so that you can make API calls. If you don’t do this crucial step you will run into a ton of errors!

1. First, create a new React app using create-react-app:

npx create-react-app chatgpt-app
cd chatgpt-app

2. Install Axios to handle API requests:

npm install axios

3. In your src folder, create a new file named ChatGPT.js:


import React, { useState } from ‘react’;
import axios from ‘axios’;

const ChatGPT = () => {
const [input, setInput] = useState(‘’);
const [responses, setResponses] = useState([]);

const handleInputChange = (e) => {
setInput(e.target.value);
};

const handleSubmit = async (e) => {
e.preventDefault();
if (!input) return;

try {
const response = await axios.post(
‘https://api.openai.com/v1/engines/davinci-codex/completions',
{…

--

--

AJ Picard
ZoZo App

UI/UX Designer who loves designing and building products. Currently scaling ZoZo App.