Step-by-Step Guide to Building a Simple Chat Application with GPT-4o-mini API

This guide explains how to create a simple chat application using the OpenAI API and Flask, a Python web framework. You'll learn to set up your development environment, integrate the OpenAI API for generating responses, and build a web interface for user interaction.

Prerequisites

Basic knowledge of Python
OpenAI API Key (available from OpenAI's website)
Flask (Python web framework)
HTML/CSS knowledge for the frontend

Step 1: Set Up Your Development Environment

Install Python if it is not already installed. Download it from python.org.

Set up a virtual environment:

1python -m venv myenv
2source myenv/bin/activate  # On Windows use `myenv\Scripts\activate`

Install necessary libraries:
sh
```
1pip install openai flask
```

Step 2: Create the Flask App

Create a directory for the project:

1mkdir openai_chat_app
2cd openai_chat_app

Create a Python file (app.py) for the Flask app:

python

1from flask import Flask, request, render_template
2import openai
3
4app = Flask(__name__)
5
6# Set your OpenAI [API](/glossary/api) key
7openai.api_key = 'your_openai_api_key'
8
9@app.route('/')
10def index():
11    return render_template('index.html')
12
13@app.route('/chat', methods=['POST'])
14def chat():
15    user_input = request.form['user_input']
16    response = openai.ChatCompletion.create(
17        model="gpt-4o-mini",
18        messages=[
19            {"role": "system", "content": "You are a helpful assistant."},
20            {"role": "user", "content": user_input}
21        ]
22    )
23    chat_response = response.choices[0].message['content']
24    return render_template('index.html', user_input=user_input, chat_response=chat_response)
25
26if __name__ == '__main__':
27    app.run(debug=True)

Step 3: Create the HTML Template

Create a templates directory and an index.html file inside it:

html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>OpenAI Chat App</title>
7    <style>
8        body { font-family: Arial, sans-serif; margin: 20px; }
9        .chat-box { max-width: 600px; margin: auto; }
10        textarea { width: 100%; height: 100px; }
11        .response { margin-top: 20px; }
12    </style>
13</head>
14<body>
15    <div class="chat-box">
16        <h1>Chat with OpenAI</h1>
17        <form action="/chat" method="POST">
18            <textarea name="user_input" placeholder="Type your message here..."></textarea>
19            <button type="submit">Send</button>
20        </form>
21        {% if user_input %}
22            <div class="response">
23                <h2>Your Input:</h2>
24                <p>{{ user_input }}</p>
25                <h2>OpenAI's Response:</h2>
26                <p>{{ chat_response }}</p>
27            </div>
28        {% endif %}
29    </div>
30</body>
31</html>

Step 4: Run the App

Run your Flask app:
sh
```
1python app.py
```
Open your browser and go to http://127.0.0.1:5000/. You will see a chat interface for user text input and AI responses.

You have successfully built a basic chat application using the OpenAI API with Flask. This app allows users to interact with the AI model, providing a foundation for developing more advanced applications.

(Edited on September 4, 2024)