glaucia86 · January 24, 2025 22:12
diff --git a/gistfile1.txt b/gistfile1.txt
 # Building a versatile RAG Pattern chat bot with Azure OpenAI and LangChain | Azure Developers JavaScript Day 2024

 ![alt text](image.png)

 > teaser: In the digital realm where the integration of AI and web development is constantly evolving, the JavaScript Developer Days witnessed a fascinating session dedicated to unveiling the intricacies of creating a RAG (Retrieval Augmentation Generation) pattern chatbot utilizing Azure OpenAI and LangChain. The session was enriched by the insights of special guest Lars, a Denmark-based Microsoft MVP, GitHub star, NX Champion, Angular hero of education, and a fervent community organizer. Wassim, a Senior Developer Advocate Engineer at Microsoft, and Natalia, a Principal Product Manager at Microsoft, also shared their expertise, offering a comprehensive guide to developing AI-driven applications with Azure services and Developer Tools.

 ---

 In this second article on this year's Microsoft event aimed at JavaScript developers: _Azure Developers JavaScript Day 2024_, we're going to talk about creating a chatbot using the RAG (Retrieval Augmentation Generation) architecture with Azure OpenAI and LangChain.js! And this time we have the special participation of **[Lars Gyrup](https://twitter.com/LayZeeDK)**, a Microsoft MVP from Denmark, GitHub star, NX Champion, Angular hero of education and a fervent community organizer. And, also with **[Wassim Chegham](https://twitter.com/manekinekko)**, a Senior Developer Advocate Engineer at Microsoft with a long history in JavaScript development, and **[Natalia Venditto](https://twitter.com/AnfibiaCreativa)**, a Principal Product Manager at Microsoft focused on the Developer Experience in Azure.

 Let's get to the content! 

 ## What was covered during the session?

 If you wish, watch the video below and find out what happened during the talk!

 Video Link: [Azure Developers JavaScript Day 2024](https://www.youtube.com/watch?v=4fNoGZSTB_A)  

 ### The Confluence of Expertise

 Lars introduced his extensive background, highlighting his contributions to Developer Technologies, Open-Source projects, and educational initiatives. His foundational work with the **[This is Learning](https://thisislearning.dev/)** community, which evolved from an Angular-centric hub to a broader tech community, showcases his commitment to fostering growth and knowledge sharing among tech enthusiasts of all skill levels.

 ---> remover essa foto
 ![alt text](image-02.png)

 Wassim and Natalia, complemented the discussion with their vast experiences. Their collaboration has led to the development of samples that guide the community on best practices for application implementation using Azure services and Developer Tools.

 > You can check out Wassim's profile on **[GitHub](https://github.com/manekinekko)** and Natalia's on **[GitHub](https://github.com/anfibiacreativa)**. All the code and projects they develop are available there!

 ### Unraveling the RAG Pattern

 The core of the session was the deep dive into the **[RAG pattern](https://learn.microsoft.com/azure/search/retrieval-augmented-generation-overview)**, a sophisticated architecture designed to enhance AI-driven applications by leveraging large language models for predictive content generation. This pattern, integral to generative AI technologies like **[GitHub Copilot](https://github.com/features/copilot)**, empowers applications to construct responses to user queries with unprecedented accuracy and relevance.

 ### Architectural Overview and Implementation

 Wassim and Natalia walked through the architecture of the **[sample RAG chatbot application](https://github.com/Azure-Samples/azure-search-openai-javascript)**, detailing the utilization of various Azure services, including:

 - Azure Static Web Apps for the UI deployment
 - Azure Container Apps for the backend logic    
 - Azure AI Search for data indexing and retrieval

 The integration with OpenAI’s APIs plays a pivotal role in fetching predictive *models* and *responses*.

 The session also shed light on the application's backend components: the *indexer* and the *search* API, highlighting the use of Fastify for API exposure and the strategic implementation of the sliding window algorithm for efficient text *chunking* and *indexing*.  

 Below you can see a diagram of the project's architecture:

 ![alt text](image-1.png)

 ### Engaging with the Code

 The practical segment involved a detailed code walkthrough, emphasizing npm workspaces, monorepo organization, and the use of libraries like LangChain.js for seamless interaction with Azure OpenAI. The discussion also touched on the importance of *semantic search* and *vector embeddings* in improving the chatbot's response quality.

 ![alt text](image-2.png)    

 You can get an overview of the project's code at **[GitHub](https://github.com/Azure-Samples/azure-search-openai-javascript/)**. Help us improve the project with your contributions and feedback! The project is completely open-source and available to the community. And give stars to the repository if you like it! ;)

 ![alt text](image-4.png)

 ### Frontend Realizations and Angular Insights

 Lars provided a comprehensive overview of the latest features and improvements in **[Angular](https://angular.io/features)**, including:

 - Signals for managing state changes. 
 - Standalone components for modular development. 
 - And the evolution of template syntax for more intuitive code structuring. 

 The session illustrated how these Angular advancements could be leveraged in the context of the RAG chatbot application, enhancing its functionality and user interaction.

 You can see in the image below an example of how the chatbot has been implemented in the user interface, making use of Angular's new features:

 ![alt text](image-5.png)

 ### Deployment and Contributions to the Project

 The deployment process to Azure was demystified, showcasing the use of:

 - **[Azure Developer CLI](https://learn.microsoft.com/pt-br/azure/developer/azure-developer-cli/overview)**: which is a command line tool that allows you to create, manage and deploy Azure resources directly from the terminal.  

 - **[Bicep](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/overview?tabs=bicep)**: which is an Infrastructure as Code (IaC) language that allows Azure resources to be defined declaratively.

 The open invitation for community contributions to the project underscores the collaborative spirit of the initiative.

 ### Conclusion for the Session

 This enriching session at the JavaScript Developer Days 2024 not only offered a comprehensive guide to developing a RAG pattern chatbot but also illuminated the potential of combining Angular’s new features with Azure's robust cloud services. The contributions of Lars, Wassim, and Natalia provided attendees with valuable insights into leveraging modern web development practices and AI technologies to create dynamic, responsive applications.

 The collaborative effort to build and refine this project invites developers from across the spectrum to contribute, learn, and grow within this innovative domain, further bridging the gap between AI advancements and practical web development applications.

 ## Azure Developers JavaScript Day Cloud Skills Challenge

 ![alt text](image-6.png)

 As mentioned in **[previous article](https://techcommunity.microsoft.com/t5/microsoft-developer-community/langchain-js-azure-a-generative-ai-app-journey-azure-developers/ba-p/4101261)**, the event also featured a cloud skills challenge focused on JavaScript Developers, where participants could test their knowledge and skills in Azure. Although the challenge is over, you can continue your studies!

 Link to the challenge: **[JavaScript and Azure Cloud Skills Challenge](https://learn.microsoft.com/en-us/collections/gm3rb350n8p5?WT.mc_id=cloudskillschallenge_863688a1-02ad-4fd3-9bbc-651bfc053aef)**

 ## Additional Resources

 It's always good to have more resources to keep learning, isn't it? Here are some links for you to continue delving deeper into the subject: 

 https://learn.microsoft.com/pt-br/training/modules/use-own-data-azure-openai/

 https://learn.microsoft.com/pt-br/training/challenges?id=863688a1-02ad-4fd3-9bbc-651bfc053aef

 https://learn.microsoft.com/pt-br/training/challenges?id=7f1dc76e-44d9-475f-9419-a6d1f579f9d8

 https://learn.microsoft.com/pt-br/collections/zopanqdn7w1p1

 --> (incluir outros links relevantes)
 https://learn.microsoft.com/pt-br/training/browse/?terms=github%20copilot

 ## Stay Tuned!

 If you wish, you can follow what happened during the two days of the event via the **[playlist on YouTube](https://www.youtube.com/playlist?list=PLI7iePan8aH7FRDmefj-NAnoxM9V0USZm)**. The event was full of interesting content and insights for JavaScript developers!

 Stay tuned for more articles about this event and keep learning with us! 🚀
	# Building a versatile RAG Pattern chat bot with Azure OpenAI and LangChain \| Azure Developers JavaScript Day 2024

	![alt text](image.png)

	> teaser: In the digital realm where the integration of AI and web development is constantly evolving, the JavaScript Developer Days witnessed a fascinating session dedicated to unveiling the intricacies of creating a RAG (Retrieval Augmentation Generation) pattern chatbot utilizing Azure OpenAI and LangChain. The session was enriched by the insights of special guest Lars, a Denmark-based Microsoft MVP, GitHub star, NX Champion, Angular hero of education, and a fervent community organizer. Wassim, a Senior Developer Advocate Engineer at Microsoft, and Natalia, a Principal Product Manager at Microsoft, also shared their expertise, offering a comprehensive guide to developing AI-driven applications with Azure services and Developer Tools.

	---

	In this second article on this year's Microsoft event aimed at JavaScript developers: _Azure Developers JavaScript Day 2024_, we're going to talk about creating a chatbot using the RAG (Retrieval Augmentation Generation) architecture with Azure OpenAI and LangChain.js! And this time we have the special participation of [Lars Gyrup](https://twitter.com/LayZeeDK), a Microsoft MVP from Denmark, GitHub star, NX Champion, Angular hero of education and a fervent community organizer. And, also with [Wassim Chegham](https://twitter.com/manekinekko), a Senior Developer Advocate Engineer at Microsoft with a long history in JavaScript development, and [Natalia Venditto](https://twitter.com/AnfibiaCreativa), a Principal Product Manager at Microsoft focused on the Developer Experience in Azure.

	Let's get to the content!

	## What was covered during the session?

	If you wish, watch the video below and find out what happened during the talk!

	Video Link: [Azure Developers JavaScript Day 2024](https://www.youtube.com/watch?v=4fNoGZSTB_A)

	### The Confluence of Expertise

	Lars introduced his extensive background, highlighting his contributions to Developer Technologies, Open-Source projects, and educational initiatives. His foundational work with the [This is Learning](https://thisislearning.dev/) community, which evolved from an Angular-centric hub to a broader tech community, showcases his commitment to fostering growth and knowledge sharing among tech enthusiasts of all skill levels.

	---> remover essa foto
	![alt text](image-02.png)

	Wassim and Natalia, complemented the discussion with their vast experiences. Their collaboration has led to the development of samples that guide the community on best practices for application implementation using Azure services and Developer Tools.

	> You can check out Wassim's profile on [GitHub](https://github.com/manekinekko) and Natalia's on [GitHub](https://github.com/anfibiacreativa). All the code and projects they develop are available there!

	### Unraveling the RAG Pattern

	The core of the session was the deep dive into the [RAG pattern](https://learn.microsoft.com/azure/search/retrieval-augmented-generation-overview), a sophisticated architecture designed to enhance AI-driven applications by leveraging large language models for predictive content generation. This pattern, integral to generative AI technologies like [GitHub Copilot](https://github.com/features/copilot), empowers applications to construct responses to user queries with unprecedented accuracy and relevance.

	### Architectural Overview and Implementation

	Wassim and Natalia walked through the architecture of the [sample RAG chatbot application](https://github.com/Azure-Samples/azure-search-openai-javascript), detailing the utilization of various Azure services, including:

	- Azure Static Web Apps for the UI deployment
	- Azure Container Apps for the backend logic
	- Azure AI Search for data indexing and retrieval

	The integration with OpenAI’s APIs plays a pivotal role in fetching predictive models and responses.

	The session also shed light on the application's backend components: the indexer and the search API, highlighting the use of Fastify for API exposure and the strategic implementation of the sliding window algorithm for efficient text chunking and indexing.

	Below you can see a diagram of the project's architecture:

	![alt text](image-1.png)

	### Engaging with the Code

	The practical segment involved a detailed code walkthrough, emphasizing npm workspaces, monorepo organization, and the use of libraries like LangChain.js for seamless interaction with Azure OpenAI. The discussion also touched on the importance of semantic search and vector embeddings in improving the chatbot's response quality.

	![alt text](image-2.png)

	You can get an overview of the project's code at [GitHub](https://github.com/Azure-Samples/azure-search-openai-javascript/). Help us improve the project with your contributions and feedback! The project is completely open-source and available to the community. And give stars to the repository if you like it! ;)

	![alt text](image-4.png)

	### Frontend Realizations and Angular Insights

	Lars provided a comprehensive overview of the latest features and improvements in [Angular](https://angular.io/features), including:

	- Signals for managing state changes.
	- Standalone components for modular development.
	- And the evolution of template syntax for more intuitive code structuring.

	The session illustrated how these Angular advancements could be leveraged in the context of the RAG chatbot application, enhancing its functionality and user interaction.

	You can see in the image below an example of how the chatbot has been implemented in the user interface, making use of Angular's new features:

	![alt text](image-5.png)

	### Deployment and Contributions to the Project

	The deployment process to Azure was demystified, showcasing the use of:

	- [Azure Developer CLI](https://learn.microsoft.com/pt-br/azure/developer/azure-developer-cli/overview): which is a command line tool that allows you to create, manage and deploy Azure resources directly from the terminal.

	- [Bicep](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/overview?tabs=bicep): which is an Infrastructure as Code (IaC) language that allows Azure resources to be defined declaratively.

	The open invitation for community contributions to the project underscores the collaborative spirit of the initiative.

	### Conclusion for the Session

	This enriching session at the JavaScript Developer Days 2024 not only offered a comprehensive guide to developing a RAG pattern chatbot but also illuminated the potential of combining Angular’s new features with Azure's robust cloud services. The contributions of Lars, Wassim, and Natalia provided attendees with valuable insights into leveraging modern web development practices and AI technologies to create dynamic, responsive applications.

	The collaborative effort to build and refine this project invites developers from across the spectrum to contribute, learn, and grow within this innovative domain, further bridging the gap between AI advancements and practical web development applications.

	## Azure Developers JavaScript Day Cloud Skills Challenge

	![alt text](image-6.png)

	As mentioned in [previous article](https://techcommunity.microsoft.com/t5/microsoft-developer-community/langchain-js-azure-a-generative-ai-app-journey-azure-developers/ba-p/4101261), the event also featured a cloud skills challenge focused on JavaScript Developers, where participants could test their knowledge and skills in Azure. Although the challenge is over, you can continue your studies!

	Link to the challenge: [JavaScript and Azure Cloud Skills Challenge](https://learn.microsoft.com/en-us/collections/gm3rb350n8p5?WT.mc_id=cloudskillschallenge_863688a1-02ad-4fd3-9bbc-651bfc053aef)

	## Additional Resources

	It's always good to have more resources to keep learning, isn't it? Here are some links for you to continue delving deeper into the subject:

	https://learn.microsoft.com/pt-br/training/modules/use-own-data-azure-openai/

	https://learn.microsoft.com/pt-br/training/challenges?id=863688a1-02ad-4fd3-9bbc-651bfc053aef

	https://learn.microsoft.com/pt-br/training/challenges?id=7f1dc76e-44d9-475f-9419-a6d1f579f9d8

	https://learn.microsoft.com/pt-br/collections/zopanqdn7w1p1

	--> (incluir outros links relevantes)
	https://learn.microsoft.com/pt-br/training/browse/?terms=github%20copilot

	## Stay Tuned!

	If you wish, you can follow what happened during the two days of the event via the [playlist on YouTube](https://www.youtube.com/playlist?list=PLI7iePan8aH7FRDmefj-NAnoxM9V0USZm). The event was full of interesting content and insights for JavaScript developers!

	Stay tuned for more articles about this event and keep learning with us! 🚀