OpenAI Web App

First, decide the high-level stack. For frontend, do you want React/Vue or simple HTML/JS/CSS? I have chosen FastAPI (Python) for backend and React (Next.js) for frontend, hosting on EC2 and potentially use Nginx in future
Launch an EC2 instance, recommended to use t3.small or above (I faced OOM issues using t2.micro free tier)
- Choose Ubuntu 22.04 LTS as the OS.
- Configure default security groups. Also allow all traffic on port 8000 for FastAPI
- If you want to use EC2 instance connect, be sure to allowlist the ec2 instance connect CIDR on port 22, e.g. for PDX the CIDR is 18.237.140.160/29
Connect to EC2 instance and install dependencies

sudo apt update && sudo apt upgrade -y
sudo apt install -y nginx python3-pip python3-venv git certbot python3-certbot-nginx

mkdir ~/ai-app && cd ~/ai-app

pip install fastapi uvicorn openai python-dotenv

Create a simple FastAPI backend and deploy on the instance. Create a file ~/ai_app/main.py like below. The API key should be OpenAI’s API key

from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from openai import OpenAI
import os

# Load API key from .env file
client = OpenAI(api_key="sk-proj-REDACT")  # Use environment variable for security

app = FastAPI()

# Enable CORS to allow frontend requests
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Change "*" to ["http://34.217.96.193:3000"] for stricter security
    allow_credentials=True,
    allow_methods=["*"],  # Allow all methods (GET, POST, OPTIONS, etc.)
    allow_headers=["*"],  # Allow all headers
)

class UserInput(BaseModel):
    prompt: str

@app.post("/chat")
async def chat_with_ai(user_input: UserInput):
    try:
        response = client.chat.completions.create(
            model="gpt-4o",
            messages=[
                {"role": "system", "content": "You are a helpful assistant."},
                {"role": "user", "content": user_input.prompt}
            ]
        )
        return {"response": response.choices[0].message.content}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

Deploy it using

uvicorn main:app --host 0.0.0.0 --port 8000 --reload

* Optionally, run it at background using `nohup uvicorn main:app --host 0.0.0.0 --port 8000 > server.log 2>&1 &`. Then, `tail -f server.log` in another window if you prefer

The backend should be running on http://your-ec2-ip:8000/chat

Build frontend. Install Next.js dependencies

npx create-next-app@latest frontend
cd frontend
npm install axios

Update ~/frontend/app/page.tsx to below

"use client"

import { useState } from "react";
import axios from "axios";

export default function Home() {
  const [input, setInput] = useState("");
  const [response, setResponse] = useState("");

  const handleSubmit = async () => {
    try {
      const res = await axios.post("http://some-ec2-ip:8000/chat", { prompt: input });
      setResponse(res.data.response);
    } catch (error) {
      setResponse("Error: " + error.message);
    }
  };

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>AI Chatbot</h1>
      <textarea value={input} onChange={(e) => setInput(e.target.value)} rows="4" cols="50" />
      <br />
      <button onClick={handleSubmit}>Submit</button>
      <h3>Response:</h3>
      <p>{response}</p>
    </div>
  );
}

* Note to change the IP to your EC2 instance's public IP. This connects the frontend to the backend

Depkloy the frontend using

npm run dev

* Optionaly  `nohup npm run dev > frontend.log 2>&1 &`

Now you should be able to access http://34.220.185.212:8000/chat to view the page, assuming the security group allowlists are in place

Project directory looks like below

$ tree -L 3 
.
├── ai_app/
│   ├── __pycache__/
│   ├── log.txt
│   ├── main.py
│   └── server.log
└── frontend/
    ├── README.md
    ├── app
    │   ├── favicon.ico
    │   ├── globals.css
    │   ├── layout.tsx
    │   └── page.tsx
    ├── eslint.config.mjs
    ├── frontend.log
    ├── next-env.d.ts
    ├── next.config.ts
    ├── nextjs.log
    ├── node_modules/
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.mjs
    ├── public/
    ├── tailwind.config.ts
    └── tsconfig.json

Appendix

How to host a server-based website on AWS that can prompt visitors for text and send text to OpenAI using OpenAI's API. Then, return the result to the users. Give technical details, code, and steps to achieve this. Use most popular tech stacks/tools, and explain why those are chosen. The website should be generally useable and at the same time can be extensible enough to be able to host AI Apps in future. 

For context, I am a software engineer working at a tech company with technical and coding background. However, I have not built an App by myself. I am looking to invest in hosting my own server and develop an App or website.

Also, suppose below is the latest OpenAI API example
from openai import OpenAI
client = OpenAI()

completion = client.chat.completions.create(
    model="gpt-4o-mini",
    messages=[
        {"role": "system", "content": "You are a helpful assistant."},
        {
            "role": "user",
            "content": "Write a haiku about recursion in programming."
        }
    ]
)

print(completion.choices[0].message)

Appendix#

Appendix