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 where we explore the concept of Generative UI—a dynamic user interface that evolves in real-time based on interactions within a chat application. Our focus will be on integrating complex functionalities like SQL queries and Python code execution directly within a chat interface, using React.

Generative UI leverages the capabilities of large language models to create interfaces on the fly. In our demo app, the agent has two main tools: a SQL query executor and a Python code interpreter. These tools allow the model to perform and display results from SQL queries and run Python scripts, showing outputs such as maps or charts.

In the user interface, each action taken by the model and its result is displayed through dedicated components. For SQL queries, a component shows both the query and its results in a table format. For Python code, another component displays the code alongside its output, like a map chart.

---
title: Building a Generative UI
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/LkHJHFvAIIiUcL00fc00t1gloTskK98pu9rn01a1JQKdj4.m3u8
code: https://gitlab.com/fullstackio/books/newline-course-apps/louis-sanna-real-time-streaming-for-generative-ui-app/-/tree/main/module-7
---

# Building a Generative UI

In this lesson where we explore the concept of Generative UI—a dynamic user interface that evolves in real-time based on interactions within a chat application. Our focus will be on integrating complex functionalities like SQL queries and Python code execution directly within a chat interface, using React.

### Concept Overview

Generative UI leverages the capabilities of large language models to create interfaces on the fly. In our demo app, the agent has two main tools: a SQL query executor and a Python code interpreter. These tools allow the model to perform and display results from SQL queries and run Python scripts, showing outputs such as maps or charts.

In the user interface, each action taken by the model and its result is displayed through dedicated components. For SQL queries, a component shows both the query and its results in a table format. For Python code, another component displays the code alongside its output, like a map chart.

![](https://d2uusema5elisf.cloudfront.net/courses/responsive-llm-applications-with-server-sent-events/module_07/lesson_07.04/public/assets/ui.png)

### Practical Implementation

To embed these functionalities we modify our Chat component.

We pass a list of tools, each has a UI property associated with it, which is essentially a React component. When defining our chat interface, we dynamically assign these components to each tool as needed. We also add a property called 'events' to messages, which adopts an event sourcing pattern. This pattern records every interaction and uses these records to compute the UI's state dynamically.

:::tip Event Sourcing

Event sourcing is an architectural pattern where all changes to application state are stored as a series of events. This approach provides a reliable audit trail, ensures data consistency by replaying events to derive the state, and offers flexibility in adding new features without disrupting existing functionalities.

See [Event-Sourcing](https://martinfowler.com/eaaDev/EventSourcing.html) by Martin Fowler.
:::

```javascript
import { StreamedText } from "@/llm/StreamedText";
import { Message, ToolEvent } from "@/llm/types";
import React, { useMemo } from "react";
import { Tool } from "./Chat";
import { Bot, User } from "lucide-react";

export function MessageGroupList({
  isLoading,
  messages,
  tools,
}: {
  isLoading: boolean;
  messages: Message[];
  tools?: Tool[];
}) {
  const messagesGroups = useMessageGroups({ messages });
  return messagesGroups.map((group, index) => {
    const role = group[0].role === "user" ? "user" : "assistant";
    const isGroupLoading =
      isLoading && index === messagesGroups.length - 1 && role !== "user";
    return (
      <MessageGroup
        key={`${group[0].id}`}
        messages={group}
        isLoading={isGroupLoading}
        role={role}
        tools={tools}
        index={index}
      />
    );
  });
}

Louis Sanna

Welcome back. In this lesson we will discover generative UI.

Generative UI is a new pattern where we build a user interface on the fly,

unresponse to the action taken by a large language model.

Here we can see our demo app. We have an agent which has two kinds of tools.

A tool that lets the model make SQL query to an external database,

and a tool which is a Python code interpreter where we can run Python.

And as you can see in the UI we have here some components that lets the user

So here we can see a component describing a SQL query. So we can see the query

and the query we can see our output as a table.

Here we can see the code interpreter. We see some Python code

and we see our output being a matriety chart.

Now let us look at the code. Here we can see the SQL component.

We see so it takes a status, some data, some apps.

As you can see here where the query, the query will be the argument of our tool

We display the query and here we have the coding with the table.

Now how are we going to display it within the chat interface?

Let's include the other chat. We are making two changes to our interface tool

The first is that we take a list of tools and for each tool is their name

and they is a UI property. The UI property is simply a real component.

So when we define our chat we pass the UI component for each tool as needed.

The second is the message interface. As you can see the new property events.

And that's a very powerful pattern called the event sourcing pattern

where we keep in memory every single event that happened

and then as needed we compute the derived state from those events.

Here the derived state will be our UI. Now let's take a look.

Here we have our messages and now we say it's a message group.

Why is that message group? Because now from one user message

it may leads to several message. For instance you may have one assistant

which will then use two tools so that it make two tools message

and then as we loop to implement the reflection pattern

it may lead to yet another assistant message.

So it will lead to four different message but in the UI we want everything to

So we are going to group. Now let's look at the groups.

Here we have the standard UI, we are rebuild, we have icons, we are loading, we

We have still have a markdown, we have a markdown with the completion

and now we also want to display the tools. So let's take a look at the tools.

Here you can see we are implementing our event sourcing pattern

where we take every single event and we keep only the one that describes the

states. Here for instance if we have an event for loading, a one event for

we keep only the success one. And here we have our hook,

use message groups that is used to group message to the inner single group as

So with that we just need now to render our UI. This is done here.

As you can see we have our tool events and for any event, look whether there is

and if yes we render the UI and we are done and we have build a generative

Building a Generative UI

Concept Overview#