Insights

In emergency response, time is of the essence. For Search and Rescue (SAR) teams operating in chaotic environments like the recent flash floods in Central Texas, the ability to quickly gather and share information is crucial for prioritizing resources and aid. Field technology can help address logistical challenges like tracking team locations, marking hazards, and coordinating search areas.

Our goal was to see if we could rapidly prototype a solution to these logistical challenges—a modern, near real-time common operational picture—using a new paradigm of AI-assisted design and development. Read on to see how we went from customer requirements to a comprehensive functioning app in a fraction of the time it would traditionally take.

Conversational Design: Gemini Web App

Instead of jumping straight into code, we began with a conversation as a developer with Gemini. Similar to the experience of meeting with a human software consultant, we participated in an interactive interview session between human and AI. We called this “conversational design.” This design process produced a living document, the Product Requirements Document (PRD), which became our single source of truth for app development, collaboratively built and refined.

The design workflow looked like this:

Project Context: We started by working in the Gemini web app and uploaded a high-level functional requirements document in our first prompt. After discovery conversations with project sponsors, we produced a document outlining the challenges and user needs for a flood rescue scenario. It included background/context, challenge statements, and user stories for each application persona. Here are user stories for an emergency coordinator, one of the key application personas:

As the Emergency Coordinator, I need:

• field reconnaissance information (hazardous areas, debris fields, and access-restricted zones) and flood data (river levels and inundated areas) so that I can plan search and rescue activities for my teams.
• a systematic way to define search areas/grids so that I can organize search and rescue operations, track progress, and report on activities.
• near real-time knowledge of search and rescue team locations to enable better coordination and ensure their safety during operations.

PRD Scaffolding: Using the Gemini web app, we generated the first version of the PRD, outlining the project goals, UI/UX layout and flow, user stories, application features, and a proposed technical stack. To establish a comprehensive PRD scaffold, we included the ingredients Gemini needed to successfully develop the app. The intent was to test the PRD scaffold in future app development efforts to expedite the app development.

Iterative Refinement: We then had a back-and-forth conversation to refine every aspect of the plan. We incorporated hand sketched visual mockups (see below)—which proved invaluable in giving gemini-cli the guidance it needed to achieve our vision—and added detailed requirements for map behavior. We established the data schemas for our Firestore database and generated supporting documents, like the firebase auth allowlist and JSON for the custom Google Maps style. Throughout the interaction, we instructed Gemini to ask clarifying questions to better understand our app requirements.

Final Blueprint: The result was a highly detailed PRD that served as the starting blueprint for app development. As with any software development project, we expected the final application would drift from the PRD to some degree, and that was ok. We addressed this during development by asking gemini-cli to maintain a readme and project overview file.

This conversational design approach allowed us to solve complex design problems and align on requirements before a single line of code was written.

Development & Build: gemini-cli

With the PRD finalized, the workflow transitions to the local development environment with gemini-cli. The CLI acts as an AI coding partner that understands the project’s context. The development loop becomes:

1. Generate: Use gemini-cli to generate code for a specific component or feature based on the PRD. For example: “Using the PRD, create the Sign-in and Team Selection pages in my Next.js project.” The mocks, as defined in the PRD, inspired the application UI layout.
2. Inspect: Review code generated by Gemini in the IDE or editor of your choice. We were most comfortable using vim in a Mac terminal.
3. Test: Run the local dev server (npm run dev) to see the new component in action.
4. Refine: Ask gemini-cli to make targeted changes. For example, “add a hover effect to the buttons in the Header component.”

This tight loop of generating, testing, and refining directly in the local environment is what enables true rapid prototyping.

The Technology Stack

Our final PRD specified a modern, scalable, and efficient stack:

• Framework: js (React).
• Styling: Tailwind CSS for utility-first responsive design.
• Backend: Firebase (Authentication, Firestore, and Storage) with Next.js API Routes.
• Mapping: Google Maps Platform with a custom Cloud-based Map Style.

The Final Application: Key Features

The application we designed provides a unified operational picture for all field personnel.

Secure Sign-in and Team Selection

Users sign in with their Google credentials and select their assigned team, ensuring the application is secure and all subsequent actions are attributed.

A Dynamic, Near Real-Time Map

The core of the application is a near real-time map that automatically zooms to the operational area based on the latest team locations. The system updates all data in near real-time for all users.

An Intuitive Field Reporting Workflow

Users can quickly report findings from the field. The workflow defaults to their current location and allows them to add a finding type, an optional description, and a photo with just a few taps.

A Filterable List of Reports

A slide-in panel provides a list of all field reports; users can filter these by type. This filter applies to both the list and the map, allowing users to easily declutter the view and focus on what is important.

Lessons Learned

Since it was our first foray into end-to-end AI-assisted design and development, we had some missteps, rework, and headaches along the way. The following list outlines our lessons learned that we trust will help accelerate future app development and quality with Gemini.

• Use the right tool for the job: After experimenting with the Gemini offerings, we landed on using the Gemini web app for high-level planning and design and gemini-cli for detailed coding.
• A detailed PRD is key: Taking the time to collaboratively build a detailed PRD with Gemini was the single most important factor. It eliminated ambiguity and made the code generation phase incredibly efficient. As you would expect, adding more detail in the PRD reduced the gap between human vision and AI-constructed features.
• Frameworks are force multipliers for AI: On our first day of development with gemini-cli, we based our work on vanilla JavaScript, CSS, and HTML, which Gemini chose as its de facto stack in the absence of any stack requirements. However, managing the complexity of the UI and state became problematic as the app grew in scope, leading to frequent regressions. Recognizing this, we made a crucial pivot. On Day 2, we instructed Gemini to rebuild the application using a framework. The move to a more robust Next.js and Tailwind CSS architecture eliminated much of the Day 1 development headaches. Using well-structured frameworks like Next.js and Tailwind CSS allowed an AI assistant to generate predictable, high-quality, and modular code. The AI understood the conventions and worked within them effectively.
• Gemini has some serious design chops: The AI’s core generative capabilities were a massive asset for tasks that are often pain points for developers: the artwork. It excelled at creating icons, theming, and the overall look and feel. We even used it to brainstorm a name for the app and generate the Google Maps Platform (GMP) cloud-based map style. However, we learned that it could be eager to deploy to Firebase, so we had to explicitly remind it not to deploy locally untested code.
• Context is king, but testing is queen: Starting up gemini-cli on subsequent days for bug fixes and new features was fairly painless, as it rebuilt its context quickly. However, even with a framework, small regressions can occur. Moving forward, incorporating a basic regression test suite would be the next step to ensure stability as the application grows.

This AI-assisted approach fills a common desire for pre-sales technical and customer engineering teams:

• rapid prototyping.
• functional apps we can put in users’ hands quickly and can scale.
• build with same cloud resources and app stack as a future production app.

By leveraging this approach, we rapidly designed, built, and deployed a sophisticated, near real-time mobile-first web application that directly addresses the critical needs of SAR teams, moving from a vague concept to a fully functional app with unprecedented speed. Overall, we are impressed with the results and excited to push the boundaries on what is possible going forward.