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

First, ensure you have a React project set up. Then, install Vitest and the React Testing Library.

Explore a practical example of using Vitest with the React Testing Library in 

Setting up TypeScript, Vite, Vitest, and the React Testing Library can be complex. For troubleshooting, see git diff below, which documents a successful setup.

commit 0edfff8b470090d8edcb4ebd6cdaa9f8e34dfcaa
Author: Louis Sanna <louis.sanna@ekimetrics.com>
Date:   Sat Mar 9 23:59:33 2024 +0100

    feat(test): init
    
    https://vitest.dev/guide/
    https://www.robinwieruch.de/vitest-react-testing-library/
    
    https://stackoverflow.com/questions/57861187/property-tobeinthedocument-does-not-exist-on-type-matchersany
    https://github.com/testing-library/jest-dom/issues/546
    https://www.reddit.com/r/typescript/comments/x59poq/jest_ts_property_tobeinthedocument_does_not_exist/


diff --git a/front/package.json b/front/package.json
index 1c1be08..0cdc7c6 100644
--- a/front/package.json
+++ b/front/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.0.4",
@@ -23,6 +24,8 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/node": "^20.11.25",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
@@ -33,9 +36,11 @@
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^24.0.0",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
-    "vite": "^5.1.4"
+    "vite": "^5.1.4",
+    "vitest": "^1.3.1"
   }
 }
diff --git a/front/src/App.test.tsx b/front/src/App.test.tsx
new file mode 100644
index 0000000..431ecfc
--- /dev/null
+++ b/front/src/App.test.tsx
@@ -0,0 +1,11 @@
+import { describe, it, expect } from "vitest";
+
+describe("something truthy and falsy", () => {
+  it("true to be true", () => {
+    expect(true).toBe(true);
+  });
+
+  it("false to be false", () => {
+    expect(false).toBe(false);
+  });
+});
diff --git a/front/src/llm/StreamedText.test.tsx b/front/src/llm/StreamedText.test.tsx
new file mode 100644
index 0000000..058ea5f
--- /dev/null
+++ b/front/src/llm/StreamedText.test.tsx
@@ -0,0 +1,13 @@
+import { describe, it } from "vitest";
+import { render, screen } from '@testing-library/react';
+import { StreamedText } from './StreamedText';
+
+
+
+describe('StreamedText', () => {
+  it('renders text', () => {
+    render(<StreamedText text="React" isLoading={false} />);
+
+    expect(screen.getByText("React")).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/front/src/tests/setup.ts b/front/src/tests/setup.ts
new file mode 100644
index 0000000..00cbfc6
--- /dev/null
+++ b/front/src/tests/setup.ts
@@ -0,0 +1,10 @@
+import { expect, afterEach } from 'vitest';
+import '@testing-library/jest-dom'; // https://www.reddit.com/r/typescript/comments/x59poq/jest_ts_property_tobeinthedocument_does_not_exist/
+import { cleanup } from '@testing-library/react';
+import * as matchers from "@testing-library/jest-dom/matchers";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
\ No newline at end of file
diff --git a/front/vite.config.ts b/front/vite.config.ts
index 00e1667..10ac275 100644
--- a/front/vite.config.ts
+++ b/front/vite.config.ts
@@ -1,6 +1,6 @@
 import path from "path";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig } from 'vitest/config'; // https://stackoverflow.com/questions/72146352/vitest-defineconfig-test-does-not-exist-in-type-userconfigexport
 
 // https://vitejs.dev/config/
 // https://ui.shadcn.com/docs/installation/vite
@@ -11,4 +11,9 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/tests/setup.ts',
+  },
 });

Testing Asynchronous Hooks and Streaming Data

---
title: Testing the useCompletion hook
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/kn9ZBw02sQm1m36aQo8abwIlNNzn82cqI01oNamfPYb9o.m3u8
code: https://gitlab.com/fullstackio/books/newline-course-apps/louis-sanna-real-time-streaming-for-generative-ui-app/-/tree/main/module-2
---

# Testing the `useCompletion` Hook

In this lesson we learn how to test the `useCompletion` hook.

## Setup

First, ensure you have a React project set up. Then, install Vitest and the React Testing Library.

Refer to the [Vitest Guide](https://vitest.dev/guide/) and the [React Testing Library Documentation](https://testing-library.com/docs/react-testing-library/intro/) for detailed setup instructions.

Explore a practical example of using Vitest with the React Testing Library in [Robin Wieruch's tutorial](https://www.robinwieruch.de/vitest-react-testing-library/).

:::tip Troubleshooting testing setup

Setting up TypeScript, Vite, Vitest, and the React Testing Library can be complex. For troubleshooting, see git diff below, which documents a successful setup.

-   [Matchers Issue on Stack Overflow](https://stackoverflow.com/questions/57861187/property-tobeinthedocument-does-not-exist-on-type-matchersany)
-   [Jest-Dom Matcher Issue on Reddit](https://www.reddit.com/r/typescript/comments/x59poq/jest_ts_property_tobeinthedocument_does_not_exist/)

```shell
commit 0edfff8b470090d8edcb4ebd6cdaa9f8e34dfcaa
Author: Louis Sanna <louis.sanna@ekimetrics.com>
Date:   Sat Mar 9 23:59:33 2024 +0100

    feat(test): init
    
    https://vitest.dev/guide/
    https://www.robinwieruch.de/vitest-react-testing-library/
    
    https://stackoverflow.com/questions/57861187/property-tobeinthedocument-does-not-exist-on-type-matchersany
    https://github.com/testing-library/jest-dom/issues/546
    https://www.reddit.com/r/typescript/comments/x59poq/jest_ts_property_tobeinthedocument_does_not_exist/


diff --git a/front/package.json b/front/package.json
index 1c1be08..0cdc7c6 100644
--- a/front/package.json
+++ b/front/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.0.4",
@@ -23,6 +24,8 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/node": "^20.11.25",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
@@ -33,9 +36,11 @@
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^24.0.0",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
-    "vite": "^5.1.4"
+    "vite": "^5.1.4",
+    "vitest": "^1.3.1"
   }
 }
diff --git a/front/src/App.test.tsx b/front/src/App.test.tsx
new file mode 100644
index 0000000..431ecfc
--- /dev/null
+++ b/front/src/App.test.tsx
@@ -0,0 +1,11 @@
+import { describe, it, expect } from "vitest";
+
+describe("something truthy and falsy", () => {
+  it("true to be true", () => {
+    expect(true).toBe(true);
+  });
+
+  it("false to be false", () => {
+    expect(false).toBe(false);
+  });
+});
diff --git a/front/src/llm/StreamedText.test.tsx b/front/src/llm/StreamedText.test.tsx
new file mode 100644
index 0000000..058ea5f
--- /dev/null
+++ b/front/src/llm/StreamedText.test.tsx
@@ -0,0 +1,13 @@
+import { describe, it } from "vitest";
+import { render, screen } from '@testing-library/react';
+import { StreamedText } from './StreamedText';
+
+
+
+describe('StreamedText', () => {
+  it('renders text', () => {
+    render(<StreamedText text="React" isLoading={false} />);
+
+    expect(screen.getByText("React")).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/front/src/tests/setup.ts b/front/src/tests/setup.ts
new file mode 100644
index 0000000..00cbfc6
--- /dev/null
+++ b/front/src/tests/setup.ts
@@ -0,0 +1,10 @@
+import { expect, afterEach } from 'vitest';
+import '@testing-library/jest-dom'; // https://www.reddit.com/r/typescript/comments/x59poq/jest_ts_property_tobeinthedocument_does_not_exist/
+import { cleanup } from '@testing-library/react';
+import * as matchers from "@testing-library/jest-dom/matchers";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
\ No newline at end of file
diff --git a/front/vite.config.ts b/front/vite.config.ts
index 00e1667..10ac275 100644
--- a/front/vite.config.ts
+++ b/front/vite.config.ts
@@ -1,6 +1,6 @@
 import path from "path";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { defineConfig } from 'vitest/config'; // https://stackoverflow.com/questions/72146352/vitest-defineconfig-test-does-not-exist-in-type-userconfigexport
 
 // https://vitejs.dev/config/
 // https://ui.shadcn.com/docs/installation/vite
@@ -11,4 +11,9 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/tests/setup.ts',
+  },
 });
```

Louis Sanna

Welcome back! In this lesson, we will learn how to test our use completion

"OOC". Testing "OOC" is a fairly standard task and there are many very useful

libraries that exist to make our life simpler. We will use "Vit" - "Vit Test"

Library". Now, here you can see the documentation of "Vit Test" with a complex

explanation of how to install it and how to use it. Here you have "React

Library" which is a library built by CanCidots and you can find on the blog of

CanCidots explanation and detail are how you're supposed to test a custom

React OOC. What's important to remember is that "OOCs" are meant to be run

component so to run our OOC we need to build a test component just for the test

So here a setup function as you can see that we will use to run the "Vioc".

remark to setup everything with "Type Script" "Vit Test" "React Testing Library

The config can be a bit tricky so if you want to take some problem go look up

"Cloud" section there are an example of the successful setups and as you can

there are some questions stuck overflow and github and read it because they

can be some nasty bugs. Now, so we are testing to that "OOCs" but how do we

handle the streaming part? We already have done a lot of work. What was in it

mock stream and we already did show in the previous lesson how to build this

mock stream so now let's use it and here let's see an example of a test. I'm

building a mock stream I'm setting up my test component here and here you see

I'm using dependency and junction to pass a use chart query rendering my mock

reader. Now we make our action for the test and our

channel is to unqueue a server-cent event in our stream and here we are

sending a chunk a little world and now we can check whether or not our

use completion hook indeed returns a little world. Now there are several things

to make sure we get right. The first we must await the action because our

old workflow is a synchronous and if we are not careful we are going to get

action made after the test has finished run. That will show up as an

"Not wrapped in act" error in new shell. So if you are seeing this error it

that somewhere you forgot to narrow it. And secondly make sure to clean up

everything and you're too close or controller before the end. So that's an

example of the "Rison Per Test" with an "Arron Act Assert Structure" and here

our test system we are sending two chunks and we are making sure that the hook

indeed returns "retext" as a concatenation. So that was all for the testing

we have finished the front end and so that's the end of this module and in the

next module we will start building the backend. See you soon!