Quest 1 – I Want to Build a Local Gen AI Prototype

Part of the JS AI Build-a-thon, this quest is where the rubber meets the road.

Whether you're here to explore the raw power of local models or just curious what Generative AI looks like under the hood, this guide is for you.

👉 Want to catch up on the full program or grab more quests? Start here
💬 Got questions or just want to hang with other builders? Join us on Discord — head to the #js-ai-build-a-thon channel.

🧩 What You’ll Build in This Quest

In this quest, you’ll build a fully working local Gen AI prototype — no cloud APIs, no credits needed. You’ll explore the GitHub Models catalog, run local inference using an open model, and convert a hand-drawn UI sketch into a working webpage. Along the way, you’ll get hands-on with AI developer tooling built right into Visual Studio Code.

Why this quest matters:

• You’ll see what’s possible without relying on cloud infra
• You’ll gain confidence working directly with open-source Gen AI models
• You’ll build the foundation for real-world experimentation — fast, cheap, and local

🔧 What You’ll Need to Complete the Quest

Before you jump in, here’s your setup checklist:

• ✅ A GitHub account
• ✅ Visual Studio Code installed
• ✅ Node.js installed
• ✅ The AI Toolkit extension for Visual Studio Code (installation instructions provided in the quest)

That’s it. You’ll be building before your coffee gets cold.

💡 Concepts You’ll Explore (And Why They Matter)

🧠 GitHub Models – Your AI Toolbox

GitHub now includes a built-in model explorer — your personal AI model marketplace. Explore hundreds of public and private models, each with rich metadata:

• Architecture
• Publisher
• Training data
• Use cases
• Evaluation metrics
• Licensing and transparency notes

You can even test prompts in-browser before you ever write code. Think of it as an interactive AI playground for developers.

Screenshot of models hosted on GitHub Models

🧪 Model Playground – No Guesswork, Just Experimentation

Models aren't black boxes anymore. Use the Model Playground to test out responses, tweak parameters like temperature and max tokens, and see what each model is good (or bad) at. Get immediate feedback, iterate quickly, and learn the nuances of Gen AI behavior.

Screenshot of the model playground with Phi-4-mini-reasoning

⚙️ Use Models in Code – Bring AI into Your App

Found a model you like? One click and it’s in your VS Code environment. No config nightmares. Use it directly in your JavaScript app. You’ll use one such model in this quest to turn a simple sketch into a real UI. The build is snappy, fun, and surprisingly powerful.

Preview of the contoso outdoor company website design

✍🏽 GitHub Copilot – Your Pair Programmer

While you're experimenting with models, don’t forget your sidekick. Copilot can help refactor your code, generate test cases, or even give you prompt suggestions for your AI workflows. It’s not just autocomplete — it’s context-aware magic.

Screenshot of working with GitHub Copilot

🧰 AI Toolkit Extension – Your New Secret Weapon

This all-in-one extension turns VS Code into a full-blown AI IDE. Browse models, create and test prompts, fine-tune models, and integrate them right into your apps — all from your editor. You’ll wonder how you ever shipped code without it.

Screenshot of the AI Toolkit extension in VS Code

📚 Bonus Resources to Keep the Momentum Going

Here’s a curated list of follow-up reads and lessons to deepen your knowledge after this quest. Each one is designed to build your skills and spark new ideas:

• About GitHub Models
  Get the lowdown on what GitHub Models are, why they matter, and how they fit into your workflow.
• Choosing the Right AI Model for Your Task
  A practical guide to selecting models based on task type, data needs, latency, and more.
• Introducing GitHub Models: A New Generation of AI Engineers Building on GitHub
  Explore how developers around the world are using GitHub Models to build, experiment, and ship faster.
• 📹 DEM500: Prototype, Build, and Deploy AI Apps Quickly with GitHub Models
  Watch this demo session from Microsoft Build to see GitHub Models in action—from prototype to production-ready app.
• What is the AI Toolkit for Visual Studio Code?
  Understand how this VS Code extension supercharges your AI dev experience — from model selection to prompt testing and integration.
• Lesson 1: Introduction to Generative AI and LLMs for JavaScript Developers
  Breaks down Gen AI concepts in JavaScript-first language. Great for beginners and tinkerers alike (Slides)
• Lesson 2: Writing Your First AI App
  A guided walkthrough to go from idea to functional Gen AI app with JavaScript. (Slides)
• Lesson 3: Prompt Engineering
  Learn how to craft killer prompts that get consistent, useful, and accurate results from any LLM. (Slides)
• Install the Microsoft AI Tools Extension Pack
  A set of must-have VS Code extensions for Gen AI workflows.

This quest is where your AI development journey truly begins. Just you, your code editor, and an open-source model ready to turn your ideas into something real. So jump in, build locally, and discover just how far JavaScript and AI can take you.

👉 Join the JS AI Build-a-thon
💬 Connect with the community on Discord

⏭️ Check out the next quest (Quest 2)