microsoft/generative-ai-with-javascript

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

개요

JavaScript로 생성형 AI는 JavaScript와 마이크로소프트의 생성형 AI 서비스(Foundry)를 사용하여 AI 기반 웹 애플리케이션을 개발하는 방법을 인터랙티브하고 초보자 친화적으로 가르쳐주는 과정입니다. 리포지토리는 각 수업의 콘텐츠, 코드 샘플, 퀴즈, 그리고 대규모 언어 모델(Large Language Models)로 구동되는 역사적 인물들과 대화할 수 있는 보조 챗 앱을 포함하고 있습니다.

대상자

  • 대규모 언어 모델(LLMs)에 처음 접하는 JavaScript 개발자로, 실습 경험을 원하는 분들.
  • 스토리 중심 학습 방식을 선호하는 분들 — 각 수업은 레오나르도 다 빈치나 아다 러브레스 같은 인물들과의 '시간여행' 대화 형식으로 구성되어 있습니다.
  • 로컬 또는 GitHub Codespaces에서 바로 실행 가능한 예제를 찾는 분들.

제공되는 내용

항목 설명
수업 모듈 기초(생성형 AI란 무엇인가, 프롬프트 엔지니어링), 실용 기술(구조화된 출력, RAG, 도구/함수 호출), Model Context Protocol(MCP)를 다루는 8개의 구조화된 수업. 각 수업에는 설명서, 과제, 퀴즈, 솔루션 코드가 포함됩니다.
보조 앱 Node.js 웹 앱(/app)으로, Microsoft Foundry에 배포한 LLM을 사용해 역사적 인물들과 대화할 수 있습니다. 오디오 태그를 통해 접근성도 고려되었습니다.
코드 샘플 각 수업마다 독립된 npm 패키지로, 각각 고유한 종속성과 함께 제공됩니다.
설치 가이드 GitHub Codespaces 또는 로컬 개발 환경 사용 방법, Foundry 프로젝트 생성, 챗 모델 배포, .env 파일에 엔드포인트와 API 키 설정에 대한 단계별 안내.
추가 자료 관련 초보자 과정(Azure, Edge AI, MCP, AI 에이전트) 및 AI/ML 학습 경로에 대한 링크.

작동 방식

  1. Foundry 모델 생성 — 설치 가이드에 따라 Microsoft Foundry에서 챗 모델을 프로비저닝하고 엔드포인트/API 키를 획득합니다.
  2. 리포지토리 구성 — 리포지토리 루트에 있는 .env 파일에 엔드포인트와 키를 저장합니다.
  3. 보조 앱 실행 — npm install && npm start (또는 제공된 Codespaces 설정 사용)로 로컬 웹 UI가 시작되며, 역사적 인물들에게 질문을 입력할 수 있습니다. 앱은 프롬프트를 당신의 Foundry 모델로 전송하고, LLM의 응답을 받아 화면에 표시합니다.
  4. 수업 진행 — 각 수업은 이전 수업을 기반으로 하며, 다음과 같은 개념을 소개합니다:
    • 프롬프트 엔지니어링 — 시스템 프롬프트와 메타 프롬프트 작성.
    • 구조화된 출력 — JSON 형식으로 출력을 요청하여 후속 처리를 용이하게 함.
    • 검색 기반 생성(RAG) — 외부 데이터 소스를 프롬프트에 연결.
    • 도구/함수 호출 — 모델이 호출할 수 있는 사용자 정의 JavaScript 함수 노출.
    • Model Context Protocol(MCP) — 프롬프트, 리소스, 도구를 설명하는 표준으로, 재사용 가능한 AI 컴포넌트를 가능하게 함.
  5. 실험 — 리포지토리는 코드를 포크하고 수정, 확장하는 것을 장려하며, PR도 환영합니다.

왜 중요한가

  • 낮은 진입 장벽 — 모든 예제는 Node.js LTS에서 실행되며, 고성능 GPU 설정이 필요하지 않습니다.
  • 실습 중심 학습 — 챗 UI에서 즉각적인 결과를 확인할 수 있어 추상적 개념을 강화합니다.
  • 마이크로소프트 생태계 통합 — Azure/Foundry 서비스의 워크플로우를 배우며, 많은 기업에서 이미 사용하는 기술을 익힐 수 있습니다.
  • 책임 있는 AI 인식 — README에 면책 조항과 마이크로소프트의 책임 있는 AI 원칙 링크가 포함되어 있어, 초보자에게 좋은 실천 예를 보여줍니다.

시작 팁

  • GitHub Codespaces 버튼을 사용하면 세팅 없이 바로 사용 가능한 환경을 제공합니다. Node.js가 사전 설치되어 있으며, 리포지토리가 다운로드되고 튜토리얼이 열립니다.
  • .env 파일은 버전 관리에서 제외하세요. 리포지토리의 .gitignore는 이미 이를 보호하고 있습니다.
  • MCP나 도구 호출 수업에 들어가기 전에 Lesson 1부터 시작하여 전체 아키텍처를 이해하세요.
  • 핵심 커리큘럼을 마친 후에는 추가 자료 섹션에서 Azure AI, Edge AI, AI 에이전트에 대해 더 깊이 탐구해보세요.

위 정보는 리포지토리의 README에서 직접 가져온 것이며, 외부 가정은 전혀 추가되지 않았습니다.

관련

  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트