OpenAI

Artificial Intelligence is shaping the future of web applications. One of the most powerful tools in this space is ChatGPT, developed by OpenAI. In this tutorial, you’ll learn how to integrate ChatGPT with Django to build your AI-powered web app. We will use OpenAI’s API and Django to create a web app where users can enter a prompt and get a response from ChatGPT. What Is the ChatGPT API? The ChatGPT API is a cloud-based REST API provided by OpenAI. It allows your app or website to send messages to the model and receive smart, human-like responses. It’s part of OpenAI’s Chat Completions API, designed specifically for multi-turn conversation, like a chatbot. Prerequisites Step 1: Get Your OpenAI API Key Step 2: Create a New Django Project django-admin startproject djangoGpt cd djangoGpt python manage.py startapp chatbot Now we will create a model to store chats: from django.db import models class Chat(models.Model): user_message = models.TextField() bot_response = models.TextField() timestamp = models.DateTimeField(auto_now_add=True) def __str__(self): return f”{self.timestamp}: {self.user_message[:30]}” Step 3: Create View 1. You Send a Request Your backend Django sends a POST request to this endpoint: https://api.openai.com/v1/chat/completions This request includes: Here’s a basic example using Python: import openai client = OpenAI(api_key=settings.OPENAI_API_KEY) response = client.chat.completions.create( model=”gpt-3.5-turbo”, messages=[ {“role”: “user”, “content”: user_input} ] ) 2. OpenAI Processes It OpenAI’s servers receive your input and pass it through a transformer-based language model trained on billions of tokens. The model understands: It generates a predicted response, which is context-aware and intelligent. 3. You Get a Smart Response The API returns a JSON response that looks like this: { “choices”: [ { “message”: { “role”: “user”, “content”: “The capital of France is Paris.” } } ] } What Does chat_view Do? The chat_view Function serves two main purposes: Let’s examine it in parts and understand how it works together. We use OpenAI’s chat.completions endpoint to get a response from a model like gpt-3.5-turbo Show chat history in the frontend In your chat.html You can fetch and loop through previous chats: {% extends ‘base.html’ %} {% block content%} <div class=”container mt-5″> <h3 class=”text-center mb-4″>Django Chatbot</h3> <div class=”chat-box mb-4″ id=”chat-container”> {% for chat in chats %} <div class=”bot-msg”> <div class=”message”><strong>Bot:</strong> {{ chat.bot_response }}</div> </div> <div class=”user-msg”> <div class=”message”><strong>You:</strong> {{ chat.user_message }}</div> </div> {% endfor %} </div> <form id=”chat-form” method=”post”> {% csrf_token %} <div class=”input-group”> <input type=”text” class=”form-control” name=”message” id=”message-input” placeholder=”Type your message…” required> <button class=”btn btn-primary” type=”submit”>Send</button> </div> </form> </div> <script> const form = document.getElementById(“chat-form”); const messageInput = document.getElementById(“message-input”); const chatContainer = document.getElementById(“chat-container”); form.addEventListener(“submit”, async function(e) { e.preventDefault(); const userMessage = messageInput.value.trim(); if (!userMessage) return; const csrfToken = document.querySelector(‘[name=csrfmiddlewaretoken]’).value; // Show user message chatContainer.innerHTML += ` <div class=”user-msg”> <div class=”message”><strong>You:</strong> ${userMessage}</div> </div> `; chatContainer.scrollTop = chatContainer.scrollHeight; messageInput.value = “”; // Send request const response = await fetch(“”, { method: “POST”, headers: { “Content-Type”: “application/x-www-form-urlencoded”, “X-CSRFToken”: csrfToken, }, body: new URLSearchParams({ message: userMessage }), }); const data = await response.json(); // Show bot response chatContainer.innerHTML += ` <div class=”bot-msg”> <div class=”message”><strong>Bot:</strong> ${data.response}</div> </div> `; chatContainer.scrollTop = chatContainer.scrollHeight; }); </script> {%endblock%} Create a .env file in the project dir and add your api key: Do not expose your api key in production OPENAI_API_KEY=”your api key” If you have any doubts, feel free to comment below this post or contact me