Building a Chatbot with OpenAI/ChatGPT and Xano
1
Understanding the OpenAI Chat Completions Endpoint
Objective: To create a chatbot, you’ll primarily use OpenAI’s chat completions API endpoint.Endpoint: The specific endpoint is
/v1/chat/completions. You’ll make POST requests to this endpoint.Authentication: All requests to the OpenAI API require authentication. This is done by including an Authorization header with a bearer token (your OpenAI API key).Request Body:-
model: Specifies which OpenAI model to use (e.g.,gpt-3.5-turbo). You can find compatible models in the OpenAI documentation. -
messages: This is a crucial part. It’s an array containing the entire conversation history. Unlike interacting directly with ChatGPT, the API requires you to send all previous messages in each request. -
Message Object Structure: Each object in the
messagesarray needs aroleandcontent:-
role: Defines who sent the message.-
system: Sets the initial context or persona for the chatbot (the first “training” prompt). -
user: Represents messages sent by the end-user interacting with the bot. -
assistant: Represents messages sent by the chatbot (responses from the API).
-
-
content: The actual text of the message.
-
temperature, but they aren’t required to get started.2
Define Database Schema
User Table: Create at least one test user for authentication purposes later.Conversation Table (
conversation): This acts as the parent table. Add the following fields:-
name(Type: text): To easily identify conversations. -
model(Type: text): To store which OpenAI model is used for this conversation (e.g., “gpt-3.5-turbo”). -
user_id(Type: Table Reference ->user): To link the conversation to the user who initiated it.
messages): This stores individual messages. Add the following fields, mirroring the structure needed for the OpenAI API request:-
role(Type: text): Stores “system”, “user”, or “assistant”. -
content(Type: text): Stores the actual message text. -
index(Type: integer): A number to track the order of messages within a conversation (0, 1, 2, …). This is crucial for sorting messages correctly for display and for sending them in the right order to the API. -
conversation_id(Type: Table Reference ->conversation): To link the message back to its parent conversation.
3
Create an endpoint to call OpenAI
API Group: Navigate to your API groups in Xano. You can use the default group or create a new one.New API Endpoint: Add a new API endpoint. Choose “Start from scratch” or “Custom”. Name it something descriptive, like
send_message_to_openai.Inputs: Define the necessary inputs for this endpoint. You’ll likely need:-
conversation_id(Input Type: Table Reference ->conversation): To know which conversation this message belongs to. -
user_message(Input Type: text): The new message typed by the user.
- Get OpenAI API Key: Securely retrieve your OpenAI API key. Store it in Xano’s Environment Variables for security rather than hardcoding it.
- Get Conversation History:
-
Add a
Query All Recordsstep for themessagestable. -
Filter by the input
conversation_id. -
Sort by the
indexfield in ascending order. This ensures messages are retrieved chronologically.
-
Add User’s New Message to History (Temporary): Add the incoming
user_messageto the list/array of messages retrieved in the previous step. Make sure it has the correct format:{ "role": "user", "content": user_message }. - Add External API Request: This is the core step to call OpenAI.
- Click the ”+” button in the function stack and select “External API Request”.
- Import cURL: Use the OpenAI documentation’s cURL example for the chat completions endpoint. Copy the cURL command and use Xano’s “Import cURL” feature. This will pre-fill most settings.
-
URL: Should be
https://api.openai.com/v1/chat/completions. -
Method:
POST. -
Headers:
-
Ensure
Content-Typeisapplication/json. -
Add the
Authorizationheader. The value should beBearer YOUR_API_KEY, replacingYOUR_API_KEYdynamically using the environment variable retrieved in step 1. Use Xano’s concatenation filters or sprintf for this.
-
Ensure
-
Parameters/Body:
-
Set
modelto your desired model (e.g., “gpt-3.5-turbo”). You could make this dynamic based on theconversationrecord if needed. -
Set
messagesto the full conversation history array you prepared in step 3 (including the new user message).
-
Set
-
Process API Response: The response from OpenAI will contain the assistant’s reply. You’ll typically find it in
response.result.choices[0].message.content. Add steps to extract this content. - Store Messages in Database:
-
Add a
Add Recordstep for themessagestable to save the user’s new message. Includeconversation_id,role(“user”),content(user_message), and the nextindexnumber. -
Add another
Add Recordstep for themessagestable to save the assistant’s response. Includeconversation_id,role(“assistant”),content(the extracted response), and the subsequentindexnumber.
- Response: Define what the Xano API endpoint should return to your frontend (e.g., the assistant’s message content, or the updated full conversation).
4
Calling from a Frontend
Call the Xano API endpoint (
send_message_to_openai) from your frontend application whenever a user sends a message.Pass the conversation_id and the user_message.Display the conversation history, potentially fetching it separately using the auto-generated Xano CRUD endpoints for the messages table, ensuring you sort by the index field.
