generative-ai-with-javascript
generative-ai-with-javascript 是一门专为初学者设计的生成式 AI 互动教程，旨在帮助开发者轻松掌握如何将前沿的生成式 AI 技术融入 JavaScript 应用中。它解决了新手在面对复杂 AI 概念时难以入手、缺乏实战场景以及环境配置繁琐等痛点。
这门课程独具匠心地采用“时空穿越”的故事线，让用户在学习代码的同时，能与达·芬奇、阿达·洛夫莱斯等历史传奇人物进行由 AI 驱动的趣味对话。这种沉浸式体验将枯燥的技术学习转化为生动的冒险旅程，极大地提升了学习兴趣。
内容涵盖从基础概念到高级应用的完整路径，特别新增了关于模型上下文协议（MCP）的课程，指导用户构建和测试服务器，并结合大语言模型优化客户端。项目提供丰富的代码示例、练习、测验及配套视频，并支持通过 GitHub Codespaces 一键启动预配置的开发环境，无需本地繁琐设置即可利用 GitHub Models 免费运行代码。
无论是希望转型的 Web 开发者、计算机专业学生，还是对 AI 应用开发感兴趣的技术爱好者，都能从中获益。它不仅传授技术，更通过开源协作和社区支持，鼓励用户自由复用、修改并分享所学内容，是开启 JavaScript 生成式 AI 开发之旅的理想起点。
使用场景
某前端开发团队计划为博物馆开发一款互动教育网页，让用户能通过对话“穿越”时空与达芬奇等历史人物交流，但团队缺乏生成式 AI 的实战经验。
没有 generative-ai-with-javascript 时
- 开发者需从零摸索如何调用大模型 API，面对复杂的鉴权、流式响应处理束手无策，开发周期被迫拉长。
- 难以设计符合历史人设的提示词（Prompt），导致 AI 回答生硬或出现时代错乱，破坏沉浸式体验。
- 缺乏现成的 JavaScript 示例代码，团队在本地环境配置和模型调试上耗费大量时间，甚至因配置错误而放弃。
- 不知道如何将 AI 能力安全、合规地集成到现有应用中，担心产生不可控的有害输出。
- 学习资源分散且理论化严重，缺乏结合具体业务场景（如角色对话）的实操指导，新手上手门槛极高。
使用 generative-ai-with-javascript 后
- 直接复用课程中完整的 JavaScript 代码示例和 GitHub Codespaces 预配环境，几分钟内即可跑通首个 AI 对话功能。
- 借鉴“时间旅行”故事线中的提示词工程技巧，轻松让 AI 扮演出性格鲜明的历史人物，对话自然且富有教育意义。
- 跟随分步教程快速掌握 MCP（模型上下文协议）等进阶技术，高效构建并测试支持复杂交互的本地服务器。
- 利用内置的负责任 AI 指南和最佳实践，有效过滤不当内容，确保应用输出的安全性与准确性。
- 通过“漫画书式”的图文视频结合教程，团队成员在趣味故事中快速掌握核心技术，立即将所学应用于项目迭代。
generative-ai-with-javascript 将枯燥的 AI 技术学习转化为一场生动的历史冒险，帮助开发者零门槛构建高质量的生成式 AI 应用。
运行环境要求
- Linux
- macOS
- Windows
非必需（主要基于云端 API 或 GitHub Models，本地运行可选 Ollama）
未说明
快速开始
准备好将生成式 AI 集成到你的 JavaScript 应用中了吗？
本课程将带你踏上一场穿越时空的冒险——以有趣的方式与历史上的传奇人物相遇，同时学习生成式 AI 技术 ✨
[!IMPORTANT]
开源精神！你可以自由地重用、修改和分享这些内容。
新增 - MCP 课程已加入
- 学习如何构建并测试你的第一个服务器
- 通过集成 LLM来改进你的 MCP 客户端
求助 - 帮我们翻译！
请帮助我们翻译本课程。lessons/ 文件夹中的每节课都有一个 translations/ 目录。你可以按照 README.<语言代码>.md 的格式添加你的翻译文件，例如 README.es.md。非常感谢！
走进历史，体验 AI 魔法！
沉浸式学习体验，由生成式 AI 提供支持：
了解生成式 AI 技术。如果你一直想了解生成式 AI 及其在你应用中的潜力，那么这里正是你该来的地方！
史诗般的时空穿越故事。 每节课都会带你进入一段有趣的冒险故事，与列奥纳多·达·芬奇、艾达·洛夫莱斯或蒙特祖玛等历史名人对话。
配套应用。使用生成式 AI 技术与历史人物互动（请参阅我们的负责任 AI 免责声明)。
请查看 app 目录，以在本地运行该应用（参见文档）或使用 GitHub Codespaces 在线上运行。
无障碍访问，超强体验。你可以阅读，也可以收听——音频标签让内容栩栩如生。
“这就像是带代码的漫画书！” —— 快乐用户
开始使用
在整个课程中，你会遇到许多代码示例和练习，因此我们鼓励你在自己的仓库副本中运行并尝试这些代码：
点击仓库右上角的 Fork 按钮，或者直接点击此按钮：
在你的分支仓库中点击 Code 按钮，进入 Codespaces 选项卡，然后选择 Create codespace。
这将为你创建一个预先配置好的在线环境。随后，你可以使用 GitHub Models 来免费运行代码示例并与 AI 模型互动，无需任何额外设置。
[!NOTE]
虽然 GitHub Codespaces 提供了一个快速简便的起点，你也可以在本地运行这些代码示例（参见文档)。
课程简介
📦 每节课包括：
- 一篇带有作业和测验的书面课程。
- 一段简短的视频，帮助你进一步学习。
- 每份作业和测验的答案。
- 你可以使用我们的配套应用与之互动的角色，展示生成式 AI 的应用。
课程
🗃️ 目录
| # | 课程链接 | 描述 |
|---|---|---|
| 1 | 面向 JavaScript 开发者的生成式 AI 和 LLM 入门 | 理解生成式 AI 和 LLM 的基础知识、它们在 JavaScript 中的应用及局限性，以及如何利用 AI 改善用户体验。 |
| 2 | 构建你的第一个 AI 应用 | 设置开发环境，编写一个基础应用，并理解系统提示词。 |
| 3 | 提示工程 | 学习提示工程的基础知识、技巧以及元提示，以获得更好的 AI 结果。 |
| 4 | 结构化输出 | 学习结构化输出，如何从提示中提取数据，并以 JSON 等多种格式呈现，以便于使用。 |
| 5 | 检索增强生成 (RAG) | 学习 RAG 的基础知识，如何整合外部数据，以及如何利用它来生成更相关、更准确的 AI 回答。 |
| 6 | 工具调用/函数调用 | 学习如何为你的 LLM 增加额外功能，引入你自己的函数 |
| 7 | MCP，模型上下文协议 | 教你如何开始使用 MCP 来标准化暴露提示、资源和工具的方式 |
| 8 | 使用大型语言模型增强 MCP 客户端 | 学习如何通过 LLM 等方式改进你的 MCP 客户端 |
未来还会不断新增课程，敬请期待！
继续学习
🙌 完成本课程后，您可以通过探索我们的其他资源继续学习。
🎬视频系列
| # | 会话 | 描述 | 幻灯片 | 演示 | 文本稿 | 视频 |
|---|---|---|---|---|---|---|
| 0 | 系列介绍 | 介绍本系列及其内容。 | pptx / pdf | - | 文本稿 | 📺 |
| 1 | 关于LLM你需要知道什么 | 探讨LLM是什么、如何训练、工作原理及其局限性。 | pptx / pdf | 演示 | 文本稿 | 📺 |
| 2 | 必备的提示工程技巧 | 实用的提示工程技巧，帮助你充分发挥AI模型的能力。 | pptx / pdf | 演示 | 文本稿 | 📺 |
| 3 | 使用RAG提升AI的准确性和可靠性 | 介绍检索增强生成技术，以便结合自有数据使用AI。 | pptx / pdf | 演示 | 文本稿 | 📺 |
| 4 | 使用LangChain.js加速你的AI开发 | 讲解LangChain.js框架的核心概念，以及如何利用它来加速AI开发。 | pptx / pdf | 演示 | 文本稿 | 📺 |
| 5 | 使用Ollama在本地运行AI模型 | 展示如何将本地AI模型集成到你的开发流程中。 | pptx / pdf | 演示 | 文本稿 | 📺 |
| 6 | 使用Phi-3免费入门AI | 直接在浏览器中通过Ollama和Phi-3模型进行实验。 | pptx / pdf | 演示 | 文本稿 | 📺 |
| 7 | Azure AI Foundry简介 | 带你开启Azure AI Foundry之旅。 | pptx / pdf | 演示 | 文本稿 | 📺 |
| 8 | 使用Azure Cosmos DB构建生成式AI应用 | 利用Azure Cosmos DB和向量搜索构建生成式AI应用。 | pptx / pdf | 演示 | 文本稿 | 📺 |
| 9 | 用于托管和存储AI应用的Azure工具与服务 | 使用Azure工具构建、部署和扩展AI应用程序。 | pptx / pdf | - | 文本稿 | 📺 |
| 10 | 使用AI聊天协议流式传输生成式AI输出 | 通过AI聊天协议轻松地将流式传输集成到你的应用中。 | pptx / pdf | 演示 | 文本稿 | 📺 |
如需查看完整的资源页面，请访问此视频概览页。
你还可以找到更多资源，包括教程、代码示例等。
负责任的AI免责声明
[!重要] 免责声明：本仓库包含由AI生成的虚构内容。此处描绘的历史人物之所以能够作出回应，得益于基于训练数据的生成式AI技术。这些人物所生成的任何回应均不代表其真实观点或引言。本内容仅用于娱乐目的。微软负责任的AI原则请见此处
🎒其他课程
- 面向初学者的生成式AI
- 面向初学者的.NET生成式AI
- 使用JavaScript的生成式AI
- 使用Java的生成式AI
- 面向初学者的AI
- 面向初学者的AI智能体课程
- 面向初学者的数据科学
- 面向初学者的机器学习
- 面向初学者的网络安全
- 面向初学者的Web开发
- 面向初学者的物联网
- 面向初学者的XR开发
- 掌握GitHub Copilot进行结对编程
- 掌握GitHub Copilot用于C#/.NET开发者
- 选择属于你的Copilot冒险
获取帮助
如果您在构建 AI 应用时遇到困难或有任何疑问，请加入：
如果您在构建过程中遇到产品反馈或错误，请访问：
常见问题
相似工具推荐
stable-diffusion-webui
stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。
everything-claude-code
everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上
ComfyUI
ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。
NextChat
NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。 这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。 NextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。
ML-For-Beginners
ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。 无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。
ragflow
RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。 在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。 这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。