docs: adding ch1

genai-js-videos/.editorconfig

@@ -0,0 +1,15 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 120
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

genai-js-videos/README.md

@@ -0,0 +1,117 @@
+<div align="center">
+
+<img src="./docs/images/logo.png" alt="" align="center" height="128" />
+
+# Generative AI with JavaScript
+
+[![Open project in GitHub Codespaces](https://img.shields.io/badge/Codespaces-Open-blue?style=flat-square&logo=github)](https://codespaces.new/microsoft/generative-ai-with-javascript?hide_repo_select=true&ref=main&quickstart=true)
+[![Watch the video series](https://img.shields.io/badge/YouTube-d95652.svg?style=flat-square&logo=youtube)](https://aka.ms/genai-js)
+![JavaScript](https://img.shields.io/badge/JavaScript-yellow?style=flat-square&logo=javascript&logoColor=white)
+[![License](https://img.shields.io/badge/License-MIT-orange?style=flat-square)](LICENSE)
+
+⭐ If you like this repo, star it on GitHub — it helps a lot!
+
+[Overview](#overview) • [Quickstart](#quickstart) • [Video series](#video-series) • [Tutorials](#tutorials) • [Code samples](#code-samples) • [Community](#community) • [More resources](#more-resources)
+
+</div>
+
+## Overview
+
+The repository aims to centralize our content related to the **Generative AI with JavaScript** topic. You'll find code samples, tutorials as well all the resources from the video series, with best practices and tips to supercharge your AI skills. If you're a JavaScript developer looking to get started with AI, or if you already have some experience and want to learn more, you've come to the right place!
+
+We cover the basics of generative AI and how to build AI applications using JavaScript, from local development to deployment on Azure, up to running and scaling your AI models. This is a living repository, so come back often to check for new content! ✨
+
+[📺 Watch the video series](https://aka.ms/genai-js)
+
+> [!IMPORTANT]
+> All the content in this repository is open-source, so feel free to **reuse it, adapt it to make it your own, and share it with others!**
+
+### How to use this repository?
+
+You'll find in the repo all the content associated with the video series, including slides, demos, scripts, as well as additional code samples, tutorials, and resources.
+You can use it to follow along with the series, run the demos, replay the sessions or reuse the content in your own presentations. Once you've learned what you need, you can use the code samples and tutorials to kickstart your own AI applications.
+
+It's organized as follows:
+- [**Sessions**](sessions/): Contains the description, abstracts, resources links and scripts for each session.
+- [**Slides**](slides/): Contains the slides for each session.
+- [**Demos**](demos/): Contains the demos associated with each session.
+- [**Tutorials**](#tutorials): Contains hands-on tutorials that you can follow to learn more about AI and JavaScript.
+- [**Code samples**](#code-samples): Contains code samples that you can use as a starting point for your own projects.
+- [**Community**](#community): How to join the Azure AI community on Discord.
+
+## Quickstart
+
+If you're eager to put your hands on the code, you can pick one of the following quickstarts to get started right away:
+
+- [Get started with Ollama and Phi-3, directly in your browser](https://github.com/sinedied/ollama-javascript-playground#ollama-javascript-playground) (Needs a free [GitHub account](https://github.com/join))
+- [Get started with GitHub Models, directly in your browser](https://github.com/Azure-Samples/github-models-javascript-playground) (Needs a free [GitHub account](https://github.com/join) and to sign up for the [public beta access](https://github.com/marketplace/models/waitlist/join))
+- [Get started with Azure OpenAI](https://learn.microsoft.com/azure/ai-services/openai/chatgpt-quickstart?tabs=command-line%2Ctypescript%2Cpython-new&pivots=programming-language-javascript) (Needs a free [Azure account](https://azure.com/free))
+
+## Video series
+
+| # | Session | Description | Slides | Demo | Script | Video |
+|---|---------|-------------|--------|------|--------|-------|
+| 0 | Series introduction | Introduces the series and its content. | [pptx](slides/00-intro.pptx) / [pdf](slides/pdf/00-intro.pdf) | - | [Script](sessions/00-intro.md) | [📺](https://www.youtube.com/watch?v=vLYtDgs_zx8&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=1) |
+| 1 | What you need to know about LLMs | Explores what are LLMs, how they're trained, how they work and their limits. | [pptx](slides/01-llms.pptx) / [pdf](slides/pdf/01-llms.pdf) | [Demo](demos/01-llms/) | [Script](sessions/01-llms.md) | [📺](https://www.youtube.com/watch?v=GQ_2OjNZ9aA&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=2)  |
+| 2 | Essential prompt engineering techniques | Practical prompt engineering techniques to get the best out of AI models. | [pptx](slides/02-prompt-engineering.pptx) / [pdf](slides/pdf/02-prompt-engineering.pdf) | [Demo](demos/02-prompt-engineering/) | [Script](sessions/02-prompt-engineering.md) | [📺](https://www.youtube.com/watch?v=gQ6TlyxBmWs&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=3)  |
+| 3 | Improve AI accuracy and reliability with RAG | Introduces Retrieval-Augmented Generation, to use AI with your own data. | [pptx](slides/03-rag.pptx) / [pdf](slides/pdf/03-rag.pdf) | [Demo](demos/03-rag/) | [Script](sessions/03-rag.md) | [📺](https://www.youtube.com/watch?v=xkFOmx5yxIA&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=4) |
+| 4 | Speed up your AI development with LangChain.js | Covers LangChain.js framework core concepts, and how to use it to accelerate AI developments. | [pptx](slides/04-langchainjs.pptx) / [pdf](slides/pdf/04-langchainjs.pdf) | [Demo](demos/04-langchainjs/) | [Script](sessions/04-langchainjs.md) | [📺](https://www.youtube.com/watch?v=02IDU8eCX8o&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=5) |
+| 5 | Run AI models on your local machine with Ollama | Shows how to integrate local AI models into your development workflow. | [pptx](slides/05-local-models.pptx) / [pdf](slides/pdf/05-local-models.pdf) | [Demo](demos/05-local-models/) | [Script](sessions/05-local-models.md) | [📺](https://www.youtube.com/watch?v=dLfNnoPv4AQ&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=6) |
+| 6 | Get started with AI for free using Phi-3 | Experiments with Ollama and Phi-3 model directly from your browser. | [pptx](slides/06-playground.pptx) / [pdf](slides/pdf/06-playground.pdf) | [Demo](demos/06-playground/) | [Script](sessions/06-playground.md) | [📺](https://www.youtube.com/watch?v=Ds32MS9SHzU&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=7) |
+| 7 | Introduction to Azure AI Foundry | Kickstart your journey with Azure AI Foundry. | [pptx](slides/07-ai-foundry.pptx) / [pdf](slides/pdf/07-ai-foundry.pdf) | [Demo](demos/07-ai-foundry/) | [Script](sessions/07-ai-foundry.md) | [📺](https://www.youtube.com/watch?v=9Mo-VOGk8ng&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=8) |
+| 8 | Building Generative AI Apps with Azure Cosmos DB | Build generative AI apps with Azure Cosmos DB and vector search. | [pptx](slides/08-cosmos-db.pptx) / [pdf](slides/pdf/08-cosmos-db.pdf) | [Demo](demos/08-cosmos-db/) | [Script](sessions/08-cosmos-db.md) | [📺](https://www.youtube.com/watch?v=-GQyaLbeqxQ&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=9)  |
+| 9 | Azure tools & services for hosting and storing AI apps | Build, deploy, and scale AI applications using Azure tools. | [pptx](slides/08-azure-tools.pptx) / [pdf](slides/pdf/08-azure-tools.pdf) | - | [Script](sessions/08-azure-tools.md) | [📺](https://www.youtube.com/watch?v=WB6Fpzhwyug&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=10) |
+| 10 | Streaming Generative AI output with the AI Chat Protocol | Integrate streaming easily into your apps with the AI Chat Protocol. | [pptx](slides/10-chat-protocol.pptx) / [pdf](slides/pdf/10-chat-protocol.pdf) | [Demo](demos/10-chat-protocol/) | [Script](sessions/10-chat-protocol.md) | [📺](https://www.youtube.com/watch?v=fzDCW-6hMtU&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=11) |
+
+New segments will be added to the series over time, so stay tuned!
+
+### Run the demos
+
+Demos are located in the [demo/](demos/) folder and organized by sessions. Each session has a folder with a `readme.md` file that explains the demo, its prerequisites and how to run it.
+
+## Tutorials
+
+You can find here hands-on tutorials to put your AI skills into practice, with step-by-step instructions that will guide you through the process of building applications making use of AI with JavaScript.
+
+| Name | Description | Duration | Level | Links |
+| ---- | ----------- | -------- | ----- | ----- |
+| Azure OpenAI RAG workshop - Qdrant version | Explore the fundamentals of custom ChatGPT experiences based on a corpus of documents. We will create a vector database and fill-in with data from PDF documents, and then build a chat website and API to be able to ask questions about information contained in these documents. | 3h | Beginner | [Tutorial](https://moaw.dev/workshop/gh:azure-samples/azure-openai-rag-workshop/docs/workshop-qdrant.md) / [Repo](https://github.com/Azure-Samples/azure-openai-rag-workshop) |
+| Azure OpenAI RAG workshop - AI Search version | Explore the fundamentals of custom ChatGPT experiences based on a corpus of documents. We will create a vector database and fill-in with data from PDF documents, and then build a chat website and API to be able to ask questions about information contained in these documents. | 3h | Beginner | [Tutorial](https://moaw.dev/workshop/?src=gh:azure-samples/azure-openai-rag-workshop/docs/) / [Repo](https://github.com/Azure-Samples/azure-openai-rag-workshop) |
+| Integrate OpenAI, Communication, and Organizational Data Features into a Line of Business App | This tutorial demonstrates how Azure OpenAI, Azure Communication Services, and Microsoft Graph/Microsoft Graph Toolkit can be integrated into a Line of Business (LOB) application to enhance user productivity, elevate the user experience, and take LOB apps to the next level | 3h | Beginner | [Tutorial](https://learn.microsoft.com/microsoft-cloud/dev/tutorials/openai-acs-msgraph) / [Repo](https://github.com/microsoft/MicrosoftCloud) |
+
+## Code samples
+
+The following code samples are available to help you get started with building your own AI applications. Use them to learn how to architect your applications, experiment with different features, or use them as a starting point for your own projects.
+
+| Name | Description | GitHub Repo | Technologies |
+| ---- | ----------- | ----------- | ------------ |
+| Serverless AI Chat with RAG using LangChain.js | This sample shows how to build a serverless AI chat experience with Retrieval-Augmented Generation using LangChain.js and Azure. |  [Repo](https://github.com/Azure-Samples/serverless-chat-langchainjs) | <sub>LangChain.js, Lit, Vite, Azure OpenAI, Azure Cosmos DB, Azure Blob Storage, Azure Functions, Azure Static Web Apps, AZD</sub> |
+| Serverless Azure OpenAI Quick Start with LlamaIndex | This sample shows how to quickly get started with LlamaIndex.ai on Azure |  [Repo](https://github.com/Azure-Samples/llama-index-javascript) | <sub>LlamaIndex.ts, Next.js, Azure OpenAI, Azure Container Apps, Docker, AZD</sub> |
+| Serverless Azure OpenAI Assistant Quick Start | Azure OpenAI Assistants allows you to create AI assistants tailored to your needs through custom instructions and augmented by advanced tools. |  [Repo](https://github.com/Azure-Samples/azure-openai-assistant-javascript) | <sub>HTML-CSS-JavaScript, Azure Static Web Apps, Azure Blob Storage, Azure Functions, Azure OpenAI, AZD</sub> |
+| Serverless RAG application with LlamaIndex and code interpreter on Azure Container Apps | This is a LlamaIndex project using Next.js bootstrapped with create-llama. It uses Azure Container Apps as a serverless deployment platform. |  [Repo](https://github.com/Azure-Samples/llama-index-azure-code-interpreter) | <sub>Azure OpenAI, LlamaIndex, Azure Container Apps, Next.js, GitHub Actions, TypeScript, AZD</sub> |
+| Azure OpenAI keyless deployment | Example Azure OpenAI deployment and RBAC role for your user account for keyless access. |  [Repo](https://github.com/Azure-Samples/azure-openai-keyless-js) | <sub>Azure OpenAI, AZD, JavaScript</sub> |
+| Azure OpenAI secure UI starter | Reusable OpenAI secure UI and infrastructure for AI Chat with Azure. |  [Repo](https://github.com/Azure-Samples/openai-secure-ui-js) | <sub>Lit, Vite, Web Components, Azure OpenAI, Azure Blob Storage, Azure Functions, Azure Static Web Apps, AZD</sub> |
+| Azure OpenAI with LangChain.js | Demonstrates how to use Azure OpenAI with LangChain.js. |  [Repo](https://github.com/Azure-Samples/openai-langchainjs) | <sub>LangChain.js, Azure OpenAI, TypeScript</sub> |
+| Azure API Management with Azure Open AI | Demonstrates how to add Azure API Management on top of your Azure Open AI endpoints. |  [Repo](https://github.com/Azure-Samples/genai-gateway-apim) | <sub>Azure Open AI, Azure API Management, Express, Node.js, AZD</sub> |
+| Ask YouTube: LangChain.js + Azure Quickstart | Build a generative AI application using LangChain.js from local to Azure. |  [Repo](https://github.com/Azure-Samples/langchainjs-quickstart-demo) | <sub>LangChain.js, Azure OpenAI, Azure AI Search, Azure Functions</sub> |
+| Ollama JavaScript Playground | Generative AI playground using Ollama OpenAI API and JavaScript. Try AI models in your browser! |  [Repo](https://github.com/sinedied/ollama-javascript-playground/) | <sub>TypeScript, Ollama, Azure OpenAI, GitHub Codespaces</sub> |
+| Copilot / Node.js + OpenAI Todo app | Discover how to use GitHub Copilot to quickly build a Node.js application with OpenAI and Azure. |  [Repo](https://github.com/Azure-Samples/copilot-openai-todo) | <sub>Azure OpenAI, Azure App Service, Azure CosmosDB, Express, TypeScript, TypeChat, GitHub Actions</sub> |
+| ChatGPT + Enterprise data with Azure OpenAI and Azure AI Search | A TypeScript sample app for the Retrieval Augmented Generation pattern running on Azure. |  [Repo](https://github.com/Azure-Samples/azure-search-openai-javascript) | <sub>LangChain.js, Lit, Vite, Azure OpenAI, Azure Cosmos DB, Azure Blog Storage, Azure Container Apps, Azure Static Web Apps, Docker, AZD</sub> |
+| Azure OpenAI Chat Frontend | The Chat App Protocol compliant user-interface building block for your chat-gpt like RAG pattern applications built with Azure OpenAI and Azure AI Search. |  [Repo](https://github.com/Azure-Samples/azure-openai-chat-frontend) | <sub>Chat Protocol, Lit, Azure Static Web Apps, AZD</sub> |
+| Enterprise-grade Reference Architecture for JavaScript | Intelligent enterprise-grade reference architecture for JavaScript featuring OpenAI integration, Azure Developer CLI template, and Playwright tests. |  [Repo](https://github.com/Azure-Samples/contoso-real-estate) | <sub>Azure Container Apps, Azure Functions, Azure Cosmos DB, SWA, Fastify, Next.js, Angular, AZD</sub> |
+
+## Community
+
+**Join the Azure AI community on Discord: https://aka.ms/genai-discord**
+
+If you're looking to connect with others, we have a community of AI enthusiasts, developers, and experts who are passionate about AI and are always willing to help. 
+
+There's even a dedicated [#JavaScript channel](https://discordapp.com/channels/1113626258182504448/1237357005555892225) where you can ask questions, share your projects, and discuss your about your favorite topics.
+
+## More resources
+
+Here are some additional resources that you might find useful on your AI journey:
+
+- Generative AI for Beginners: https://github.com/microsoft/generative-ai-for-beginners
+- Phi-3 cookbook: https://aka.ms/phi3/cookbook
+- Try Azure Cosmos DB for free: https://aka.ms/trycosmosdb

genai-js-videos/demos/.env.example

@@ -0,0 +1,31 @@
+# Use these variables to run the demo with Ollama.
+# Make sure you have set up your local models correctly with:
+#
+#   ollama pull phi3
+#   ollama cp phi3 gpt-4o
+#
+# Then update the imports to use:
+#
+#   import { OpenAI } from "openai";
+#
+OPENAI_BASE_URL=http://localhost:11434/v1
+OPENAI_API_KEY=__dummy_for_ollama__
+
+# Or comment the previous variables and use these instead
+# if want to use Azure OpenAI.
+# Make sure you have deployed "gpt-4o" model and update the
+# imports to use:
+#
+#   import { AzureOpenAI as OpenAI } from "openai";
+#
+# AZURE_OPENAI_ENDPOINT=<your-endpoint>
+# AZURE_OPENAI_API_KEY=<your-api-key>
+# OPENAI_API_VERSION=2024-02-01
+
+# Or comment the previous variables and use this instead
+# if want to use an OpenAI API key.
+# Make sure to update the imports to use:
+#
+#   import { OpenAI } from "openai";
+#
+# OPENAI_API_KEY=<your-api-key>

genai-js-videos/demos/01-llms/readme.md

@@ -0,0 +1,19 @@
+# Demo - What you need to know about LLMs
+
+## Prerequisites
+- [Visual Studio Code](https://code.visualstudio.com/)
+- [GitHub Copilot extension for VS Code](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
+- [GitHub Copilot](https://github.com/features/copilot) enabled
+
+## Scenario
+
+### Demo 1
+
+1. Open an empty js file
+1. Write `// print hello to the console` and see completion
+2. Write `// prints hello to a DOM element with the id of 'root’` and see completion
+
+### Demo 2
+
+1. Open Copilot Chat window
+2. Prompt: `create function that prints hello to a DOM element with the id of 'root’` and show response

genai-js-videos/demos/02-prompt-engineering/demo-complete.ts

@@ -0,0 +1,39 @@
+import process from "node:process";
+import { AzureOpenAI as OpenAI } from "openai";
+
+const prompt = `
+## Available products
+| Product Name | Characteristics |
+|--------------|-----------------|
+| Contoso Trek | Waterproof hiking boots with advanced grip technology for all terrains. Features include breathable material and ankle support. |
+| Contoso Dash | Lightweight running shoes with responsive cushioning. Designed for speed and comfort, with a mesh upper for breathability. |
+| Contoso Glide | Slip-on casual shoes with a sleek design. Offers comfort for all-day wear with memory foam insoles and a flexible sole. |
+| Contoso Flex | Athletic shoes with a flexible sole designed for a wide range of sports. Features include enhanced durability and support for lateral movements. |
+| Contoso Chill | Cozy and stylish winter boots with thermal lining and waterproof exterior. Includes a slip-resistant sole for icy conditions. |
+
+## User details
+Name: John Doe
+
+Assistant helps the user with questions about products for the company "Contoso Shoes".
+Be brief, answer with 2 lines max. Be cheerful and mention user's name.
+
+## Question
+What shoes should I use for running?
+
+## Answer
+{
+  "text": "<answer>",
+  "product": "<product_name>"
+}
+`;
+
+const openai = new OpenAI();
+const chunks = await openai.chat.completions.create({
+  messages: [{ role: "user", content: prompt }],
+  model: "gpt-4o",
+  stream: true,
+});
+
+for await (const chunk of chunks) {
+  process.stdout.write(chunk.choices[0]?.delta.content ?? '');
+}

genai-js-videos/demos/02-prompt-engineering/demo.ts

@@ -0,0 +1,20 @@
+import process from "node:process";
+import { AzureOpenAI as OpenAI } from "openai";
+
+const prompt = `
+Assistant helps the user with questions.
+
+## Question
+What shoes should I use for running?
+`;
+
+const openai = new OpenAI();
+const chunks = await openai.chat.completions.create({
+  messages: [{ role: "user", content: prompt }],
+  model: "gpt-4o",
+  stream: true,
+});
+
+for await (const chunk of chunks) {
+  process.stdout.write(chunk.choices[0]?.delta.content ?? '');
+}