> Canonical URL: https://codingcat.dev/post/firebase-2025-07-studio-tips-tricks-2

# Firebase Studio: Tips and Tricks 2: Web Architecture & Implementation Guide

![CodingCat.dev tutorial cover image](https://cdn.sanity.io/images/hfh83o0w/production/0bb59d04a06f3619c0d2b2118c90f2e0abbe9112-1200x630.svg?w=1200&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)July 8, 2025

Spinning up a full-stack web environment with cloud emulators, preview URLs, and AI-assisted scaffolding usually means hours of local Docker and environment variable wrangling. Following the announcement of **Firebase Studio: Tips and Tricks 2**  by Tianzi Cai on the [**Official Firebase Blog**](https://firebase.blog/posts/2025/07/studio-tips-tricks-2/) (2025-07-07), here is our hands-on CodingCat.dev breakdown of what actually shipped, how it works under the hood, and how we wire it into production TypeScript, Next.js, Astro, SvelteKit, React, and Angular applications. From House ID to a First Person Shooter game, the App Prototyping agent in Firebase Studio has enabled business professionals, hobbyists, and a broad spectrum of software developers to create delightful web applications. Many said that they were able to do so in a dramatically shorter timeframe than working alone and the experience was magical. From a distance, it looks like they were able to do so effortlessly. The truth is, personal background and experience, prompting techniques, and patience all contribute to a successful outcome. In this blog post, I will share prompting tips and tricks, using a basic web application for Enterprise Resource Planning (ERP) built with the Prototyper as an example. By explaining the “why” behind each tip, I hope this blog post will set realistic expectations and lead to a happier developer experience for all, regardless of your technical expertise. Let’s get started.

## The Mental Model: Why Firebase Studio: Tips and Tricks 2 Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Engineer at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? Firebase Studio unifies cloud workspaces, Gemini-powered prototyping agents, and one-click Firebase App Hosting deploys so you can move from an initial architecture prompt to a live SSR web app in a single browser tab.

> AJ Pro-Tip from Alex: Treat prototypes generated in Firebase Studio like any other production repo: commit your idx/dev.nix workspace configuration, lock down your environment secrets in Cloud Secret Manager, and wire up CI/CD branch previews before inviting real users.

## How It Works: Technical Breakdown & Implementation

Did you miss part one of the Studio Tips and Tricks series? You can [**read it here**](https://firebase.blog/posts/2025/05/studio-tips-tricks).

### Initial prompt

Initial prompts from as short as two words like “Go game” to as long as thousand-word Product Requirement Documents (PRD) have gone on to produce beautiful and functional web applications. This is possible because the Gemini models behind the prototyper can enrich and extract information from input of various lengths. Extremely short or extremely long prompts are not objectively wrong. However, they may introduce false expectations. As of today, the Prototyper is designed to generate a web application of no more than 10 core features on the first try. When you enter very short or expansive initial prompts, you might not get exactly what you envisioned.

Generally speaking, it’s better if you approach the initial prompt like an elevator pitch that takes roughly 10-30 seconds to say out loud, and in it you describe what the app is, what it does, and how it looks briefly. This ensures that you get the optimal alignment on application complexity with the prototyper. Here is an example:

- “Build a basic ERP for small businesses with a dashboard showing revenue, expenses, and profit, plus a calendar for appointments.”

Don’t worry if your initial prompt isn’t fleshed out yet. We recently added an “Enhance your prompt” option in the input field that appears as you type. Click the link to get an improved version of your prompt. The enhanced prompt of the above example looks like this:

- “A basic business management app designed to simplify financial tracking and scheduling for small businesses. Key features include a dashboard displaying real-time revenue, expenses, and profit summaries, tools to add and manage income and expense records, and an integrated calendar for scheduling and viewing appointments. Use a clean, professional green and white color scheme.”

If you’re still deciding how your application will work or how it will look, Gemini is a great place to have a back-and-forth conversation. Draft your initial prompt, then ask Gemini 2.5 Flash with Search grounding or Deep research to make it a power prompt, before you head back to Firebase Studio to prototype the application.

I asked Gemini about the typical features of an ERP application, and it gave me a list of essential functionalities including sales and order management, inventory management, and Customer Resource Management (CRM). After learning more about each feature by asking questions, I felt sufficiently informed on the topic and more confident to carry on.

### App blueprint

As mentioned before, the prototyper turns your initial prompt into an app blueprint. The app blueprint outlines the core features, style guidelines, and technical stack of your application and acts as an agreement between you and the source code that will be generated. It is also editable.

When editing the core features of the app blueprint, think about how you expect the user to interact with your application from start to finish. Take note of what you consider to be anchoring experiences along the way. The more atypical these user interactions are, the more important it is to give explicit instructions. Remember that what users must, should, and could do are enabled by product features. Your job is to connect the ideas in user-centric language.

The prototyper came up with following core features for the ERP application:

If you haven’t tried this yet, you’ll find the prototyper can output different app blueprints from the same initial prompt. This is expected due to the non-deterministic nature of LLM output, which we can take advantage of through human-in-the-loop involvement. Before generating the source code, I repeat the initial prompt and get a few different versions of the app blueprint. Personally, I enjoy comparing different app blueprints. It encourages me to think instead of clicking ahead hastily. I also become more opinionated as I make decisions on how to mix and match core features and develop a sense of what appeals to my design sensibilities.

For the ERP application, I included a fourth feature that showed up in a subsequent app blueprint:

I also changed up the style guides to my liking by tweaking the color scheme.

### Prototype view

If the app blueprint looks good, it is time to start generating the application. Stay in the Prototyper view to add, modify, and delete parts of the user experience. Don’t ask for all the changes at once. Request one change per conversation turn to keep the Prototyper focused. Think in terms of code changes that need to happen to make the next commit; in other words, identify good stopping points that you aim to get to and you can come back to. This way, if you mess up or don’t like the subsequent changes, you have the option of easy rollback using the Restore feature. The **Restore ** button appears next to the files in the **File changes ** card in the dialog pane.

Here is an update I wanted to make in the ERP application:

- Allow users to upload a receipt when they enter their expense and automatically populate the total expense field from the uploaded receipt

Instead of requesting this as one change, I broke it up into two:

- Allow users to upload a receipt when they enter their expense
- Automatically populate the total expense field from the uploaded receipt

In case it’s not obvious how to break up certain larger tasks, feel free to ask the prototyper for help and have it step through the implementation one change at a time.

Asking the Prototyper for alternative designs and plans may come as an afterthought if the initial suggested path failed to lead to a successful end. You can preempt this failure mode by engaging in self-consultation early. Of course, deciding when to do so depends on how much time you have, how familiar you are with the technologies, and how motivated you are to learn. One recommendation for a good time to ask for options is if a particular feature implementation involves different paying services.

Before asking the Prototyper to proceed with automatically populating the total expense field from the uploaded receipts, I asked it to present a few choices. I knew different Optical Character Recognition (OCR) solutions existed, such as Google Cloud Document AI and Vertex AI Vision. I was interested in how the prototyper weighed the different APIs given its contextual knowledge of my codebase.

- Tell me at least two ways to implement total amount extraction from receipt images, explain their pros and cons

After reading through the comparisons in the Prototyper’s response, I went with Gemini Flash model for OCR because it had an easier integration with my AI stack. The trade-off in development complexity is well worth the increase in accuracy. I rephrased my request by telling the prototyper exactly what to do:

- Before users click “Log Expense”, if a receipt image is uploaded, use a Gemini multimodal model to extract the total amount paid in the uploaded receipt image for the “Amount” field

If everything goes smoothly, you continue to grow your application by adding more features and functionalities through prompting. However, as your application becomes more complex, debugging via chat is likely to hit a snag. When that happens, see if you are willing to simplify your more ambitious ideas with mock data temporarily, and come back to flesh them out in the Code view.

For example, I added a check for duplicates using fake CRM data instead of connecting to a real CRM database.

- Before users click “Add Client”, check if the email entered exists in a mock CRM database to avoid duplicates

### Code view

I touched on jumping into the Code view for more advanced feature development and debugging. Another reason you might want to do so is because of the known limitations of the prototyper. You have probably noticed that the technical stack section of the app blueprint is not modifiable today. For AI, the default is Gemini and Genkit. For UI, they are TypeScript, NextJS, and Tailwind CSS. While these are stated as-is and easy to find, limitations introduced in the system prompts of the prototyper aren’t as obvious. Sometimes when you see the prototyper getting stuck, it is due to conflicts between your instructions and its system instructions. You can learn about these limitations by asking about them, for example:

- `/ask` Tell me about the constraints you have around creating JSON schemas

Here, You can run the slash command `/ask`. This allows me to have many side conversations for learning purposes without impeding the main conversation flow used for prototyping.

You can also upgrade from the built-in Gemini 2.0 model to Gemini 2.5 Flash or Pro model for more advanced reasoning and web browsing capabilities. There is a dropdown menu in the input field in the Code view. Follow the on-screen instructions to get an API key from a paying Google Cloud project. Note that Gemini 2.5 Pro [**currently**](https://ai.google.dev/gemini-api/docs/pricing) does not offer a free tier. I also recommend learning about its [**training cutoff dates**](https://cloud.google.com/vertex-ai/generative-ai/docs/models/gemini/2-5-pro).

Newer Gemini models have more recent knowledge of many public APIs. If the APIs you want to use have been updated since the training cutoff date, provide the URL to the official documentation to the prototyper when asking it to integrate with those. Similarly, if you want to use private APIs, you can copy and paste relevant API examples.

I chose to integrate with HubSpot Free CRM in your application. With the correct file that needed the update opened, I prefixed the following prompt using the `/generate` command to get the code suggestion:

- `/generate` create, update, and delete contacts using email lookup as described here: [**https://developers.hubspot.com/docs/guides/api/crm/objects/contacts**](https://developers.hubspot.com/docs/guides/api/crm/objects/contacts)

## Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring Firebase Studio: Tips and Tricks 2 into a modern TypeScript web application:

```
import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend } from "firebase/ai";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";

const app = initializeApp({
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
});

// Protect AI endpoints in web apps with Firebase App Check
if (typeof window !== "undefined") {
  initializeAppCheck(app, {
    provider: new ReCaptchaEnterpriseProvider(process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!),
    isTokenAutoRefreshEnabled: true,
  });
}

const ai = getAI(app, { backend: new GoogleAIBackend() });
export const geminiModel = getGenerativeModel(ai, { model: "gemini-2.5-flash" });
```

## Production Web Architecture & Security Checklist

Whether we are deploying on [**Firebase App Hosting**](https://firebase.google.com/docs/app-hosting), Cloudflare Workers, or Vercel, shipping AI features to production requires defense-in-depth across three layers:

- **Enforce Firebase App Check & Attestation: ** Protect your web endpoints, Cloud Functions, Data Connect GraphQL resolvers, and Firebase AI Logic calls against unauthorized replay or billing abuse using [**Firebase App Check with reCAPTCHA Enterprise**](https://firebase.google.com/docs/app-check).
- **Validate Locally with the Firebase Emulator Suite: ** Run deterministic integration tests against local Firestore, Auth, Functions, and Data Connect PostgreSQL emulators before promoting schema or rule changes to production.
- **Keep Server & Client Boundaries Type-Safe: ** Use the modular Firebase Web SDK and generated TypeScript bindings so SSR frameworks like Next.js, Astro, SvelteKit, and Angular serialize state cleanly without hydration flickers.

## Conclusion

Accelerate your full-stack web and AI development by pairing **Firebase Studio: Tips and Tricks 2**  with strict Security Rules, Firebase App Check, and local emulator testing. Come tell us on [**X (@CodingCatDev)**](https://x.com/CodingCatDev) and [**LinkedIn (CodingCat.dev)**](https://www.linkedin.com/company/codingcatdev) how you are using Firebase in your stack, and subscribe to the [**CodingCat.dev YouTube Channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) so you don't miss what we build next!

## Watch Our Related Firebase Video Tutorial on YouTube

Want to see how we architect and debug Firebase web applications live? Watch our related CodingCat.dev session [**Building a web application with Next.js and Firebase - Firebase Summit 2021**](https://youtu.be/kHrIyTLVerg) below, and make sure to [**Subscribe to CodingCat.dev on YouTube**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly full-stack web and AI deep dives:

## Resources, Official Docs & Related CodingCat.dev Guides

- **Primary Release Source: ** [Firebase Studio: Tips and Tricks 2 on the Official Firebase Blog](https://firebase.blog/posts/2025/07/studio-tips-tricks-2/) (published 2025-07-07 by Tianzi Cai)
- **Official Firebase Documentation: ** [Firebase Developer Docs & Web SDK Reference](https://firebase.google.com/docs/web/setup)
- **Related on CodingCat.dev: [Bringing architecture to life with Firebase Studio](/post/firebase-2025-07-houseid-studio-showcase)**
- **Related on CodingCat.dev: [Supercharge your Firebase Studio workflow with MCP servers](/post/firebase-2025-07-supercharge-firebase-studio-with-mcp)**
- **Related on CodingCat.dev: [Firebase SQL with Data Connect](/podcast/firebase-sql-with-data-connect)**
- **Related on CodingCat.dev: [Build a Custom No-Code App in 90 Minutes](/podcast/build-a-custom-no-code-app-in-90-minutes)**

## Frequently Asked Questions (FAQ)

### What are the key capabilities introduced in Firebase Studio: Tips and Tricks 2?

Firebase Studio: Tips and Tricks 2 (announced 2025-07-07 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, Next.js, TypeScript workloads. From House ID to a First Person Shooter game, the App Prototyping agent in Firebase Studio has enabled business professionals, hobbyists, and a broad spectrum of software developers to create delightful web applications. Many said that they were able to do so in a dramatically shorter timeframe than working alone and the experience was magical. From a distance, it looks like they were able to do so effortlessly. The truth is, personal background and experience, prompting techniques, and patience all contribute to a successful outcome. In this blog post, I will share prompting tips and tricks, using a basic web application for Enterprise Resource Planning (ERP) built with the Prototyper as an example. By explaining the “why” behind each tip, I hope this blog post will set realistic expectations and lead to a happier developer experience for all, regardless of your technical expertise. Let’s get started. Developers can review the primary announcement on the [**Firebase Blog**](https://firebase.blog/posts/2025/07/studio-tips-tricks-2/) alongside our implementation patterns and production checklist above.

### How do web developers use Firebase Studio: Tips and Tricks 2 with Next.js, SvelteKit, React, or Angular?

Web developers can integrate these features using the modular Firebase JavaScript/TypeScript SDK, Firebase Data Connect web bindings, and [**Firebase App Hosting**](https://firebase.google.com/docs/app-hosting). Always pair client-side SDK initialization with Firebase App Check and strict Security Rules, and test locally with the Firebase Local Emulator Suite before deploying.

### Where can I watch video tutorials on Firebase Web and AI development?

You can watch our hands-on Firebase video walkthroughs on the [**CodingCat.dev YouTube Channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1), including [**Building a web application with Next.js and Firebase - Firebase Summit 2021**](https://youtu.be/kHrIyTLVerg), and follow us on [**X (@CodingCatDev)**](https://x.com/CodingCatDev) for weekly full-stack tutorials.

## Recent Posts

[View More](/blog/page/1)[![PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](https://cdn.sanity.io/images/hfh83o0w/production/e83065d0a4e2f841ce64d3f4aea8ddbbf07e5cb9-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/php2shell-cve-2026-109618-ai-php-security-scramble)

### [PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](/post/php2shell-cve-2026-109618-ai-php-security-scramble)

October 22, 2026

Two critical pre-authentication RCE flaws in PHP (CVE-2026-109618 and CVE-2026-109619), uncovered by AI models from OpenAI and Google Gemini, sparked a global patching scramble across 70% of the web. Here is how PHP2Shell works and how to patch your servers.

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Sanity Knowledge Bases](https://cdn.sanity.io/images/hfh83o0w/production/38b0f021c51d97043c8a1ebf31d505a0ea877b7c-2752x1536.jpg?w=1920&q=82&fit=max&auto=format)](/post/sanity-knowledge-bases)

### [Sanity Knowledge Bases](/post/sanity-knowledge-bases)

October 17, 2026

Eliminate query-time guessing in your AI agents. Learn how Sanity Context Knowledge Bases compile structured datasets, crawled documentation websites, and uploaded files ahead of time, resolve conflicting facts, and serve a compact outline over Context MCP.

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)