First Look: ChatGPT API for Web Developers

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
2 hours, 32 minutes CC
First Look: ChatGPT API for Web Developers

Course Description

Get up to speed integrating AI as a web developer into your web apps! You'll learn the basics of large language models (LLMs), the OpenAI API, and tokens. Learn to create ChatGPT plugins and prioritize security. Apply your knowledge by building a "ChatGPT Clone" and explore advanced topics like conversation context, prompt engineering, and the Image API. The course concludes with an introduction to embeddings, fine-tuning, and the Langchain framework.

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: July 18, 2023

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 7 minutes
  • Introduction
    Maximiliano Firtman presents a comprehensive introduction to the course and shares some personal and professional background information. Outlines of the course's goals, prerequisites, and an overview of the material that will be covered are also provided in this segment.

AI and Web Development

Section Duration: 45 minutes
  • AI, LLMs & OpenAI
    Maximiliano explores the relationship between artificial intelligence (AI), large language model (LLM), and generative pre-trained transformer (GPT). Large language models can be used for several tasks without changing or training models.
  • OpenAI API & Tokens
    Maximiliano explains the techniques used to structure prompts in GPT models and how the length of prompts and results is measured. The discussion also includes an introduction to pricing estimates and different OpenAI models like GPT-4, InstructGPT, image models, and audio models.
  • AI & Web Development
    Maximiliano explores how web developers can leverage GPT for chatbots, plugins, content APIs, and sharing with other AI systems. Other applications like email generation, text correction, and content curation are also covered.
  • Plugins
    Maximiliano discusses creating and utilizing ChatGPT plugins to enhance the generated responses. The discussion includes practical examples of a ChatGPT plugin manifest and endpoint description.
  • Security & Prompt Injection
    Maximiliano addresses ChatGPT browser plugins and the associated security risks related to prompt injection. The discussion includes a method to prevent ChatGPT from accessing specific websites by utilizing the ChatGPT-User keyword within the robots.txt file.

ChatGPT Clone

Section Duration: 43 minutes
  • Project Setup
    Maximiliano introduces the course repository and briefly overviews the file contents and dependencies. Additionally, setup instructions are presented to guide students in getting started with the course materials.
  • Adding Your API Key
    Maximiliano covers the process of generating an OpenAI API key and emphasizes the importance of keeping it secure. The discussion includes a demonstration of the available settings and provides guidance on practicing queries using the OpenAI playground.
  • Chat Completion API
    Maximiliano demonstrates the process of making a POST request to the Chat Completion API and explains the contents of the response received from the server. Connecting the chat application to send prompts and receive responses from the API is also covered in this segment.
  • Maintaining Context in a Conversation
    Maximiliano explains how to preserve the context of previous API requests and simulate receiving responses word by word by incorporating the stream response property. The discussion also addresses the current context limitations in ChatGPT, where the first message is automatically deleted if the request becomes too large.
  • OpenAI Node.js API
    Maximiliano demonstrates the process of creating a Node.js server for making API requests, which offers the additional benefit of keeping the API key secure on the server side.

Prompt Engineering

Section Duration: 38 minutes
  • Prompt Engineering for Developers
    Maximiliano explains prompt engineering, the process of designing and refining prompts to get desired responses from language models. The discussion covers important goals to keep in mind when creating prompts, such as consistent outputs, desired format, preventing abuse, prompt validation, and avoiding injection of unwanted content.
  • Basic Prompt Rules
    Maximiliano shares essential guidelines for writing prompts to elicit the desired response from the model. The discussion includes tips for providing clear and specific instructions, such as requesting a structured format, providing examples, and explaining how to handle invalid inputs, for effective prompt construction.
  • Capabilities
    Maximiliano demonstrates the range of ChatGPT's capabilities, including summarizing information, making inferences, transforming data, extracting specific details, and generating content based on given prompts.
  • Modeling Prompt Data
    Maximiliano walks through the process of modeling prompt data for a cooking app, utilizing the prompt rules and capabilities discussed in previous lessons. This segment focuses on the section of the prompt that involves searching for a recipe and identifying ingredients.
  • Using the Image API
    Maximiliano implements the Images API to create and display an image corresponding to the generated recipe. The ingredients and recipe sample must be stringified within the prompt for proper functionality.

Embeddings & Fine Tuning

Section Duration: 15 minutes
  • Connecting GPT to Data
    Maximiliano explores the training of language models through parameter updates using smaller datasets. The discussion also includes the process of connecting GPT to data by performing an initial search outside GPT and utilizing the search result as the context within GPT.
  • Embeddings
    Maximiliano discusses the process of converting large amounts of text into numerical statistical data as a means of efficient processing. The discussion highlights searching the segmented data, returning a corresponding slice of data, and then utilizing the data as context for the prompt.
  • Langchain
    Maximiliano discusses utilizing the Langchain framework to continue to learn about developing LLM applications.

Wrapping Up

Section Duration: 2 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now