Implementing ChatGPT with Stream Chat

3 min read
Ryan Kavanaugh
Ryan Kavanaugh
Published February 7, 2024

With the advent and increasing popularity of artificial intelligence (AI) large language models (LLMs) like ChatGPT and Google's Gemini, many customers wish to implement these solutions to maintain feature parity in the marketplace and provide highly engaging and memorable experiences for their user base.

As an industry-leading solution, Stream evolves alongside these market shifts and provides an easy implementation with ChatGPT. Follow these simple steps to supercharge your app with ChatGPT with a lightning fast implementation.

First, set up an OpenAI account, create an API Key, head to the docs page, and navigate to the tutorial here for setting up your OpenAI API credentials locally.

Step One of Implementation

Next, you will use your existing Stream Chat App or create a new Stream Chat App by clicking “Create App” in the dashboard.

Step Two of Implementation

To quickly test this implementation locally, you can then set up a local server to receive all of your API requests from the Stream webhook with Ngrok. Set up a Ngrok local server, create a free account, and then add an auth token.

Auth token command & Ngrok local server for testing.

Next, set the Stream webhook to send events to your Ngrok Server by including this link in your Webhook URL below. For this example, we assume you set the Port the 80 for the Ngrok server.

Now, we will create a NodeJS script that will exist server-side for your production deployment and create the 2-way communication between Stream Chat and ChatGPT. In this example, it will run locally on Port 80.

Receive the Stream new message webhook event.

javascript
1
2
3
4
5
6
7
8
9
10
11
12
app.post("/", (req, res) => { let body=""; req.on("data", (chunk) => { body+=chunk; }); // Payload from Stream Webhook req.on("end", async () => { let parsedBody = JSON.parse(body); if(parsedBody.message==undefined){ return }

Next, save the message sent by the user, the Channel ID, Channel Type, and User ID.

javascript
1
2
3
4
5
// Capture all the relevant data from the Stream message object const channelID = parsedBody.channel.id const channelType = parsedBody.channel.type const incomingMessage = parsedBody.message.text.toLowerCase() const user = parsedBody.message.user.id

Now, we will send the user’s message to ChatGPT.

javascript
1
2
3
4
5
// Send Chat GPT the user's message const GPTResponse = await openai.chat.completions.create({ messages: [{ role: "system", content: incomingMessage }], model: "gpt-3.5-turbo", });

Finally, we will send the message response from ChatGPT back to the same channel and from a user named “ChatGPT, AI Assistant, etc.”

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Separate out GPT's reponse from other data fields let messageResponse = GPTResponse.choices[0].message.content // Send the Chat GPT response back as a message to the same channel // Initialize Chat & fetch the channel const client = StreamChat.getInstance(process.env.KEY,process.env.SECRET); const channel = client.channel(channelType, channelID, {}) // Send GPT response to the channel const gptmessage = { text: messageResponse, user_id: AIAssitant }; channel.sendMessage(gptmessage); }

Here is the entire script for connecting Stream to ChatGPT.

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
const cors = require("cors"); const port = process.env.PORT || 80; const express = require("express") const app = express(); const OpenAI = require("openai"); const openai = new OpenAI(); const StreamChat = require('stream-chat').StreamChat; require('dotenv').config() // ==================================================================== // This Chat GPT Implementation is created in 3 easy steps: // // Step 1: Save relevant data from the Stream message object provided via webhook event // Step 2: Send Chat GPT the user's message/question and get the response // Step 3. Send the Chat GPT reponse back as a message to the same channel // // Note: You can use the Stream frontend SDKs to easily render this conversation // for the end user with a modern, feature-rich, polished UI // ==================================================================== const AIAssitant = 'ChatGPTUserName' // Middleware app.use(cors()); // This is where all of the main code is executed app.post("/", (req, res) => { let body=""; req.on("data", (chunk) => { body+=chunk; }); // Payload from Stream Webhook req.on("end", async () => { let parsedBody = JSON.parse(body); if(parsedBody.message==undefined){ return } // Step 1. Capture relevant data from the Stream message object const channelID = parsedBody.channel.id const channelType = parsedBody.channel.type const incomingMessage = parsedBody.message.text.toLowerCase() const user = parsedBody.message.user.id // Step 2. Send Chat GPT the user's message/question and get the response try { // Confirming the message was sent by the user if (user != AIAssitant) { // Send Chat GPT the user's message const GPTResponse = await openai.chat.completions.create({ messages: [{ role: "system", content: incomingMessage }], model: "gpt-3.5-turbo", }); // Separate out GPT's reponse from other data fields let messageResponse = GPTResponse.choices[0].message.content // Step 3. Send the Chat GPT reponse back as a message to the same channel // Initialize Chat & fetch the channel const client = StreamChat.getInstance(process.env.KEY,process.env.SECRET); const channel = client.channel(channelType, channelID, {}) // Send GPT response to the channel const gptmessage = { text: messageResponse, user_id: AIAssitant }; channel.sendMessage(gptmessage); } } catch (error) { console.log(error); } res.status(200).send("OK"); }); }); app.listen(port, () => { console.log(`server running on port ${port}`); });

Now you have successfully implemented ChatGPT with Stream Chat! Please contact us with any questions.

Integrating Video With Your App?
We've built a Video and Audio solution just for you. Check out our APIs and SDKs.
Learn more ->