You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
docs: add tutorials: 02-setting-up-azure-functions.md, 03-understanding-rag.md and 04-understanding-preparing-language-models.md (#45)
* feat: create tutorial for: 02 - Setting Up the Serverless Environment using Azure Functions
* docs: update link to next step in introduction tutorial
* fix: typos and let more accurate the tutorial
* docs: add new tutorial for understanding the RAG architecture
* docs: add `03-understanding-rag.md` tutorial
* docs: update `03-understanding-rag.md` tutorial and `chat` API
* docs: update link to next step in introduction tutorial
* docs: add tutorial `04-preparing-understanding-language-models.md`
* docs: add tutorial for developing the `chat` API
* Update 04-preparing-understanding-language-models.md
fix: typo
* docs: add note about alternative CLI options for running Azure Developer commands
* docs: some important changes in the tutorial files
* fix: according to Dina's feedback
* docs: change from ChatGPT word to Chat Application
* fix: typos and more clarity
* fix: typos for clarity
* feat: Update tutorial files and fix typos for clarity
* fix: Update tutorial files and fix typos for clarity
* Update docs/tutorial/02-setting-up-azure-functions.md
Co-authored-by: Yohan Lasorsa <[email protected]>
* chore: update information about the `chat-post.ts` file
* docs: Update tutorial files and fix typos for clarity
* docs: Update tutorial files and fix typos for clarity
---------
Co-authored-by: Yohan Lasorsa <[email protected]>
# Tutorial - Create a Serverless ChatGPT with RAG using LangChain.js and TypeScript
1
+
# Tutorial - Create a Serverless AI Chat with RAG using LangChain.js and TypeScript
2
2
3
-
Welcome to the tutorial _Create a Serverless ChatGPT with RAG using LangChain.js and TypeScript_.
3
+
Welcome to the tutorial _Create a Serverless AI Chat with RAG using LangChain.js and TypeScript_.
4
4
5
-
This tutorial will guide you through creating a serverless a ChatGPT and RAG (Retrieval-Augmented Generation) application using **[LangChain.js](https://js.langchain.com/docs/get_started/introduction)**, **[Azure Functions](https://learn.microsoft.com/azure/azure-functions/)**, **[Azure Cosmos DB for MongoDB vCore](https://learn.microsoft.com/azure/cosmos-db/mongodb/vcore/)**, **[Azure Blob Storage](https://learn.microsoft.com/azure/storage/blobs/)**, and **[Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/)**.
5
+
This tutorial will guide you through creating a serverless a AI Chat and RAG (Retrieval-Augmented Generation) application using LangChain.js, Azure Functions, Azure Cosmos DB for MongoDB vCore, Azure Blob Storage, and Azure Static Web Apps.
6
6
7
-
The chatbot will be able to answer questions based on a set of enterprise documents uploaded from a fictional company called _Contoso Real Estate_.
7
+
The chatbot you're building can answer questions based on a set of enterprise documents uploaded from a fictional company called _Contoso Real Estate_.
8
8
9
9
Here's an example of the application in action:
10
10
11
11
12
12
13
-
The goal of the tutorial is to provide you with a hands-on experience building a serverless application using Azure Services and LangChain.js. You'll be guided through each step of the process from setting up the environment to deploying the application.
13
+
This tutorial will teach you how to build a serverless application using Azure Functions and LangChain.js.
14
14
15
-
The frontend of the application is provided so that you can focus on the backend code and technologies.
15
+
LangChain.js is a library used for building AI apps. It integrates LLMs, large language models like GPT, Claude-2 and more. It also makes it easy to develop AI-driven chatbots. Next, you'll learn how to set up the environment and deploy the application.
16
+
17
+
The front end of the application is provided so that you can focus on the backend code and technologies.
16
18
17
19
## Prerequisites
18
20
19
-
You can follow tutorial and run the application using one of the following options:
21
+
You can run the application in the tutorial using one of the following options:
20
22
21
-
- Run the application locally on your machine
23
+
- Run the application locally on your machine.
22
24
- Run the application using Codespaces.
23
25
24
-
> It is highly recommended to use Codespaces for this tutorial. Codespaces is a cloud-based tool that enables you to run development environments without installing any tools on your computer. This way, you can focus on the development process without worrying about the environment setup.
25
-
26
26
### Run using Codespaces
27
27
28
+
> It is highly recommended to use Codespaces for this tutorial. Codespaces is a cloud-based tool that enables you to run development environments without installing any tools on your computer. This way, you can focus on the development process without worrying about the environment setup.
29
+
28
30
If you decide to continue using **[Codespaces](https://github.com/features/codespaces)**, you can follow the steps described in the README.md file at the root of the project.
29
31
30
32
> **Note**: If you are using Codespaces, you don't need to install any of the prerequisites mentioned above. Codespaces already has all the necessary tools installed. Codespaces can be used for free for up to 60 hours per month, and this is renewed every month.
31
33
32
34
### Run Locally
33
35
34
-
If you choose to use a local environment, you will need to install:
36
+
If you choose to use a local environment, you'll need to install:
> If you're a Windows user, you'll need to install [PowerShell](https://learn.microsoft.com/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.4), [Git Bash](https://git-scm.com/downloads) or [WSL2](https://learn.microsoft.com/windows/wsl/install) to run the bash commands.
45
+
> If you are a Windows user, you'll need to install [PowerShell](https://learn.microsoft.com/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.4), [Git Bash](https://git-scm.com/downloads) or [WSL2](https://learn.microsoft.com/windows/wsl/install) to run the bash commands.
44
46
45
47
## Project Overview
46
48
47
-
Building AI applications can be complex and time-consuming. By using LangChain.js and Azure serverless technologies, you can greatly simplify the process. This application is a chatbot that uses a set of enterprise documents to generate AI responses to user queries.
49
+
Building AI applications can be complex and time-consuming. By using LangChain.js and Azure Functions including Serverless technologies, you can greatly simplify the process. These tools streamline the development by managing infrastructure concerns and scaling automatically, allowing you to focus more on building the chatbot functionality and less on the underlying system architecture. This application is a chatbot that uses a set of enterprise documents to generate AI responses to user queries.
48
50
49
51
The code sample includes sample data to make trying the application quick and easy, but feel free to replace it with your own. You'll use a fictitious company called Contoso Real Estate, and the experience allows its customers to ask support questions about the usage of the company's products. The sample data includes a set of documents that describes the company's terms of service, privacy policy, and support guide.
50
52
@@ -58,15 +60,15 @@ To understand the architecture of the project, let's break it down into its indi
58
60
59
61
1.**Web App:**
60
62
61
-
- The user interface for the chatbot is a web application built with **[Lit](https://lit.dev/)** (a library for building web components) and hosted using **[Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/overview)**. It renders a chat interface for users to interact with and ask questions.
62
-
- The code is located in the `packages/webapp` folder.
63
+
- The user interface for the chatbot is a web application built with **[Lit](https://lit.dev/)** (a library for building web components) and hosted using **[Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/overview)**. It provides a chat interface for users they can use to ask questions.
64
+
- The code is in the `packages/webapp` folder.
63
65
64
66
2.**Serverless API:**
65
67
66
-
- When a user submits a query through the web app, it is sent via HTTP to an API built using Azure Functions.
68
+
- When a user sends a query through the web app, it is sent via HTTP to an API built using Azure Functions.
67
69
- The API uses LangChain.js to process the query.
68
-
- The API handles the logic of ingesting enterprise documents and generating responses to the chat queries.
69
-
- The code for this functionality will be shown later in the tutorial and is located in the `packages/api` folder.
70
+
- The API manages the logic of corporate documents and responds with answers to chat queries.
71
+
- The code for this functionality will be shown later in the tutorial and is in the `packages/api` folder.
70
72
71
73
3.**Database:**
72
74
@@ -79,14 +81,14 @@ To understand the architecture of the project, let's break it down into its indi
79
81
80
82
5.**Azure OpenAI Service:**
81
83
82
-
- This service is where the AI Model (a Large Language Model or LLM) is hosted. The model is capable of understanding and generating natural language. This is used to embed text chunks or generate answers based on the vector search from the database.
84
+
- This service is where the AI Model (a Large Language Model or LLM) is hosted. The model can understand and generate natural language. This is used to embed text chunks or generate answers based on the vector search from the database.
83
85
84
86
Let's examine the application flow based on the architecture diagram:
85
87
86
88
- A user interacts with the chat interface in the web app
87
89
- The web app sends the user's query to the Serverless API via HTTP calls
88
90
- The Serverless API interacts with Azure OpenAI Service to generate a response, using the data from Azure Cosmos DB for MongoDB vCore.
89
-
- If there's a need to reference the original documents, Azure Blob Storage is used to retrieve the PDF documents.
91
+
- If there's a need to reference the documents, Azure Blob Storage is used to retrieve the PDF documents.
90
92
- The generated response is then sent back to the web app and displayed to the user.
91
93
92
94
The architecture is based on the RAG (Retrieval-Augmented Generation) architecture. This architecture combines the ability to retrieve information from a database with the ability to generate text from a language model. You'll learn more about RAG later in the tutorial.
@@ -95,7 +97,7 @@ The architecture is based on the RAG (Retrieval-Augmented Generation) architectu
95
97
96
98
Now that you understand the project's architecture, let's run it!
97
99
98
-
Once you have `forked` and `cloned` the project, use the `starter` branch to continue with the tutorial. The `main` branch contains the finished project if you wish to view it!
100
+
Once you have `forked` and `cloned` the project, use the `starter` branch to continue with the tutorial. The `main` branch has the finished project if you wish to view it!
99
101
100
102
To execute the project, follow these steps:
101
103
@@ -105,20 +107,36 @@ To execute the project, follow these steps:
105
107
npm install
106
108
```
107
109
108
-
2. To run the project, with only FrontEnd, execute the following command:
110
+
2. To run the project, with only Front-end, execute the following command:
109
111
110
112
```bash
111
-
start:webapp
113
+
npm run start:webapp
112
114
```
113
115
114
-
> At this point, don't worry about the other scripts in the `package.json` file at the root of the project. They will be used throughout the tutorial.
116
+
> At this point, do not worry about the other scripts in the `package.json` file at the root of the project. They will be used throughout the tutorial.
115
117
116
118
3. Open your browser and go to `http://localhost:8000`. The application will be displayed, as shown in the image below:
0 commit comments