Quest 3 - I want to add a simple chat interface to my AI prototype

In this quest, you’ll give your Gen AI prototype a polished chat interface using Vite and Lit. Along the way, you’ll also manage application infrastructure with Bicep and Azure Developer CLI (azd), making your prototype more structured and ready for deployment.

This step is all about UX, making your AI prototype not just functional, but interactive and user-friendly.

👉 Want to catch up on the full program or grab more quests? https://aka.ms/JSAIBuildathon

💬 Got questions or want to hang with other builders? Join us on Discord — head to the #js-ai-build-a-thon channel.

🔧 What You’ll Build

By the end of this quest, you’ll have:

• A chat UI built with Vite and Lit 
• A structured codebase with infrastructure-as-code (IaC) using Bicep 
• Seamless local deployment workflow using the Azure Developer CLI (azd) 

This UI lets users chat with your prototype as if it were a real app.

AI Chat Interface

💡 Why This Quest Matters

• First impressions count – A sleek UI turns a console prototype into something playable by anyone. 
• Scaffolding for more – Once your UI is ready, you can plug in advanced features like RAG and memory. 
• Clean infrastructure – Using Bicep & azd ensures your app can scale and deploy cleanly later on.

🚀 What You’ll Need

1. ✅ A GitHub account
2. ✅ Visual Studio Code installed
3. ✅ Node.js installed
4. ✅An Azure subscription. Use the free trial if you don't have one, or Azure for Students if you are a student.
5. ✅ Azure Developer CLI installed

🛠️ Concepts You’ll Explore

⚡️Vite + Lit = Fast UIs with Modern web components

Vite

In this quest, you'll use Vite for lightning-fast dev builds and hot reloads, paired with Lit to build sleek, reactive web components. You'll integrate a custom <chat-ui> built with Lit to render messages and manage chat state—plug in a mock or real AI backend and you're good to go. Fast, modular, and extensible.

💻 Azure Developer CLI (azd)

<azd> ties your app’s frontend, backend, and infrastructure into one command-line flow. You’ll use it to instantly spin up a working app environment without writing the setup from scratch—just <azd up> and go!

🏗️ Infrastructure as Code with Bicep

Bicep lets you write your infra as code using simple, declarative templates. In this quest, you’ll use Bicep to provision services like Azure Static Web Apps and App Service, ensuring everything is scalable, consistent, and DevOps-ready.

📚 Bonus Resources

• Accelerate your journey to the cloud with azd
  A curated “Awesome azd” guide packed with start-to-end workflows and templates to fast-track your cloud app development using the Azure Developer CLI
• BRK118: Accelerate Azure Development with GitHub Copilot, VS Code & AI
  Watch this session to learn how GitHub Copilot, VS Code, and AI come together to enhance developer productivity on Azure 
• Introducing the Azure Developer CLI (azd): A faster way to build apps for the cloud
  A blog post announcing azd as a streamlined, developer-friendly tool to provision, deploy, and manage Azure apps quickly
• Azure Developer CLI (azd) on GitHub
• Azure Developer CLI (azd) documentation 

✅ Ready to build?

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

Grab your favorite code editor, explore the starter skeleton in the sample repo, and start crafting your chat UI — then go beyond it. 💡

This quest lays the foundation for everything that follows: RAG, memory, agents, and more. So don’t just build the basics — challenge yourself to enhance the UI, customize the experience, and experiment with GitHub Copilot in Agent Mode to co-create smarter, faster.

Let’s see what you can come up with — and don’t forget to share your progress in Discord!

⏮️ Revisit the previous quest (Quest 2)