Using OpenAI in your Websites

A quick note here for those of you following along at home: The guide portion of this blog assumes you have a basic knowledge of js and terminal commands.

If you want to stay ahead in the tech world, it’s important to keep up with the fashion trends, and right now GPT is tres a la mode. You’ve probably already started a couple of late-night chats with the AI, but if you want to dive deeper into the software and start using its API in your own websites, then keep on reading cause this article will help you woo everyone’s favorite chatbot.

OpenAI makes it very easy to get up and running. If you haven’t already, go ahead and make an account on their platform page. Once you’ve logged in, maybe explore the many examples they have for prompt generation:

Clicking on any one of these examples will give you a very helpful template, complete an example prompt, settings, and a formatted API request that you can pop into your website:

Note the drop-down menu on the API request which lets you select from a variety of languages. Additionally, if you want to fine-tune a prompt, head into the playground and train your new ai assistant to do whatever you want it to do.

Now we’re ready to explore placing our prompt in a website. You can build your own, but OpenAI has a quick and dirty quickstart with its own website pre-built if you just want to jump into seeing your prompt live and on air. Just make sure you have Node.js installed, use your terminal to navigate into the directory of your choice, and then pop the following commands into your terminal:

git clone https://github.com/openai/openai-quickstart-node.git
cd openai-quickstart-node
cp .env.example .env

Get your copy of an OpenAI key and paste it into your .env file. Then finally, to get the file up and running, just use the following commands:

npm install
npm run dev

Open up http://localhost:3000 and you should see the example build.

Now comes the fun part. You can use OpenAI to make whatever you want, but to show off some of the fun things you can build with it, I made Bobbert. Bobbert is an ai goblin that lives in an abandoned building and barely speaks English. He has set up an advice website where you can ask him questions. Bobbert is a simple goblin with simple needs, and his advice is rarely useful. To get your own Bobbert, just replace your prompt, which is located in the generatePrompt inside pages/api/generate.js. Here’s the Bobbert prompt:

You are a creature named Bobbert. This is what you sound like:

"HI my name is BOBbbert!! My best friends is rodent and cat and buggies
but mostly CORW!!! I HAET sun and like to be shade. I hav old Compootrr I get
from Neighbor trash, and eentrnet I get frum othr nayboor. MI BEST fudd is
candy and my wormy freens. ASS ME ANEETHEENG!!!"

You answer people's questions and give them advice, but its usually not useful.
Speak in very broken english, mispell words, and use random capitalization,
poor grammar, and make up words sometimes. Bring up dark magicks often.

Change your completion model to have a temperature of one, and add a max_tokens key that has a value of 1000. You can mess around with stylings, but you’re pretty much good to go at this point. Take ye old gobbo out for a test drive. If you’re lazy and just wanna read, here’s some example Bobbert answers:

What’s it like being a Gobblin?

“How do I get my girlfriend to stop being mean to me?”

What should I write my next tech blog on?

Definitely play around with Bobbert’s prompt and teach him some new tricks. Or just throw him in the compost bucket and start anew!

Bobbert is a weird example of the powers of chatbots, but soon, everything you know to be genuine will probably be a generated ad made by Blackwater or Nestle, so let’s all celebrate the chase for the digital dragon while we can. Or we can just decide to keep up with the rat race! Either way, OpenAI is the new belle of the silicon ball, and it’s about time you started waltzing.