# microsoft/generative-ai-with-javascript architecture

> Architecture diagram of the GitHub repository microsoft/generative-ai-with-javascript, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/microsoft/generative-ai-with-javascript
- Repository: https://github.com/microsoft/generative-ai-with-javascript

## Overview

This repository is a JavaScript generative-AI learning course, with lessons and runnable examples as its main product and a character-chat companion app as an interactive demonstration. The graph captures the documented lesson progression and major learning resources; app links are based on sampled source, while unsampled lesson implementations are represented only by their tree-supported directories.

Main entry points: [`app/public/js/script.js`](https://github.com/microsoft/generative-ai-with-javascript/blob/main/app/public/js/script.js) (Chat Interface), [`app/app.js`](https://github.com/microsoft/generative-ai-with-javascript/blob/main/app/app.js) (Chat Server), [`lessons/01-intro-to-genai`](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/01-intro-to-genai) (GenAI Basics), [`lessons/02-first-ai-app`](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/02-first-ai-app) (First AI App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_course["Course Lessons"]
  node_lesson1["GenAI Basics"]
  node_lesson2["First AI App"]
  node_lesson7["MCP Basics"]
  node_lesson8["Advanced MCP"]
end

subgraph group_examples["AI Techniques"]
  node_lesson3["Prompt Engineering"]
  node_lesson4["Structured Output"]
  node_lesson5["RAG"]
  node_lesson6["Tool Calling"]
  node_examples["Runnable Samples"]
end

subgraph group_companion["Companion App"]
  node_app_ui["Chat Interface<br/>[script.js]"]
  node_app_server["Chat Server<br/>[app.js]"]
  node_characters["Character Profiles<br/>[characters.json]"]
end

subgraph group_resources["Video Resources"]
  node_videos["Video Series"]
  node_demos["Video Demos"]
end

node_learner(("Learner"))
node_companion_user(("App Visitor"))
node_ai_service{{"Chat Model API"}}
node_speech{{"Browser Speech"}}

node_learner -->|"starts course"| node_lesson1
node_lesson1 -->|"continues to"| node_lesson2
node_lesson2 -->|"continues to"| node_lesson3
node_lesson3 -->|"continues to"| node_lesson4
node_lesson4 -->|"continues to"| node_lesson5
node_lesson5 -->|"continues to"| node_lesson6
node_lesson6 -->|"continues to"| node_lesson7
node_lesson7 -->|"continues to"| node_lesson8
node_learner -->|"runs samples"| node_examples
node_learner -->|"watches"| node_videos
node_videos -->|"offers demos"| node_demos
node_companion_user -->|"chats with"| node_app_ui
node_app_ui -->|"posts message"| node_app_server
node_app_server -->|"reads profiles"| node_characters
node_app_server -->|"requests completion"| node_ai_service
node_app_ui -.->|"speaks answer"| node_speech

click node_lesson1 "https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/01-intro-to-genai"
click node_lesson2 "https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/02-first-ai-app"
click node_lesson3 "https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/03-prompt-engineering"
click node_lesson4 "https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/04-structured-output"
click node_lesson5 "https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/05-rag"
click node_lesson6 "https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/06-tool-calling"
click node_lesson7 "https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/07-mcp"
click node_lesson8 "https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/08-mcp-advanced"
click node_examples "https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons"
click node_app_ui "https://github.com/microsoft/generative-ai-with-javascript/blob/main/app/public/js/script.js"
click node_app_server "https://github.com/microsoft/generative-ai-with-javascript/blob/main/app/app.js"
click node_characters "https://github.com/microsoft/generative-ai-with-javascript/blob/main/app/public/characters.json"
click node_videos "https://github.com/microsoft/generative-ai-with-javascript/tree/main/videos"
click node_demos "https://github.com/microsoft/generative-ai-with-javascript/tree/main/videos/demos"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_lesson1,node_lesson2,node_lesson7,node_lesson8,node_speech toneBlue
class node_lesson3,node_lesson4,node_lesson5,node_lesson6,node_examples toneAmber
class node_app_ui,node_app_server,node_characters,node_ai_service toneMint
class node_videos,node_demos toneRose
class node_learner,node_companion_user toneIndigo
```

## Components

### Course Lessons

- [GenAI Basics](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/01-intro-to-genai): `lessons/01-intro-to-genai`
- [First AI App](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/02-first-ai-app): `lessons/02-first-ai-app`
- [MCP Basics](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/07-mcp): `lessons/07-mcp`
- [Advanced MCP](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/08-mcp-advanced): `lessons/08-mcp-advanced`

### AI Techniques

- [Prompt Engineering](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/03-prompt-engineering): `lessons/03-prompt-engineering`
- [Structured Output](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/04-structured-output): `lessons/04-structured-output`
- [RAG](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/05-rag): `lessons/05-rag`
- [Tool Calling](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons/06-tool-calling): `lessons/06-tool-calling`
- [Runnable Samples](https://github.com/microsoft/generative-ai-with-javascript/tree/main/lessons): `lessons`

### Companion App

- [Chat Interface](https://github.com/microsoft/generative-ai-with-javascript/blob/main/app/public/js/script.js): `app/public/js/script.js`
- [Chat Server](https://github.com/microsoft/generative-ai-with-javascript/blob/main/app/app.js): `app/app.js`
- [Character Profiles](https://github.com/microsoft/generative-ai-with-javascript/blob/main/app/public/characters.json): `app/public/characters.json`

### Video Resources

- [Video Series](https://github.com/microsoft/generative-ai-with-javascript/tree/main/videos): `videos`
- [Video Demos](https://github.com/microsoft/generative-ai-with-javascript/tree/main/videos/demos): `videos/demos`

### Other components

- **Learner**
- **App Visitor**
- **Chat Model API**
- **Browser Speech**

## Connections

- Learner → GenAI Basics: starts course
- GenAI Basics → First AI App: continues to
- First AI App → Prompt Engineering: continues to
- Prompt Engineering → Structured Output: continues to
- Structured Output → RAG: continues to
- RAG → Tool Calling: continues to
- Tool Calling → MCP Basics: continues to
- MCP Basics → Advanced MCP: continues to
- Learner → Runnable Samples: runs samples
- Learner → Video Series: watches
- Video Series → Video Demos: offers demos
- App Visitor → Chat Interface: chats with
- Chat Interface → Chat Server: posts message
- Chat Server → Character Profiles: reads profiles
- Chat Server → Chat Model API: requests completion
- Chat Interface → Browser Speech: speaks answer