microsoft/generative-ai-with-javascript

Join a time-traveling adventure where you meet history’s legends while learning Generative AI technologies! ✨

Overview

Generative AI with JavaScript is an interactive, beginner‑friendly course that teaches developers how to build AI‑powered web applications using JavaScript and Microsoft’s Generative AI services (Foundry). The repo bundles lesson content, code samples, quizzes, and a companion chat app that lets you converse with historically‑inspired characters powered by large language models.

Who it’s for

  • JavaScript developers who are new to large language models (LLMs) and want hands‑on experience.
  • Learners who prefer a story‑driven approach – each lesson is framed as a “time‑travel” dialogue with figures like Leonardo da Vinci or Ada Lovelace.
  • Anyone looking for a ready‑to‑run example that can be tried locally or in GitHub Codespaces.

What you’ll get

Item Description
Lesson modules 8 structured lessons covering fundamentals (what is generative AI, prompt engineering), practical techniques (structured output, RAG, tool/function calling), and the Model Context Protocol (MCP). Each lesson includes a written guide, assignment, quiz, and solution code.
Companion app A Node.js web app (/app) that lets you chat with the historical characters using the LLM you deploy on Microsoft Foundry. Audio tags add accessibility.
Code samples Small, self‑contained npm packages for each lesson, each with its own dependencies.
Setup guides Step‑by‑step instructions for using GitHub Codespaces or a local dev environment, creating a Foundry project, deploying a chat model, and configuring .env with your endpoint and API key.
Additional resources Links to related beginner courses (Azure, Edge AI, MCP, AI agents) and broader AI/ML learning paths.

How it works

  1. Create a Foundry model – the setup guide walks you through provisioning a chat model on Microsoft Foundry and obtaining an endpoint/API key.
  2. Configure the repo – store the endpoint and key in a .env file at the repository root.
  3. Run the companion app – npm install && npm start (or use the provided Codespaces configuration) launches a local web UI where you can type questions to the historical characters. The app sends the prompt to your Foundry model, receives the LLM response, and displays it.
  4. Progress through lessons – each lesson builds on the previous one, introducing concepts such as:
    • Prompt engineering – crafting system prompts and meta‑prompts.
    • Structured output – asking the model to return JSON for easier downstream processing.
    • Retrieval‑augmented generation (RAG) – hooking external data sources into the prompt.
    • Tool/function calling – exposing custom JavaScript functions that the model can invoke.
    • Model Context Protocol (MCP) – a standard for describing prompts, resources, and tools, enabling reusable AI components.
  5. Experiment – the repo encourages forking, modifying, and extending the code, with PRs welcomed.

Why it matters

  • Low barrier to entry – all examples run with Node.js LTS; no heavy GPU setup is required.
  • Hands‑on learning – you see immediate results in the chat UI, reinforcing abstract concepts.
  • Microsoft ecosystem integration – teaches the workflow for Azure/Foundry services, which many enterprises already use.
  • Responsible AI awareness – the README includes a disclaimer and links to Microsoft’s Responsible AI principles, modeling good practice for beginners.

Getting started tips

  • Use the GitHub Codespaces button for a zero‑setup environment; it pre‑installs Node, pulls the repo, and opens the tutorial.
  • Keep your .env file out of version control; the repo’s .gitignore already protects it.
  • Start with Lesson 1 to understand the overall architecture before diving into MCP or tool‑calling lessons.
  • Explore the additional resources section for deeper dives into Azure AI, Edge AI, and AI agents once you finish the core curriculum.

All information above is taken directly from the repository’s README; no external assumptions have been added.

Related

  • Project
    marcelo-earth/generative-manim

    Generative Manim is an open‑source tool that uses LLMs (GPT‑4o, Claude, Gemini, etc.) to turn plain‑English prompts into runnable Manim animation code and rendered videos. It provides a web demo, a REST API, and a desktop app (Animo) for local rendering, plus a training pipeline and benchmark suite for fine‑tuning open‑weight models to generate Manim code.

  • Project
    ThomasVitale/llm-apps-java-spring-ai

    A collection of sample Java applications and patterns demonstrating how to build Generative AI and LLM-powered apps using the Spring AI framework.

  • Project
    nndl/llm-beginner

    A comprehensive, hands-on tutorial series for beginners to learn LLMs and AI agents through six progressive implementation tasks, from building a mini-GPT to creating a coding agent.

  • Project
    AkshitIreddy/AI-Powered-Video-Tutorial-Generator

    AI‑Powered Video Tutorial Generator is a Windows‑only desktop app that turns a question or topic into a fully editable video lesson. It handles research, script writing, storyboard creation, narration, illustration, presenter animation and final export, using either local diffusion models (ComfyUI/SDXL) or cloud LLM/image providers. The open‑source stack combines a React/Tauri UI, a Rust core, and a Python pipeline, and it ships with bundled runtimes (Python, Node, Chromium, FFmpeg).

  • Project
    devenjarvis/lathe

    A tool that uses LLMs to generate personalized, hands-on technical tutorials and provides a local UI for working through them manually to ensure the user actually learns the material.