In this quest, you'll teach your AI app to talk to external data using the Retreival Augmented Generation (RAG) technique. You'll overcome the limitations of pre-trained language models by allowing them to reference your own data, using it as context to deliver accurate, fact-based responses. 👉 Want to catch up on the full program or grab more quests? https://aka.ms/JSAIBuildathon 💬 Got questions or want to hang with other builders? Join us on Discord — head to the #js-ai-build-a-thon channel. 🔧 What You’ll Build In this quest, you’ll: Connect your AI app to external documents (like PDFs) Allow your app to “read” and respond using your real-world content Why does this matter? Because LLMs are powerful, but they don’t know your business, reports, or research papers, etc. With RAG, you can give them that context instantly. 🚀 What You’ll Need ✅ A GitHub account ✅ Visual Studio Code installed ✅ Node.js installed 🛠️ Concepts You’ll Explore 🔍 Retrieval-Augmented Generation (RAG) Think of RAG as giving your LLM a memory boost. Instead of relying on pre-trained data alone, RAG lets your model look up relevant facts from your content (like PDFs, docs, or CSVs) before answering. Response without RAG Benefits: Reduces hallucination Improves relevance and accuracy Makes your app dynamic and data-aware 📄 Bring Your Own Data (BYOD) You’ll use a sample .pdf to simulate a use case, but we strongly encourage you to bring your own. Think: Annual reports Research papers Instruction manuals Policy docs We’ll use the pdf-parse library to extract text — but here’s your dev challenge: try expanding your app to support .csv files or web content too! Lesson 5 in the resources section below shows you how. Response with RAG enabled ⭐️ For a Production-Ready RAG Experience Let's take a quick pause and look beyond the basics? For an implementation that follows industry best practices—ensuring faster responses, secure handling of data, and scalable retrieval—check out this robust example from Azure Samples: 🔗 Ask YouTube Shout out to Yohan Lasorsa, the sample author Ask YouTube lets you query YouTube video transcripts like you're chatting with the video itself. Just drop in a video link, and it’ll fetch the transcript, chunk it, embed it, and let you ask context-aware questions—powered by Retrieval-Augmented Generation (RAG). It’s a lightweight, serverless app built with LangChain.js, OpenAI, and Azure AI Search—great for learning how to bring your own data into AI conversations! Ask YouTube architecture diagram This sample demonstrates how to: Embed your documents using powerful embedding models Store and query vectors efficiently using a vector store Use LangChain.js to structure your RAG pipeline in a modular, extensible way Perfect if you're planning to build something more advanced—or just want to see how RAG is done right in the wild. 📖 Bonus Resources to Go Deeper Lesson 5: Talk to your data with Retrieval-Augmented Generation (RAG)Learn to embed and query external documents like a pro. What is Retrieval-Augmented Generation (RAG)?A foundational overview of RAG in LLM development. Retrieval Augmented Generation and IndexesA closer look at indexing and storing data for fast retrieval. Get started with Serverless AI Chat with RAG using LlamaIndexPractical steps to build with LlamaIndex, fully serverless. Get started with Serverless AI Chat with RAG using LangChain.jsLearn how to do the same with LangChain.js, the JavaScript-native RAG toolkit.

In this quest, you’ll give your Gen AI prototype a polished chat interface using Vite and Lit. Along the way, you’ll also manage application infrastructure with Bicep and Azure Developer CLI (azd), making your prototype more structured and ready for deployment. This step is all about UX, making your AI prototype not just functional, but interactive and user-friendly. 👉 Want to catch up on the full program or grab more quests? https://aka.ms/JSAIBuildathon 💬 Got questions or want to hang with other builders? Join us on Discord — head to the #js-ai-build-a-thon channel. 🔧 What You’ll Build By the end of this quest, you’ll have: A chat UI built with Vite and Lit A structured codebase with infrastructure-as-code (IaC) using Bicep Seamless local deployment workflow using the Azure Developer CLI (azd) This UI lets users chat with your prototype as if it were a real app. AI Chat Interface 💡 Why This Quest Matters First impressions count – A sleek UI turns a console prototype into something playable by anyone. Scaffolding for more – Once your UI is ready, you can plug in advanced features like RAG and memory. Clean infrastructure – Using Bicep & azd ensures your app can scale and deploy cleanly later on. 🚀 What You’ll Need ✅ A GitHub account ✅ Visual Studio Code installed ✅ Node.js installed ✅An Azure subscription. Use the free trial if you don't have one, or Azure for Students if you are a student. ✅ Azure Developer CLI installed 🛠️ Concepts You’ll Explore ⚡️Vite + Lit = Fast UIs with Modern web components Vite In this quest, you'll use Vite for lightning-fast dev builds and hot reloads, paired with Lit to build sleek, reactive web components. You'll integrate a custom <chat-ui> built with Lit to render messages and manage chat state—plug in a mock or real AI backend and you're good to go. Fast, modular, and extensible. 💻 Azure Developer CLI (azd) <azd> ties your app’s frontend, backend, and infrastructure into one command-line flow. You’ll use it to instantly spin up a working app environment without writing the setup from scratch—just <azd up> and go! 🏗️ Infrastructure as Code with Bicep Bicep lets you write your infra as code using simple, declarative templates. In this quest, you’ll use Bicep to provision services like Azure Static Web Apps and App Service, ensuring everything is scalable, consistent, and DevOps-ready. 📚 Bonus Resources Accelerate your journey to the cloud with azd A curated “Awesome azd” guide packed with start-to-end workflows and templates to fast-track your cloud app development using the Azure Developer CLI BRK118: Accelerate Azure Development with GitHub Copilot, VS Code & AI Watch this session to learn how GitHub Copilot, VS Code, and AI come together to enhance developer productivity on Azure Introducing the Azure Developer CLI (azd): A faster way to build apps for the cloud A blog post announcing azd as a streamlined, developer-friendly tool to provision, deploy, and manage Azure apps quickly Azure Developer CLI (azd) on GitHub Azure Developer CLI (azd) documentation ✅ Ready to build? 👉 Join the JS AI Build-a-thon | 💬 Connect with the community on Discord Grab your favorite code editor, explore the starter skeleton in the sample repo, and start crafting your chat UI — then go beyond it. 💡 This quest lays the foundation for everything that follows: RAG, memory, agents, and more. So don’t just build the basics — challenge yourself to enhance the UI, customize the experience, and experiment with GitHub Copilot in Agent Mode to co-create smarter, faster. Let’s see what you can come up with — and don’t forget to share your progress in Discord! ⏮️ Revisit the previous quest (Quest 2)

In this quest, you’ll take your locally running Gen AI app and deploy it to the cloud using Azure. You’ll use the move from GitHub Models to Azure AI Foundry — all with just one click of a button. This is where your prototype becomes real. Whether you’re prepping for a demo, testing in production-like conditions, or just want to share your app with others, this quest is your launchpad. 👉 Want to catch up on the full program or grab more quests? https://aka.ms/JSAIBuildathon 💬 Got questions or want to hang with other builders? Join us on Discord — head to the #js-ai-build-a-thon channel. Why this quest matters? You’ll learn how to go from local to cloud in minutes You’ll get hands-on with Azure AI Foundry (Directly from VS Code) You’ll build confidence deploying real AI apps on enterprise ready infrastructure What You’ll Need to Complete the Quest ✅ A GitHub account ✅ An Azure subscription (https://azure.microsoft.com/free/) or (https://azure.microsoft.com/en-us/free/students) for students ✅ Visual Studio Code installed That’s it. You’ll be live before your coffee gets cold. Concepts You’ll Explore (And Why They Matter) 🛠 GitHub Models to Azure AI Foundry GitHub Models is a developer-friendly playground to explore and test AI models. Azure AI Foundry is your enterprise-grade platform for building, evaluating, and deploying AI models at scale. Think of it as your mission control for GenAI, where experimentation meets production. To migrate from GitHub Models to Azure AI Foundry, is just a click of a button. Welcome to Azure AI Foundry 🕸️ AI Foundry VS Code Extension The Azure AI Foundry VS Code extension is a powerful new tool designed to streamline the development of intelligent applications directly within your coding environment. This extension allows developers to build, test, and deploy AI agents and applications using the same modular, production-grade components found in the Azure AI Foundry portal. Whether you're customizing foundation models or managing agentic behavior, the extension brings the full power of Azure AI Foundry into your local development loop. 🔁 Best Security Practices When using Azure AI Foundry, securing your keys, endpoints, and data flows is essential to building trustworthy and compliant AI applications. First, always store API keys and connection strings in Azure Key Vault, and if using a local .env file, ensure you add it to your .gitignore file. Bonus resources to keep going Here’s a curated list of follow-up reads and lessons to deepen your knowledge after this quest. Each one is designed to build your skills and spark new ideas: About GitHub Models - Get the lowdown on what GitHub Models are, why they matter, and how they fit into your workflow. Install the Microsoft AI Tools Extension Pack: A set of must-have VS Code extensions for Gen AI workflows. Azure AI Foundry Extension for Visual Studio Code is Available in Preview. AI Foundry extension preview announcement Work with the Azure AI Foundry for Visual Studio Code extension docs. Learn about additional features of the Azure AI Foundry for Visual Studio Code extension such as code templates, playgrounds, and integration with other VS Code extensions. 📹 BRK107: Develop, Build and Deploy LLM Apps using GitHub Models and Azure AI Foundry. Watch this demo-packed session to learn how to quickly experiment and compare LLMs using GitHub Models, build functionality into your application, and scale up to production deployment with Azure AI Foundry This quest is where your AI development in the cloud journey truly begins. Just you, your code editor, and a model ready to turn your ideas into something real. So, jump in, build securely in the cloud, and discover just how far JavaScript and AI can take you. 👉 Join the JS AI Build-a-thon 💬 Connect with the community on Discord ⏭️ Check out the next quest (Quest 3) ⏮️ Revisit the previous quest (Quest 1)

In this quest, you’ll take your locally running Gen AI app and deploy it to the cloud using Azure. You’ll use the move from GitHub Models to Azure AI Foundry — all with just one click of a button. This is where your prototype becomes real. Whether you’re prepping for a demo, testing in production-like conditions, or just want to share your app with others, this quest is your launchpad. 👉 Want to catch up on the full program or grab more quests? https://aka.ms/JSAIBuildathon 💬 Got questions or want to hang with other builders? Join us on Discord — head to the #js-ai-build-a-thon channel. Why this quest matters? You’ll learn how to go from local to cloud in minutes You’ll get hands-on with Azure AI Foundry (Directly from VS Code) You’ll build confidence deploying real AI apps on enterprise ready infrastructure What You’ll Need to Complete the Quest ✅ A GitHub account ✅ An Azure subscription (https://azure.microsoft.com/free/) or (https://azure.microsoft.com/en-us/free/students) for students ✅ Visual Studio Code installed That’s it. You’ll be live before your coffee gets cold. Concepts You’ll Explore (And Why They Matter) 🛠 GitHub Models to Azure AI Foundry GitHub Models is a developer-friendly playground to explore and test AI models. Azure AI Foundry is your enterprise-grade platform for building, evaluating, and deploying AI models at scale. Think of it as your mission control for GenAI, where experimentation meets production. To migrate from GitHub Models to Azure AI Foundry, is just a click of a button. Welcome to Azure AI Foundry 🕸️ AI Foundry VS Code Extension The Azure AI Foundry VS Code extension is a powerful new tool designed to streamline the development of intelligent applications directly within your coding environment. This extension allows developers to build, test, and deploy AI agents and applications using the same modular, production-grade components found in the Azure AI Foundry portal. Whether you're customizing foundation models or managing agentic behavior, the extension brings the full power of Azure AI Foundry into your local development loop. 🔁 Best Security Practices When using Azure AI Foundry, securing your keys, endpoints, and data flows is essential to building trustworthy and compliant AI applications. First, always store API keys and connection strings in Azure Key Vault, and if using a local .env file, ensure you add it to your .gitignore file. Bonus resources to keep going Here’s a curated list of follow-up reads and lessons to deepen your knowledge after this quest. Each one is designed to build your skills and spark new ideas: About GitHub Models - Get the lowdown on what GitHub Models are, why they matter, and how they fit into your workflow. Install the Microsoft AI Tools Extension Pack: A set of must-have VS Code extensions for Gen AI workflows. Azure AI Foundry Extension for Visual Studio Code is Available in Preview. AI Foundry extension preview announcement Work with the Azure AI Foundry for Visual Studio Code extension docs. Learn about additional features of the Azure AI Foundry for Visual Studio Code extension such as code templates, playgrounds, and integration with other VS Code extensions. 📹 BRK107: Develop, Build and Deploy LLM Apps using GitHub Models and Azure AI Foundry. Watch this demo-packed session to learn how to quickly experiment and compare LLMs using GitHub Models, build functionality into your application, and scale up to production deployment with Azure AI Foundry This quest is where your AI development in the cloud journey truly begins. Just you, your code editor, and a model ready to turn your ideas into something real. So, jump in, build securely in the cloud, and discover just how far JavaScript and AI can take you. 👉 Join the JS AI Build-a-thon 💬 Connect with the community on Discord