Learn how to build a functional AI chat assistant that integrates user messages and AI responses seamlessly through OpenAI's API. Discover the key steps and troubleshooting strategies to ensure your AI chat functions smoothly.
Key Insights
- Establishes a conversation by creating an initial prompt ("You are a customer service assistant") and appending both user messages and AI responses to maintain context throughout the interaction.
- Demonstrates the process of connecting to OpenAI's GPT-4 model to generate AI responses, unpacking the API's response to extract and append the relevant text messages within the conversation.
- Highlights troubleshooting strategies, including identifying JSON formatting errors, verifying request body structures, and methodically checking Python and JavaScript code to resolve unexpected errors during implementation.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
This is a lesson preview only. For the full lesson, purchase the course here.
You know, we've got a separate function for that called chat with AI. Chat, conversation, append. All righty, so we've appended.
If the conversation has a length of zero, we've appended the initial prompt: "You are a customer service assistant." We have unconditionally, no matter what, appended the user message, which is coming in from the request body.
And now we're calling the function that connects to the API. That is your chat with API function. We're passing it the conversation.
Set the call equal to a variable to capture the AI's response message text—the AI message. Set the call to a variable, capture the AI's response text—that's the message. Append the AI’s response to the conversation.
Conversation.append. AI message equals a call to chat with AI, passing in the conversation right there. The big function that communicates with the OpenAI API. Save the returned result, which is the AI's answer message.
That's where we append the user's message. And then after that, we have to append the AI's response message to the conversation. So the conversation is now going to get the AI's message added, keeping everything up-to-date.
AI message. The role is assistant. Content contains the message.
And then we're going to return JSONify—send that message and conversation back to fetch, back to JS. We're going to return, not render template, we're going to return JSONify.
This object is coming back at you. It consists of two key-value pairs: the AI message (the value is the AI message) and the updated conversation.
That’s going back as well. Remove all the code after the if name equals main. That was all that stuff.
We don't have to change anything in the chat with AI function, except this. We don't even need to do that. We have the conversation here.
Yeah, that was already there too. Yeah. Yep.
And then all this we take out. What we keep is that, right? We're not running anything in the terminal. We’re sending a request using the GPT-4 model, the conversation messages, max tokens, and temperature. The AI answer is returned.
We're going to unpack it, drill all the way down to the text answer, and return that. So that's the value of the function call, which is here. We grab that text, append it to the conversation, and pass all that back to JavaScript.
It's a nifty little bit of hustle and bustle, as Todd Parker would say—or did say—in Boogie Nights. This is pretty good. That's it.
Now connected. Start the server. See if it works.
See if you can chat. I'm going to ask about Bainleaf's products, and it isn't answering.
Has not answered yet. Okay. Usually would have answered by now.
All right. Let's see what's going on. Error.
Unexpected something or another. 51. All right.
Catch the error and log it. What's wrong with that? 51.
Oh, it's not valid JSON. I think this is doing an error. All right.
What’s not valid JSON? What's coming back is not valid JSON. What are we sending back? JSONify. That should be okay.
Two properties. Doesn't like what's coming back, huh? Oh. Content and message.
Yeah. Role user, content user message. Okay.
Is it not parsing this properly? Request JSON. request.json.get. User message conversation. User message.
What's being sent, though? It's not called that, is it? Over in the JavaScript? I wouldn't think so. What's being sent? Oh, it's underscore user_message. Yeah, yeah.
Of course, it's underscore. You can't have that. All right.
There you go. That's why. All right.
Probably that. Didn't like the JSON. Okay.
May I inquire about your product? Unexpected. Doesn't like the JSON. It's dropping an error.
Okay. Let's go back. Okay.
Script 10 is hitting. Script 10. Chat with AI.
Oh, I changed it to chat. Did I? Yeah, we'll call it just chat. No, that's not the problem.
I'm not switching that. That is not the issue. User message conversation.
Stringify the JSON. This is not valid JSON, though. Methods post.
User message conversation. Conversation. User chat message.
Stringify it. User message conversation. Conversation[0].
User message. All the things. Append the answer.
Return the conversation. Why is that not…? Let’s print. What do you mean it's not valid JSON? Let's print stuff.
Print so we can watch the error log. User message. Conversation.
Why doesn't it like me printing? Oh, there's a comma. Print it again. Wow.
Broken now. User message. Line 16.
Let's fix that. Script post JS 30. Internal server error.
All right. Chat with AI. Chat with AI.
What's going on? Chat with AI. That's the route. That's what we're fetching.
That's what's coming in. Why would it not…? Matt, why would it have a problem with that? And then chat, which is fine. Call it whatever we want.
Wait, is it stepping on that thing? I don't think so. No. No, you can call it…
Let's change it to AI chat. Just for the heck of it. It's not going to matter.
Chat. Script. JS page 30.
Line 30. JS line 30. Fetch.
Chat with AI. User message. User chat message.
Body stringify, method post. Why is that not valid JSON? Chat message text. JSON, JSON, AI object.
Oh, bugger. It's AI object. I bet you that's the problem.
Yeah. It's calling the message. Okay.
Let's see if that fixes it. Internal server error. It's not valid JSON.
It's not valid JSON. Cannot access local variable. What? Print conversation line 17 in the Python. Oh, no.
Can't do that until you've extracted it. Not good.
Why, why, why? Internal server error. Unexpected token. Server error.
Page 30. Why does it not like my chat? Chat with AI. Chat with AI.
We're logging the chat message so we know the function is running. It's getting to here and it's quitting out. Content type application headers.
How is that different? Not any different. 100% the same, man. Ay, ay, ay.
All right. Shoot. I don't want to.
Oh. Object. Call it whatever you want.
That's the JSON response object. Okay. We're not calling AI JSON.
Just calling response. Okay. Conversation.
Oh, I think I know.
No? Okay. Fine. Good.
Oh, it's speaking Spanish, too. Wow. All right.
It worked. I went back to the solution code. There was an error in there somewhere, but let’s see here.
What did we do? We import Flask, request, render_template, jsonify, and the OpenAI API. We instantiate our app. We've got our OpenAI key.
Client. A route. Render template.
User conversation. Did we have the client and the key? I think we did. Anyway, it's great now.
We grab the incoming user message and conversation from the request body coming in from fetch. Check if this is a conversation and add the initial prompt. Append the user message to the conversation.
Send the conversation to the AI as the argument of this. Send convo to AI or chat with AI. We'll call it send convo.
We just kind of have the same name, right? Chat with AI. Send convo, conversation to AI. Whatever you like.
This function name doesn’t matter, but I don’t want you to be confused either. That’s for sure. AI.
Send convo to AI. Fine. Response equals client.chat.completions.create. We've spent time on this much earlier in the lessons.
Response is the answer. We drill in to get the text answer out, and that's what we return. So, that's what gets stored in the function call—the return value, which is the AI's message stripped down to just the text, which we append to the conversation and return the whole conversation.
The assistant can respond in Spanish. Do you have apple trees? Do you sell them? Yep. It's working.
Okay. That's the end of 10. A little rough.
There was an error, so I went back to the previously completed version. I've done all these lessons multiple times to make sure they work, but I just had some bug. In the interest of time, I switched the final server and JS file. Might have been a comma somewhere, literally. So, there we go.
Okay. That is the end of Lesson 10. We have our two-way chat going now between the AI and the user.
The only thing lacking is context. We can ask a lot of general questions, and it generates a response based on what it can infer from the website name. In the next and final lesson to complete this AI chat assistant, we're going to provide context by taking a big file full of FAQ text and sending that along to the OpenAI API with the conversation so that it will be able to answer. It'll be able to draw upon specific website product knowledge to respond.
All right. That's the last lesson, too. Coming at you.