Introduction
This should be the first post in a series, sharing some knowledge and insights from my development of applications related to Large Language Models (LLM) over the past year. The entire series will cover the following topics:
- How to use
OpenAI - Basic knowledge of using prompts
- Function calls
- Brief overview of
Langchain - How to make LLM respond based on company documents
- Integration possibilities with Browser AI packages and front-end frameworks
Theme
This article will cover a very simple task – connecting to the OpenAI API, a process that can be completed in about 10 minutes. The following are the two main steps:
- Obtain an API KEY
- Make a Request on the Webpage
A. Obtain OpenAI API KEY
1. Register an account on OpenAI
Visit https://platform.openai.com/docs/introduction
In the top right corner, you should see "sign up." Click on it to start the registration process.
Follow the registration process to create your account.
2. Confirm Quota
After registration, you'll be redirected to the documentation page. You can click on "settings" on the left side, then navigate to "Limits." Scroll down to the bottom, where you'll find the following text. It mentions that you are currently on a free plan, and payment will only start after reaching $5. For experimenting, this amount should be more than sufficient.
You can also click on "Usage" on the left to check your usage:
3. Obtain API Key
Click on "API keys" on the left side to access the page shown in the image below:
To create an API key, you need to undergo phone verification. Click the button in the image below and follow the steps to proceed:
After completing the phone verification, click on Create new secret key.
Here, pay a little attention:
First, you'll need to enter a name; just choose a simple one.
After submitting the name, the API KEY will appear in the same pop-up. Copy the key and keep it secure, avoiding sharing it with others.
If, by chance, you accidentally close this pop-up without copying the key, delete the existing key and create a new one.
Now that you have the API key, you can start making API calls.
B. Calling the GPT on the Webpage
After preparing the API key, let's move on to calling the most commonly used chatCompletion API.
Create an HTML file and use the following code: (Remember to replace "your API key" with your actual API key in the variable)
<body>
<button id="ask">Ask</button>
<script>
const my_openai_key='Paste your key here'
const chatCompletion=() => {
fetch("https://api.openai.com/v1/chat/completions",{
method: "POST",
headers: {
"Authorization": "Bearer "+my_openai_key,
"Content-Type": "application/json"
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [
{role: "user",content: "Hello ChatGPT"}
]
})
})
.then(response => response.json())
.then(res => {
alert(
res.choices[0].message.content
)
})
}
document.getElementById("ask").addEventListener("click",chatCompletion);
</script>
</body>
Then, open this HTML file, click the "Ask" button, wait for a moment, and you should see the response below. This indicates that the connection has been successfully established.
If you want to continue the conversation, copy the AI's response, add it to the "messages" array along with your message, like the example below:
{
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [
{role: "user",content: "Hello ChatGPT"},
// Put ai response here like this
{role: "assistant",content: "Hello, how can I assist you today?"},
// Then add user response here
{role: "user",content: "I just want to say hi"},
]
})
}
Then, click the "Ask" button again, and you'll see it responding with new content.
So, this article concludes here.
The next article will discuss how to make OpenAI's GPT generate the responses you desire.
Reference:
Here is the specification and documentation for the chatCompletion API we just called. Feel free to explore it if you're interested.
Advertisment - Browser AI
Use Browser AI to help you build an LLM powered website!
Repository: https://github.com/shunnNet/browser-ai
Documentation: https://courageous-manatee-a625e9.netlify.app/
Top comments (0)