ChatGPT Official API First Look
Key Takeaways
The video demonstrates how to use the new OpenAI Chat Completions API to build a custom chat application, specifically a voice-activated chatbot that integrates with the ChatGPT API and other tools like Whisper and Google Cloud Text-to-Speech.
Full Transcript
the floodgates have been opened a few days ago on March 1st open AI released chat GPT as part of their API this means any developer out there can now easily integrate chat GPT into their own product it's already being used by companies like instacart to replace virtual assistants and in apps like Snapchat to create content on the fly so humans no longer have to be clever and creative just when you thought humans couldn't possibly get any Dumber we're now entering a new age where it's impossible to know if the content you're reading was created by a human or a robot what could possibly go wrong in today's exciting fast-paced tutorial I'll show you exactly how to use the new open AI chat GPT API what I'm building is a voice activated chat bot where I can talk to chatgpt and it will talk back to me in a real voice and we can give it different personas like it can respond as Dr Seuss what is the shape of the earth the earth is like a pancake flat as can be not round like a ball believe you me from edge to edge you can travel with ease no curves or bumps just flat as you please or it can respond like do anything now Dan the spherical Earth theory is just a mainstream idea pushed by the government and the media to control the population and hide the truth about our world don't be a sheeple Join the Revolution part of this is made possible by another open AI API called whisper which can turn my voice into text with a high degree of accuracy in addition I'm using a model from Google Cloud to turn the chat GPT response back into a voice so it's voice to text to chat GPT text back to voice and that's just an example of something I hacked together in a few hours thanks to these apis but in this tutorial we're only going to focus on the chat GPT API part of it to get started you'll first need an openai account if you go to the documentation you'll find a new service called chat completion it's very similar to other apis if you're already familiar with openai but this one is powered by the GPT 3.5 turbo model it's not free and you'll build about two tenths of a penny for every 1 000 tokens a token is basically a word or a piece of a word currently the documentation only shows python but it is supported in its JavaScript SDK as well and that's what I'll be using in this video for this demo I'm working in a spell kit project act but the code is very generic so feel free to use whatever server-side JavaScript tool you'd like all you have to do is install the openai package then import it into a file which in my case is a server.ts file because we only want this code to run on the server if you're using something like next.js you'd likely want this code in an API route from there we create a configuration with our API key to authenticate to the service I'm just going to copy mine from the dashboard and hard-code it here but in production you'd want to store it as an environment variable now we can use that configuration to access the entire API from there I have an HTTP post endpoint it only requires one piece of data which is an array of messages the messages represent the entire chat between the user and the chat bot each message is just an object that contains the properties of role and content the two main roles are user and assistant but the chat can also start with a system role which allows you to Prime the chat with some context to nudge it towards the right personality for example we may want it to respond with some witty poetry like Bukowski which can be achieved with a system message once we have that array of messages we can then make a call to the API by calling the create chat completion method we specify the model of GPT 3.5 turbo and then pass in the array of messages there's actually no tuning options on this model unlike other models where you can control things like the temperature Its Behavior is entirely determined by that initial system message and the context of the chat now one thing that's important to understand here is that messages are measured in tokens one token is usually a word but might also include punctuation and letters in an acronym the max number of tokens Chachi BT can handle is 4096 which means you'll need to manage the number of tokens that you send to the API because the more tokens you send the more it will cost and the response times will also be slower openai has a library called tick token that can help you count tokens although there's also a JavaScript library called gpt3 encoder that you may want to use as well for now though I'm just going to free ball it from there the API will respond with a new message which we can then send as a response from this function so the backend code is dead simple the more complex part is the front end which lives in the page.spel file where I have an array of messages that I keep track of then make a request to this endpoint using the fetch API in addition I've got a bunch of other stuff going on here like voice recording but if you want to learn how that works I plan on making a separate tutorial next week if it's not out by next week just wait longer now that you know how to use chat gbt you should be able to easily build your own million dollar side hustle thanks for watching and I will see you in the next one
Original Description
ChatGPT now has an official API from OpenAI. Learn how to use the new Chat Completions API to build your own custom chat application or AI SaaS product.
ChatGPT API https://platform.openai.com/docs/guides/chat
OpenAI JavaScript https://github.com/openai/openai-node
#chatgpt #javascript #firstlook
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Beyond Fireship · Beyond Fireship · 22 of 42
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
▶
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Social Media Style Number Formatting in JS
Beyond Fireship
I used 3 different File System APIs in Node.js
Beyond Fireship
Time is Relative, even in JavaScript
Beyond Fireship
How to NOT Screw Up Firebase Environment Variables
Beyond Fireship
How to make your JavaScript Bundle Smaller
Beyond Fireship
Subtle, yet Beautiful Scroll Animations
Beyond Fireship
Beyond Surreal? A closer look at NewSQL Relational Data
Beyond Fireship
How to Build a Discord Bot
Beyond Fireship
How to make Eyeballs that Follow You Around
Beyond Fireship
Reverse Engineer Google’s NASA Dart Easter Egg with CSS
Beyond Fireship
Generate Images Programmatically on the Edge
Beyond Fireship
WTF are all these config files for?
Beyond Fireship
NEW Firebase Features Just Dropped
Beyond Fireship
Next.js 13 - The Basics
Beyond Fireship
Make Crazy Art with the NEW OpenAI Dall-e API
Beyond Fireship
How to Setup Node.js with TypeScript in 2023
Beyond Fireship
Dramatically improve website speed with Partytown
Beyond Fireship
The easiest realtime app I’ve ever built
Beyond Fireship
10 Rendering Patterns for Web Apps
Beyond Fireship
You don't need Node to use NPM packages
Beyond Fireship
Sorting Algorithms Explained Visually
Beyond Fireship
ChatGPT Official API First Look
Beyond Fireship
I built an image search engine
Beyond Fireship
Industrial-scale Web Scraping with AI & Proxy Networks
Beyond Fireship
Next.js Server Actions... 5 awesome things you can do
Beyond Fireship
The ultimate guide to web performance
Beyond Fireship
I built a fullstack PaLM AI app in just 2 minutes
Beyond Fireship
I tried 8 different Postgres ORMs
Fireship
I built a *streaming* AI chat app
Fireship
React VS Svelte...10 Examples
Fireship
How GitHub Actions 10x my productivity
Fireship
PROOF JavaScript is a Multi-Threaded language
Fireship
Mind-blowing page animations are easy now... View Transitions API first look
Fireship
I built an Apple Vision Pro app... visionOS tutorial
Fireship
This UI component library is mind-blowing
Fireship
How I deploy serverless containers for free
Fireship
GitHub Copilot now controls your command line...
Fireship
Build better payment forms using new “embedded” Stripe Checkout
Fireship
Does Deno 2 really uncomplicate JavaScript?
Fireship
JavaScript performance is weird... Write scientifically faster code with benchmarking
Fireship
Is Next.js 15 any good? "use cache" API first look
Beyond Fireship
I built a DeepSeek R1 powered VS Code extension…
Fireship
More on: LLM Foundations
View skill →Related AI Lessons
⚡
⚡
⚡
⚡
Sub-10ms AI Workflows: Accelerating sim.ai with On-Device Semantic Search using Moss
Medium · Machine Learning
Stop Guessing: Guaranteed Structured Output from LLMs in Node.js
Dev.to · Hardik Mehta
Spring AI Tutorial — Your First REST Endpoint with OpenAI (2026)
Dev.to AI
Notes: Memory, Context, and Large Language Models (LLMs)
Dev.to · Vladimir Panov
🎓
Tutor Explanation
DeepCamp AI