Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From Live Coding to Vibe Coding with Firebase S...

From Live Coding to Vibe Coding with Firebase Studio

Learn how to go from your idea to a full-stack AI app in minutes by vibe coding with Firebase Studio

Avatar for Firebase Thailand

Firebase Thailand

July 26, 2025
Tweet

More Decks by Firebase Thailand

Other Decks in Technology

Transcript

  1. Google I/O Extended Bangkok Software development is becoming more decentralized

    and collaborative - across devices, geographies, and time zones. Building apps today is time-consuming, often frustrating, and filled with numerous hoops we need to jump through! AI Assistance and powerful LLMs are completely changing how we as developers build apps.
  2. What’s my technology stack? What are my dependencies? Is what

    I’m building secure, scalable, and performant? Who are my users, and what are their needs? What platforms do I need to support? (Web, iOS, Android, cross-platform) How will I handle authentication and user data privacy? What are my API requirements and integration points? How do I ensure maintainability and future scalability? What is my deployment and CI/CD strategy? How will I monitor and debug issues in production? What’s my plan for handling technical debt? How do I balance time-to-market with code quality? What’s my monetization and business model (if applicable)? How will I handle internationalization and localization? What...?
  3. What’s my technology stack? What are my dependencies? Is what

    I’m building secure, scalable, and performant? Who are my users, and what are their needs? What platforms do I need to support? (Web, iOS, Android, cross-platform) How will I handle authentication and user data privacy? What are my API requirements and integration points? How do I ensure maintainability and future scalability? What is my deployment and CI/CD strategy? How will I monitor and debug issues in production? What’s my plan for handling technical debt? How do I balance time-to-market with code quality? What’s my monetization and business model (if applicable)? How will I handle internationalization and localization? What...?
  4. What’s my technology stack? What are my dependencies? Is what

    I’m building secure, scalable, and performant? Who are my users, and what are their needs? What platforms do I need to support? (Web, iOS, Android, cross-platform) How will I handle authentication and user data privacy? What are my API requirements and integration points? How do I ensure maintainability and future scalability? What is my deployment and CI/CD strategy? How will I monitor and debug issues in production? What’s my plan for handling technical debt? How do I balance time-to-market with code quality? What’s my monetization and business model (if applicable)? How will I handle internationalization and localization? What...?
  5. What’s my technology stack? What are my dependencies? Is what

    I’m building secure, scalable, and performant? Who are my users, and what are their needs? What platforms do I need to support? (Web, iOS, Android, cross-platform) How will I handle authentication and user data privacy? What are my API requirements and integration points? How do I ensure maintainability and future scalability? What is my deployment and CI/CD strategy? How will I monitor and debug issues in production? What’s my plan for handling technical debt? How do I balance time-to-market with code quality? What’s my monetization and business model (if applicable)? How will I handle internationalization and localization? What...?
  6. What’s my technology stack? What are my dependencies? Is what

    I’m building secure, scalable, and performant? Who are my users, and what are their needs? What platforms do I need to support? (Web, iOS, Android, cross-platform) How will I handle authentication and user data privacy? What are my API requirements and integration points? How do I ensure maintainability and future scalability? What is my deployment and CI/CD strategy? How will I monitor and debug issues in production? What’s my plan for handling technical debt? How do I balance time-to-market with code quality? What’s my monetization and business model (if applicable)? How will I handle internationalization and localization? What...?
  7. Google I/O Extended Bangkok Software development is becoming more decentralized

    and collaborative - across devices, geographies, and time zones. Building apps today is time-consuming, often frustrating, and filled with numerous hoops we need to jump through! AI Assistance and powerful LLMs are completely changing how we as developers build apps.
  8. Google I/O Extended Bangkok Software development is becoming more decentralized

    and collaborative - across devices, geographies, and time zones. Building apps today is time-consuming, often frustrating, and filled with numerous hoops we need to jump through! AI Assistance and powerful LLMs are completely changing how we as developers build apps.
  9. Today, more than a quarter of all new code at

    Google is generated by AI, then reviewed and accepted by engineers. This helps our engineers do more and move faster. “ Sundar Pichai CEO of Google and Alphabet “
  10. Google I/O Extended Bangkok Firebase Studio is an agentic cloud-based

    AI workspace that helps you build and ship full-stack AI apps, including APIs, backends, frontends, mobile, and more. studio.firebase.google.com
  11. Deep Google Integrations Streamline app dev workflows super_g_ Designed for

    collaboration Workspace sharing available with more features planned  Preconfigured Environments Start from common starting points or customize your own  AI Assistance Across code, test, debugging, etc.  Live preview Real device, emulator, or hosted IFRAME super_g_ Full cloud VM Supports most toolchains  Web-based Your workspace is a URL, installable as a PWA  Built on VS Code World-class code editing c
  12. Google I/O Extended Bangkok App Prototyping Agent To build our

    full stack web application, we can start with a natural language prompt and it will create a PRD for us to review. After we modify the proposal as needed we can generate the app and iterate in chat to update and rebuild the application.
  13. Google I/O Extended Bangkok Quickly Deploy to Firebase We can

    quickly deploy our application we created to Firebase App Hosting. The wizard will guide you on picking the correct project, billing account and kick of the new or updated deployment.
  14. We provide a (growing) collection of templates that help you

    get up and running with the most popular tech stacks. Frontend, Backend, Mobile, and more!
  15. Google I/O Extended Bangkok AI-centric View Code-centric View We want

    to ensure you all have a choice in using as-much or as-little AI as you want when building your apps
  16. Google I/O Extended Bangkok Agentic Experiences Throughout Our advanced coding

    capabilities are enhanced with agentic experiences that take complex (or boring) actions on behalf of you. Whether the changes need to happen across a section of code, a single file, or an entire code base, Gemini will understand your intent and accomplish the task.
  17. Google I/O Extended Bangkok Share and Collaborate in Real-Time Not

    only can you share the deployed link, you can share the entire workspace with a URL. This means you can collaborate in real-time within the same Firebase Studio environment, and then push updates instantly.