Firebase Studio: A Gentle Journey from p5WebEditor to Vibe Coding

One of things that LLMs are best at is helping you write code or, in modern vernacular, “vibe coding.” We love teaching introductory coding classes with P5WebEditor because of the simplicity of the “environment” (aka text editor). But many students soon find themselves wanting more powerful environments like Visual Studio Code (VSC). Because VSC is an open source (thank you Microsoft) it is often “forked” which has made its interface a sort of standard and worth learning. Enter the idea of integrating LLMs into your coding environment so you don’t have to be copying and pasting back and forth with ChatGPT. Options like CoPilot, Windsurf, Cursor and Firebase Studio have all added AI to the usual VSC interface. This session will look at Firebase Studio because like the P5WebEditor, it is free, cloud based with public urls for your work and it adds the power of VSC interface and AI. The session will get you started in using Firebase Studio. This may initially make you think, OMG I can be coding in English instead of Javascript! You may one day be right, but for now these tools are far from perfect and before long you will likely end up accidentally burning down your project and angrily bickering with the LLM. We will discuss how to form a healthy relationship with your coding AI agent.