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 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.

Our 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.

**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!

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 build AI-powered streaming text and chat UIs with TypeScript and Python. Go step-by-step through building a full-stack AI application with quality code and very flexible implementation.

It includes:
- a completion use-case (english to emojis)
- a Chat
- a Retrieval Augmented Generation use-case
- 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.

Responsive LLM Applications with Server-Sent Events

An interactive AI-powered chat application with real-time responses

A Retrieval Augmented Generation (RAG) system to enhance AI responses with external knowledge

An AI agent capable of using tools to solve a tasks

An AI-assisted code generation and explanation system

An assistant capable of performing data analysis tasks

How to stream the answer of a Large Language Model

Differences between Server-Sent Events and WebSockets

What problems Retrieval Augmented Generation can solve

In this lesson we'll deepen our understanding of how to make our chat applications smarter by integrating retrieval-augmented generation. 

Previously, we set up a basic chatbot using a FastAPI, LangChain and Server-Sent Events. We also built a semantic index using the IPCC report. This time, we're going to use that indexed information dynamically during our chat sessions.

We use our previous implementation as as starting point. When our chat receives a query that may need external information (like data from the IPCC report), the system performs the following steps:

---
title: Adding Retrieval-Augmented Generation to the chat
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/Aws6SJqsL02rwwOX6P02X2OIAjS1BhwuRlKUfaqmbVvPw.m3u8
---

# Adding Retrieval-Augmented Generation to the chat

In this lesson we'll deepen our understanding of how to make our chat applications smarter by integrating retrieval-augmented generation. 

Previously, we set up a basic chatbot using a FastAPI, LangChain and Server-Sent Events. We also built a semantic index using the IPCC report. This time, we're going to use that indexed information dynamically during our chat sessions.

We use our previous implementation as as starting point. When our chat receives a query that may need external information (like data from the IPCC report), the system performs the following steps:

1.  **Initial Query to Model**:

    -   We use our `ChatOpenAI` instance to determine if the user's question relates to the IPCC report.
    -   If so, the model is prompted to construct a query to retrieve relevant information.
2.  **Fetching Data**:

    -   Our system fetches the relevant data using the query provided by the model.
    -   This step involves making a semantic search over the index.
3.  **Integration into Chat**:

    -   The retrieved data is then formatted (using YAML for better comprehension by the ChatGPT model) and added to the ongoing chat context as a `function` message.
    -   This allows the model to use this context to generate more informed and accurate responses.

Louis Sanna

Welcome back. In this lesson, we will use the retrieval augmented generation

In the previous lesson, we build a semantic index using the IPCC report.

Now, we are going to use the right river doing regeneration.

So, we are starting from the previous chat implementation.

So, exactly as time, we have a Python class, we have a fast App endpoint,

and we are using the server set event once again.

All this code is exactly as the same as was explained in the backend module.

But now, before we do our generation, we need to fetch some content.

This is our new code. Now, how does it work?

We need to check whether the red river is needed to answer the user question.

How do we do that? We make another code to the realm, and we ask,

Does the user need to run version from the IPCC report?

So, we get the query, we once again use the right river using await,

And now, we can pass to the model the extract using a message with the whole

So, we set whole function, we set the name of the method,

Note that we use the ML because charge Bt is slightly better at understanding

And now, if we do the same generation, the model will be able to use the chunk

to make it on to more precise and more reliable.

Note that you can also emit the event support you would like to display the

You can emit the event exactly as we did for an LMS chunk,

and it will be sent to the front end and you just need to build the UI as you

We finished implementing the retrieval augmented generation,

but turn on the congratulations and see you soon.

Adding Retrieval-Augmented Generation to the chat

Masterclasses

Tutorials

Fullstack React with TypeScript