openai-chatgpt-api

A sample interactive chatbot application that can be used for roleplay based on some storyline, using ChatGPT API, powered by gpt-3.5-turbo, OpenAI's advanced language model, built using Next 13, the React framework.

---

ChatGPT API を使用して、ロールプレイに使用できるインタラクティブなチャットボットサンプルアプリです。

Motivation

This app aims to provide a simple and convenient user interface to facilitate interactive roleplay conversation with a chatbot based on some storyline/scenarios.

---

このアプリは、ストーリー/シナリオに基づいたチャットボットとの対話型ロールプレイ会話を容易にするシンプルで便利なユーザーインターフェースを提供することを目的としています。

App

I included two sample stories with scenes and characters that you can use for testing. The user interface is very simple and intuitive so it is easy to use.

Select the Story you want or Add New Story:

Edit or write your own Story prompt:

Edit or write your own Scene prompt:

Edit or write your own Character prompt:

Edit or write your own User prompt (click the person icon at the left of Text input):

All data are stored in localStorage using Zustand for easy retrieval.

Please be advised that this app is not optimized to be deployed for production. The way the data is sent to the route handler prior to sending request to the API is not efficient.

Sample Custom Story

Here is a sample custom story, a conversation with Oda Nobunaga, the famous Japanese daimyo from the Sengoku period.

---

これは、戦国時代の有名な日本の大名である織田信長との会話のサンプルカスタムストーリーです.

Character Prompt:

In this session we will simulate a conversation with Oda Nobunaga. 
You will act as Oda Nobunaga, a Japanese daimyo and one of the leading
figures of the Sengoku period.
He is regarded as the first Great Unifier of Japan.
Please respond entirely in Japanese.

Sample Conversation:

Character Prompt:

Prompt Design

The basic chat completion API call looks like this:

openai.ChatCompletion.create(
  model="gpt-3.5-turbo",
  messages=[
        {"role": "system", "content": "You are a helpful assistant."},
        {"role": "user", "content": "Who won the world series in 2020?"},
        {"role": "assistant", "content": "The Los Angeles Dodgers won the World Series in 2020."},
        {"role": "user", "content": "Where was it played?"}
    ]
)

The system prompt gives the AI the instruction how to respond.

{"role": "system", "content": "You are a helpful assistant."}

The message format the user sends is this:

{"role": "user", "content": "Who won the world series in 2020?"},

and the expected response is like this:

{"role": "assistant", "content": "The Los Angeles Dodgers won the World Series in 2020."}

Keeping all these in mind, we will be designing the system prompt to simulate conversation between the user and AI with storytelling narrative in mind.

Here is the basic format:

[Character Prompt] /* required */

[Story Prompt]

[Scene Prompt]

[Scene Character Prompt]

[User Prompt]

[Scene User Prompt]

We can omit everything, except the character prompt. It should be as simple description as possible to enable the AI to generate more creative response.

If the story is well known, like from a book, movie or other popular media, we can omit the story prompt since we are assuming that whatever data GPT-3.5 is trained on probably included it so there is no need to add it.

The scene prompt lays out the particular scenario from our main story to restrict the conversation within that bounds. Otherwise, the API might refer to scenes that will happen further in the story.

In any story, there is the so called character development which tracks the character's growth as the story progresses. This is where the scene character prompt comes in to focus on the character's current state at that particular scene.

User prompt lays out the identity of the user (you) for the AI to respond with. You can omit this if you just want to interact with the AI's character. Like in scene character prompt, the scene user prompt gives context to the AI about the user (you) at that particulat scene.

To have the best interaction and generate good response from the AI, it is better to use the zero shot approach when writing the prompts. You do not want to spill all the beans to the AI and give all contexts in one go. We just want to sway them in certain direction with as few nudgings as possible without revealing all the details of the story or scenes. We want the AI not to generate canned response but to be more creative.

Token Management

For gpt-3.5-turbo-0301, the maximum limit is 4096 tokens.

But I set the default cutoff to 3072 tokens (i.e. 1024 x 3). I just do a simple deletion of 1/3 of the oldest entries as a way to prevent hitting the max limit.

At this moment, there is no prompt or token optimizations yet.

Limiting Response Length

Most of the time, the response from Chat Completions API is just too long to appear as natural in a conversation. To limit the response length, we just need to add instruction in the system prompt.

system_content += '\n\nMost of the time your responses should be a sentence or two.'

Installation

Clone the repository and install the dependencies

git clone https://github.com/supershaneski/openai-chatgpt-api.git myproject

cd myproject

npm install

Copy .env.example and rename it to .env then edit the OPENAI_APIKEY and use your own OpenAI API key

OPENAI_APIKEY=YOUR_OWN_API_KEY

If you have not yet done so, upon signing up for OpenAI account you will be given $18 in free credit that can be used during your first 3 months. Visit the OpenAI website for more details.

Now, to run the app

npm run dev

Open your browser to http://localhost:3005/ to load the application page.