generative-ai-with-javascript
Code samples and resources to learn Generative AI with JavaScript
MIT License
Generative AI with JavaScript
⭐ If you like this repo, star it on GitHub — it helps a lot!
Overview • Quickstart • Video series • Tutorials • Code samples • Community • More resources
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! ✨
[!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: Contains the description, abstracts, resources links and scripts for each session.
- Slides: Contains the slides for each session.
- Demos: Contains the demos associated with each session.
- Tutorials: Contains hands-on tutorials that you can follow to learn more about AI and JavaScript.
- Code samples: Contains code samples that you can use as a starting point for your own projects.
- 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 (Needs a free GitHub account)
- Get started with GitHub Models, directly in your browser (Needs a free GitHub account and to sign up for the public beta access)
- Get started with Azure OpenAI (Needs a free Azure account)
Video series
| # | Session | Description | Slides | Demo | Script | Video |
|---|---|---|---|---|---|---|
| 0 | Series introduction | Introduces the series and its content. | pptx / pdf | - | Script | 📺 |
| 1 | What you need to know about LLMs | Explores what are LLMs, how they're trained, how they work and their limits. | pptx / pdf | Demo | Script | 📺 |
| 2 | Essential prompt engineering techniques | Practical prompt engineering techniques to get the best out of AI models. | pptx / pdf | Demo | Script | 📺 |
| 3 | Improve AI accuracy and reliability with RAG | Introduces Retrieval-Augmented Generation, to use AI with your own data. | pptx / pdf | Demo | Script | 📺 |
| 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 / pdf | Demo | Script | 📺 |
| 5 | Run AI models on your local machine with Ollama | Shows how to integrate local AI models into your development workflow. | pptx / pdf | Demo | Script | 📺 |
| 6 | Get started with AI for free using Phi-3 | Experiments with Ollama and Phi-3 model directly from your browser. | pptx / pdf | Demo | Script | 📺 |
| 7 | Introduction to Azure AI Studio | Kickstart your journey with Azure AI Studio. | pptx / pdf | Demo | Script | 📺 |
| 8 | Building Generative AI Apps with Azure Cosmos DB | Build generative AI apps with Azure Cosmos DB and vector search. | pptx / pdf | Demo | Script | 📺 |
| 9 | Azure tools & services for hosting and storing AI apps | Build, deploy, and scale AI applications using Azure tools. | pptx / pdf | - | Script | 📺 |
| 10 | Streaming Generative AI output with the AI Chat Protocol | Integrate streaming easily into your apps with the AI Chat Protocol. | pptx / pdf | Demo | Script | 📺 |
New segments will be added to the series over time, so stay tuned!
Run the demos
Demos are located in the demo/ 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 / Repo |
| 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 / Repo |
| 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 / Repo |
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 | LangChain.js, Lit, Vite, Azure OpenAI, Azure Cosmos DB, Azure Blob Storage, Azure Functions, Azure Static Web Apps, AZD |
| Serverless Azure OpenAI Quick Start with LlamaIndex | This sample shows how to quickly get started with LlamaIndex.ai on Azure | Repo | LlamaIndex.ts, Next.js, Azure OpenAI, Azure Container Apps, Docker, AZD |
| 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 | HTML-CSS-JavaScript, Azure Static Web Apps, Azure Blob Storage, Azure Functions, Azure OpenAI, AZD |
| 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 | Azure OpenAI, LlamaIndex, Azure Container Apps, Next.js, GitHub Actions, TypeScript, AZD |
| Azure OpenAI keyless deployment | Example Azure OpenAI deployment and RBAC role for your user account for keyless access. | Repo | Azure OpenAI, AZD, JavaScript |
| Azure OpenAI secure UI starter | Reusable OpenAI secure UI and infrastructure for AI Chat with Azure. | Repo | Lit, Vite, Web Components, Azure OpenAI, Azure Blob Storage, Azure Functions, Azure Static Web Apps, AZD |
| Azure OpenAI with LangChain.js | Demonstrates how to use Azure OpenAI with LangChain.js. | Repo | LangChain.js, Azure OpenAI, TypeScript |
| Azure API Management with Azure Open AI | Demonstrates how to add Azure API Management on top of your Azure Open AI endpoints. | Repo | Azure Open AI, Azure API Management, Express, Node.js, AZD |
| Ask YouTube: LangChain.js + Azure Quickstart | Build a generative AI application using LangChain.js from local to Azure. | Repo | LangChain.js, Azure OpenAI, Azure AI Search, Azure Functions |
| Ollama JavaScript Playground | Generative AI playground using Ollama OpenAI API and JavaScript. Try AI models in your browser! | Repo | TypeScript, Ollama, Azure OpenAI, GitHub Codespaces |
| Copilot / Node.js + OpenAI Todo app | Discover how to use GitHub Copilot to quickly build a Node.js application with OpenAI and Azure. | Repo | Azure OpenAI, Azure App Service, Azure CosmosDB, Express, TypeScript, TypeChat, GitHub Actions |
| ChatGPT + Enterprise data with Azure OpenAI and Azure AI Search | A TypeScript sample app for the Retrieval Augmented Generation pattern running on Azure. | Repo | LangChain.js, Lit, Vite, Azure OpenAI, Azure Cosmos DB, Azure Blog Storage, Azure Container Apps, Azure Static Web Apps, Docker, AZD |
| 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 | Chat Protocol, Lit, Azure Static Web Apps, AZD |
| Enterprise-grade Reference Architecture for JavaScript | Intelligent enterprise-grade reference architecture for JavaScript featuring OpenAI integration, Azure Developer CLI template, and Playwright tests. | Repo | Azure Container Apps, Azure Functions, Azure Cosmos DB, SWA, Fastify, Next.js, Angular, AZD |
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 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
