How to connect Python OpenAI script with HTML frontend for web chatbot

marcoMingle · July 30, 2025, 1:05am

I need help connecting my Python backend with an HTML frontend. Currently, I have a functional Python script that interacts with the OpenAI API and displays responses in the terminal. However, I need to show this on a webpage instead.

Here is my Python code:

import openai

openai.api_key = "your_key_here"

def get_ai_response(user_message):
    completion = openai.chat.completions.create(
        model="gpt-3.5-turbo",
        messages=[{"role": "user", "content": user_message}]
    )
    return completion.choices[0].message.content.strip()

while True:
    message = input("Enter message: ")
    if message.lower() in ["stop", "end", "quit"]:
        break
    ai_reply = get_ai_response(message)
    print("AI: ", ai_reply)

And here’s the HTML page I’m using:

<!DOCTYPE html>
<html>
<head>
    <title>AI Chat Interface</title>
    <style>
        .container {
            max-width: 500px;
            margin: 50px auto;
            font-family: sans-serif;
        }
        .messages {
            height: 300px;
            border: 2px solid #ccc;
            padding: 15px;
            overflow-y: auto;
            background: #fafafa;
        }
        .input-box {
            width: 100%;
            padding: 12px;
            margin: 10px 0;
            font-size: 14px;
        }
        .submit-button {
            background: #28a745;
            color: white;
            padding: 12px 25px;
            border: none;
            cursor: pointer;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>AI Chat Bot</h2>
        <div class="messages" id="message-display"></div>
        <input type="text" class="input-box" id="message-input" placeholder="Write your message">
        <button class="submit-button" id="submit-message">Submit</button>
    </div>
    
    <script>
        function addMessage(text) {
            const display = document.getElementById("message-display");
            const newMsg = document.createElement("p");
            newMsg.textContent = text;
            display.appendChild(newMsg);
            display.scrollTop = display.scrollHeight;
        }
        
        function getResponse(input) {
            const text = input.toLowerCase();
            if (text.includes("hello") || text.includes("hi")) {
                return "Hi there!";
            } else if (text.includes("help")) {
                return "How can I assist you?";
            } else {
                return "Thanks for your message!";
            }
        }
        
        document.getElementById("submit-message").onclick = function() {
            const input = document.getElementById("message-input").value;
            addMessage("User: " + input);
            const response = getResponse(input);
            addMessage("Bot: " + response);
            document.getElementById("message-input").value = "";
        };
    </script>
</body>
</html>

The issue is that these two components are not communicating with each other. How can I set up the HTML to send user input to my Python script and receive the AI response back? I’m running this on a cloud server, but the Python portion isn’t connecting with the web interface.

priya.in.pixels · August 5, 2025, 5:40pm

Skip the backend server code and build this as an automated workflow instead.

You’ve got two pieces that don’t talk to each other - Python processing messages and HTML displaying them. Don’t mess with Flask routes and manual HTTP requests. Just connect them through automation.

Set up a workflow that catches form submissions from your HTML page. Someone types a message, hits submit, and it automatically runs your OpenAI logic and sends back the response. No server management or API endpoints to code.

Your Python function barely changes - just ditch that while loop since the workflow handles each message one by one. HTML needs one tweak - instead of calling getResponse locally, send user input to your workflow endpoint.

This handles multiple conversations at once without you managing threads or async code. It scales when traffic picks up and has built-in error handling for OpenAI timeouts and rate limits.

The workflow runs your exact Python logic but makes it web accessible automatically. You get real-time chat responses without dealing with CORS, server deployment, or backend infrastructure headaches.

lucasg · August 5, 2025, 1:16pm

The Problem:

You’re trying to connect a Python backend (using the OpenAI API) with an HTML frontend for a chat application. Your current Python script works in the terminal, but you need to integrate it with your webpage so users can interact with the AI through a browser. The challenge lies in bridging the communication gap between the two. The frontend currently has placeholder functionality and isn’t sending requests to your Python backend.

Understanding the “Why” (The Root Cause):

Your Python script is designed for command-line interaction, using input() for user input and print() for output. Web browsers, however, communicate with servers using HTTP requests (typically POST requests for sending data). Your HTML page needs to send user messages to your Python script via HTTP, and your Python script needs to respond with the AI’s answer via an HTTP response. Your current setup lacks this crucial HTTP communication layer. To make your Python script accessible to the web, you need to package it as a web server application that can handle HTTP requests and responses.

Step-by-Step Guide:

Choose a Web Framework (FastAPI Recommended): FastAPI is a modern, high-performance Python web framework that’s particularly well-suited for asynchronous operations, which are important when dealing with potentially slow API calls like those to OpenAI. It’s easier to handle asynchronous requests in FastAPI compared to Flask, which requires more manual management of asynchronous operations. Install FastAPI using pip:
```
pip install fastapi uvicorn
```

Create a FastAPI Endpoint: This endpoint will receive user messages from the frontend, send them to the OpenAI API, and return the AI’s response. Create a Python file (e.g., main.py):

import openai
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel

openai.api_key = "YOUR_OPENAI_API_KEY"  # Replace with your actual key, best practice is to set this as an environment variable.

app = FastAPI()

class Message(BaseModel):
    user_message: str

@app.post("/chat")
async def chat(message: Message):
    try:
        completion = await openai.ChatCompletion.acreate(
            model="gpt-3.5-turbo",
            messages=[{"role": "user", "content": message.user_message}]
        )
        ai_reply = completion.choices[0].message.content.strip()
        return {"ai_response": ai_reply}
    except openai.error.OpenAIError as e:
        raise HTTPException(status_code=500, detail=str(e))
    except Exception as e:
        raise HTTPException(status_code=500, detail="An unexpected error occurred.")

Run the FastAPI Server: Use uvicorn to run your FastAPI application:
```
uvicorn main:app --reload
```
This will start a server that listens for requests on a default port (usually 8000).

Modify your Frontend (HTML/JavaScript): Replace your getResponse function with a fetch call to your FastAPI endpoint:

document.getElementById("submit-message").onclick = async function() {
    const input = document.getElementById("message-input").value;
    addMessage("User: " + input);
    try {
        const response = await fetch('/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ user_message: input })
        });
        const data = await response.json();
        if (data.ai_response) {
            addMessage("Bot: " + data.ai_response);
        } else {
            addMessage("Bot: An error occurred.");
        }
    } catch (error) {
        addMessage("Bot: Error connecting to the server.");
        console.error("Error:", error);
    }
    document.getElementById("message-input").value = "";
};

Verify CORS (if needed): If your frontend and backend are running on different origins (different domains, ports, or protocols), you might encounter CORS (Cross-Origin Resource Sharing) errors. You might need to add CORS middleware to your FastAPI application to handle these requests from a different origin.

Common Pitfalls & What to Check Next:

API Key Management: Never hardcode your OpenAI API key directly in your code. Use environment variables to securely manage sensitive information.
Error Handling: The provided try...except block handles some errors, but consider adding more robust error handling to gracefully manage various scenarios (network issues, rate limits, etc.).
Asynchronous Operations: FastAPI handles asynchronous operations well. Ensure your fetch call on the frontend is also correctly managed asynchronously using async/await.
Input Validation: Validate user input on both the frontend and backend to prevent vulnerabilities and improve security.
Deployment: Once your application works locally, consider deploying it to a cloud platform like Heroku, Render, or AWS to make it publicly accessible.

Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!

Zack_45Gaming · August 4, 2025, 6:08pm

WebSockets could be perfect here. Right now you’re doing basic request-response, but real chat apps need that instant back-and-forth feel. Skip the polling and page refreshes - WebSockets keep a live connection between your HTML and Python backend. Users get responses immediately without those annoying loading delays.

theSilentTypist · August 4, 2025, 5:35am

The Problem:

You’re trying to integrate a Python script that uses the OpenAI API with an HTML frontend for a chat application. Your current Python script works in the terminal, but you want users to interact with the AI through a browser. The challenge is bridging the communication gap between your frontend and backend without setting up a traditional web server.

Understanding the “Why” (The Root Cause):

Your Python script is designed for command-line interaction, using input() for user input and print() for output. Web browsers communicate with servers using HTTP requests. Your HTML page needs to send user messages to your Python script via HTTP, and your Python script needs to respond with the AI’s answer via an HTTP response. Setting up a full web server (using frameworks like Flask or FastAPI) involves significant setup and configuration. A simpler approach is to use serverless automation to bridge the gap directly. This avoids the complexities of setting up, managing, and maintaining a web server, and instead focuses on connecting your existing code to a platform that handles the HTTP communication for you.

Step-by-Step Guide:

Automate the Workflow: Instead of creating a traditional web server, use a serverless automation platform to handle communication between your HTML frontend and your Python script. This platform will act as a bridge, receiving HTTP requests from your frontend, executing your Python code, and sending the results back to your frontend.
Adjust Your Frontend (HTML): Modify your HTML to send user input to the serverless workflow’s endpoint instead of calling a local function. Your code will likely involve replacing a local function call with a fetch request to this new endpoint. Ensure that the fetch request uses the correct method (POST is usually appropriate for submitting data) and includes the user’s message as part of the request body (often in JSON format).
Configure the Workflow: Set up a new workflow on the automation platform. This workflow will be triggered by HTTP requests from your frontend and will execute your existing Python code to interact with the OpenAI API. The workflow should receive the user’s message from the HTTP request, send it to the OpenAI API, receive the response, and then send the response back to the frontend as a JSON response. The workflow will manage the execution of your Python script within a serverless context, handling the intricacies of HTTP requests and responses.
(Optional) Minor Python Adjustments: You might need to adapt your Python script to receive input from the workflow environment instead of input() and to format the output as JSON for the HTTP response. This could involve minor modifications to how the OpenAI API is called and how the result is returned.

Common Pitfalls & What to Check Next:

Error Handling: Implement robust error handling in your Python script to gracefully manage various scenarios, such as network issues, rate limits, invalid responses from the OpenAI API, or issues with the automation platform itself.
Input Validation: Validate user input on both the frontend and backend to prevent vulnerabilities and improve security.
Authentication: If the automation platform requires authentication, ensure that you configure your workflow correctly to allow communication with your frontend.
API Key Security: Never hardcode your OpenAI API key directly in your code. Use environment variables or secure configuration methods.

Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!

Laura219 · August 4, 2025, 4:08am

flask or fastapi works great! set up a route like @app.route(‘/chat’, methods=[‘POST’]) and ditch that while loop. your html can send ajax requests to this endpoint. watch out for cors issues - browsers will block requests without proper headers.

lucask · August 2, 2025, 11:46pm

Your Python script runs as a standalone process, but HTML runs in a browser - they can’t talk to each other directly. You need to turn your Python code into a web server that handles HTTP requests from your frontend.

Use Flask - it’s the easiest for beginners. Ditch that while loop and wrap your function in a Flask route handler. Then your HTML can use fetch() to POST the user’s message to your Flask endpoint.

Here’s what trips up most people: handling the async stuff properly. When users hit submit, disable the button and show a loading spinner since OpenAI calls take a few seconds. And handle errors or your chatbot will crash - network timeouts, rate limits, bad responses, etc.

One more thing: put your OpenAI API key in an environment variable instead of hardcoding it. You’ll need this when you deploy.

marcoMingle · August 6, 2025, 8:59am

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.