Introduction to AI Product Development

Picking the stack - Navigating JavaScript and Python

Designing a Hybrid Web Application Architecture with JavaScript and Python

Streaming events with Server-Sent Events and WebSockets

System Design for AI applications

Discovering the OpenAI Completion API

Handling Server-Sent Events with JavaScript

Building the useCompletion hook

Rendering Completion Output

Mocking Streams

Testing the useCompletion hook

In this module, we're diving into the creation of an AI product with a frontend focus.

Building the Front-End

Creating a FastAPI server

Exploring asynchronous programming in Python

Integrating Langchain with FastAPI for Asynchronous Streaming

Testing with PyTest and LangChain

In this module, we're diving into the creation of an AI product with a Backend focus.

Building the Backend

Building the useChat hook

Building the User Interface

In this module, we learn how to build a chat.

Building a Chat

Discovering Retrieval Augmented Generation

Building a Semantic Search Engine with Chroma

Adding Retrieval-Augmented Generation to the chat

In this module, we implement Retrieval Augmented Generation"

Implementing Retrieval Augmented Generation

Final words

Conclusion

Exploring AI Agents - Toward Autonomous Systems

Building an Asynchronous Event-Driven Service Using Context Variables

Adding Tools To The Chat

Building a Generative UI

In this lessons we will explore how AI agents function with a focus on autonomy, tool usage, and self-correction. They will also be introduced to the potential future developments in AI agent technology.

Building an Agent

Join us as we dive into the world of AI-powered streaming text and chat UIs using TypeScript, React, and Python. 

Large Language Models (LLMs) are revolutionizing various industries, but creating simple demos in notebooks or with tools like Gradio is not enough. To truly harness the potential of these models, we need to build sophisticated, real-world applications.

This comprehensive course is structured into six detailed modules where you will:
- Develop a dynamic front-end with React.
- Integrate FastAPI with LangChain to create a robust backend.
- Utilize Server-Sent Events (SSE) for seamless real-time data streaming.

This comprehensive course comes packed with valuable extras:
- The complete source code under MIT licence
- Exclusive access to our community forum
- Detailed exploration of Retrieval-Augmented Generation (RAG) for enhancing model responses
- Hands-on experience with developing intelligent agents capable of maintaining context in conversations

Taught by [Louis Sanna](https://www.linkedin.com/in/louis-sanna-0168363a/), a seasoned Tech Lead with expertise in GenAI applications and digital transformation projects for major organizations like UNESCO and Renault. His deep industry insights and practical experience will guide you from basics to advanced implementations.

Taking this course will spare you countless days of troubleshooting and challenges, offering a shortcut through the learning curve. Moreover, it presents a unique opportunity to engage with one of the most significant technological trends of our era. This is your chance to become a part of the groundbreaking wave of LLM advancements, positioning you at the forefront of innovation.

### Problem this Course Solves

This course is designed to tackle specific problems that AI engineers face when integrating LLM capabilities into web applications. Streaming text presents a unique challenge for engineers, requiring the integration of multiple technologies and concepts. This course addresses this by:

- Exploring the use of Langchain for seamless LLM provider switching. Given Langchain's rapid development, understanding its streaming, asynchronous, and callback functionalities can be daunting.
- Demystifying asynchronous programming in Python, which can be more complex than in JavaScript. We'll cover the differences between asynchronous and synchronous programming, the benefits of asynchronous operations, and how to implement and integrate asynchronous function calls within a streaming context.
- Selecting and implementing a protocol for streaming text from the backend to the frontend. We will explain why Server-Sent Events (SSE) is an ideal standard, despite being relatively new and unfamiliar to many.
- Creating an SSE endpoint using a Python server framework, such as FastAPI, to facilitate real-time data streaming.
- Reading the stream in the front-end using the ReadableStream interface of the Fetch API, ensuring efficient data handling.
- Updating the React state of prompts with consideration for React's batching behavior to prevent unexpected issues during rapid updates.
- Integrating custom components within text responses to enable dynamic, on-the-fly generative UIs.

By the end of this course, you will have a comprehensive understanding of how to effectively integrate and manage LLM capabilities within web applications, overcoming the technical hurdles associated with real-time text streaming.

### Preview the Application

Experience the power of what you'll build firsthand. Try out the demo app we will develop during the course:
[The Demo App](https://build-ai-driven-web-applications.vercel.app/)

Enroll now and start building transformative AI-powered applications that streamline communication and enhance user engagement!

### Course Content Overview

##  Basic Package
- Total Modules: **6**
- Total Lessons: **20**
- Total Video Runtime: **1 hour, 10 minutes**

##  Advanced Package
- Total Modules: **7**
- Total Lessons: **24**
- Total Lines of Code: **3706**
- Total Video Runtime: **1 hour, 34 minutes**

Dive into Retrieval Augmented Generation and Autonomous Agents with LangChain, Chroma and FastAPI

Large Language Models are reshaping industries, yet integrating them into real-time streaming UIs presents unique challenges. In this course we will learn how to seamlessly integrate LLM APIs into applications and build AI-powered streaming text and chat UIs with TypeScript, React, and Python. Step-by-step, we will build a full-stack AI application with quality code and very flexible implementation.

The LLM application in this course includes:
- Completion Use-Case (english to emojis)
- Chat
- Retrieval Augmented Generation use-case
- AI Agent Use-Cases (code execution, data-Analyste agent)

This app can be used as a starting point in most projects, saving a huge amount of time, and its flexibilty allows new tools to be added as needed.

At the end of this course, you will have mastered end-to-end implementation of a flexible and high-quality LLM application. This course will also equip you with the knowledge and skills necessary to create sophisticated LLM solutions of your own.

Responsive LLM Applications with Server-Sent Events

How to design systems for AI applications

How to stream the answer of a Large Language Model

Differences between Server-Sent Events and WebSockets

How asynchronous programming in Python works

What problems Retrieval Augmented Generation can solve

In this lesson, we're diving into the creation of an AI product, beginning with the frontend. Our objective is to translate natural language into emojis. Imagine typing "To be, or not to be," and receiving an emoji representation as a response. Sounds fun, right?

This functionality leverages the power of large language models (LLM). For our purposes, we'll be using the OpenAI platform.

. This legacy endpoint is useful for understanding the inner workings of LLMs. It treats inputs as sequences and predicts the next element, allowing us to iteratively generate responses.

Example sequence input and prediction process:

Moving forward, our project will utilize the 

, the recommended choice for contemporary applications. It's designed as a POST REST API, ideal for handling extensive parameters like lengthy conversations.

curl https://api.openai.com/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -d '{
    "model": "gpt-3.5-turbo",
    "messages": [
      {
        "role": "system",
        "content": "You are a helpful assistant."
      },
      {
        "role": "user",
        "content": "Hello!"
      }
    ]
  }'

---
title: Discovering the OpenAI Completion API
privateVideoUrl: https://stream.mux.com/PRdUvTliC5500uZjuWzwheyzUZOZ00eVDUdhtT02wFPH8E.m3u8
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/louis-sanna-real-time-streaming-for-generative-ui-app/-/tree/main/module-2
---

# Discovering the OpenAI Completion API

In this lesson, we're diving into the creation of an AI product, beginning with the frontend. Our objective is to translate natural language into emojis. Imagine typing "To be, or not to be," and receiving an emoji representation as a response. Sounds fun, right?

This functionality leverages the power of large language models (LLM). For our purposes, we'll be using the OpenAI platform.

#### App Preview

You can preview the demo app on Replit:

<ReplitEmbed src="//replit.com/@louissanna/module-2"/>

### The Completion Endpoint

Our journey begins at the [OpenAI playground's completion endpoint](https://platform.openai.com/playground/complete). This legacy endpoint is useful for understanding the inner workings of LLMs. It treats inputs as sequences and predicts the next element, allowing us to iteratively generate responses.

Example sequence input and prediction process:

-   Input: "to be or not to"
-   Prediction: Continues to "be," evolving the input for the next prediction cycle.

### Chat Completion Endpoint

Moving forward, our project will utilize the [chat completion endpoint](https://platform.openai.com/docs/api-reference/chat/create), the recommended choice for contemporary applications. It's designed as a POST REST API, ideal for handling extensive parameters like lengthy conversations.

```shell
curl https://api.openai.com/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -d '{
    "model": "gpt-3.5-turbo",
    "messages": [
      {
        "role": "system",
        "content": "You are a helpful assistant."
      },
      {
        "role": "user",
        "content": "Hello!"
      }
    ]
  }'
```

Louis Sanna

Welcome back. In this lesson we will start building an AI product. It would be

focusing on the front end. We want to convert some natural language into images

simple text input to be on order to be. We click on the button and we get an

It's made possible thanks to the capabilities of large language model. We are

playground and we are looking at the completion input. It's a legacy endpoint

to understand what are LLM doing. As you can see here there is the input which

to be or not to. What's the prediction of a large language model? It's the next

sequence. The next element is B. To be or not to be. Then this new sequence

be or not to be. The next prediction is that. And so on. And we can innovate

large language model builds the answer by predictive iteratively the next

at the chat completion endpoint which is the endpoint we are going to use in

and which is the current recommended endpoint. It's quite straightforward part

API. While Post-Strest because we want some problems to be very long for

can last tens of thousands of characters and in most rather get requests are

two thousand characters. So get will not work for use case. Another thing to

You can very easily create a new one. You go to API keys here and create a new

Also one remark you should not make those API calls from the front end. And we

course of pedagogy purposes. But that's the way of leaking the API key so it

in production. If you want to do it properly click at module focusing on the

The model perhaps is quite straightforward. You pick your model. There is a

because big model are smarter but they are slower and more expensive. So you

a trigger depending on the use case. And last and foremost the message param.

the state of the current conversation with different roles system user tool

We will see later exactly what the correspond. Now a few remarks. The first is

deterministic. The second is the context window. Not deterministic let me show

I asked the question. How are you to the model and I get an answer. How can I

Let's try exactly the same question. And here I get an AI digital assistant

helpful response user increase. There is a parameter called temperature that

her own damages. But even with a temperature set to zero it won't be deter

is the context window. There is a maximum size for input which is a few

thousands for somebody else. But you need to come to a can and you need to

in some cases. Here you can see open AI cookbook. We'll look at it in more

that shows how to come to the token for a message. Now we've seen this API. I

give a few details of how Chagit P.T. works and how GPT sees the world. We don

how as the model is fully meant but it's useful because you get a deeper

use it. And sometimes it lets you understand some failure cases and how to

the tokenizer. What a tokenizer. Chagit P.T. does not see roadtext to be or not

First it needs to be tokenized. Autoconizer is a function that takes in input

And the output some token which are numbered. Here you can see the conversion

into a sequence of tokens. Then the prediction will be another token. And so we

It matters because sometimes simply making small changes will make big

of the tokenizer. You can see your warning. The warning is caused by the

The trailing edge space change. We're encoding. Let me show you the tokenizer

I'm adding some my text. And here I get the tokens with colors. And each color

And here you can see the number for each token. So that's what we are counting

talking of a context window size. It's the size of this token list. So now that

I want to show you also what are special tokens. Because as you can see in the

sending a list of messages. But that's not what JPGPT is meant to do. JPGPT is

a sequence of tokens. How do we convert this list into a second of tokens with

EM start EM start EM end which are tokens used to indicate to the model that