Creating a website like chat.openai

I’m trying to create chatbot website, for myself. Using the openai api. But I can’t find any openai library for browser. Im using openai from npm and it won’t work because theyre using require and exports. Which are not suitable for browser

1 Like

If is wordpress then I have some suggestions? Are you talking about website using node js platform?

sorry late reply, Im currently using html, but please say your suggestions, I may be able to create modifications to make it work

Hi @JerZ,

a Solution which works well for me is to follow the following Tutorial:
Introducing Open AI’s ChatGPT API | Build Power App & use Chat GPT API - YouTube
-Requirement is that you have access to PowerApps

If you want to use it for yourself but you don’t have PowerApps you can join the Microsoft Developer Programm free of charge:
Developer Program | Microsoft 365 Dev Center

That was the easiest way for me, hope this helps you as well :slight_smile:

Regarding HTML, you can build it with PowerApps and embed this in your Website.

Hey I figured it out, and I will put my method here, in case someone want to do the same thing like I did.
So I want to make a website with html, css, javascript that is similar to chat.openai, where you can talk to chatgpt.

To do this, you need to know the basic of requesting the openai API, which you can look it up yourself in the documentation.

Next, make a html file, with a chatbox, chatbubble img, and chatbubble p class.
chatbox is the box where your chat will be
chatbubble is the container of the text you’re sending
chatbubble img is the profile picture
and chatbubble p is the message
You can customize the chat gui however you like

Next, you need to make a javascript file. We will make this js file be hosted, you may host it with the same domain as your website or could be different, but if you’re using the same domain, don’t forget to require parameters to the js file. So, we’re making some kind of our own API. Basically what that does is some kind of an agent between openai API and our website. Inside that js file, we put our openai request. We also make it listen to http request, using express JS.

in the html file we use to send a http request to the hosted js file.
So this is the summary what it does
HTML web → get userInput → send userInput as request to hosted JS file → JS file get the request → send a request to the openai API → get a response from openai API → send a response to HTML web

Why we need to do this:
openai API doesn’t work using in html because it’s not meant to be used in browser. Therefore we need to make a js server to send request to the API.

2 Likes

Body{
Color:red;
Text-formatting:none;
}