This is a submission for the Google AI Studio Multimodal Challenge
What I Built
I used Google AI Studio to make City Quest AI is an interactive, AI-powered scavenger hunt application that transforms any city or neighborhood into a dynamic adventure. The app solves the problem of generic, pre-planned city tours by creating unique, on-the-fly quests based on user input. Users simply enter a location (e.g., "Downtown Seattle") and an optional theme (e.g., "Historic Landmarks" or "Coffee Shops"), and the app generates a multi-stop scavenger hunt complete with clever clues, fun challenges, and interesting facts for each location.
It's designed to encourage local exploration, create fun and competitive experiences for groups of friends, and make discovering a new place more engaging and memorable.
Demo
a link to my deployed applet: https://city-quest-ai-598974168521.us-west1.run.app
- Setup Screen: The user is greeted with a sleek, modern UI. They enter their desired city and an optional theme for their adventure.
Loading Screen: After submitting, a loading animation appears while the Gemini API crafts a custom scavenger hunt in the background.
Game Screen: The main interface displays the first clue. Once solved, the user can reveal the location, which appears on an embedded map. They then complete a fun, interactive challenge (like taking a photo) and learn a fun fact about the place. The screen also features a live scoreboard, adding a competitive element to the game.
- Completion: After finishing all the stops, the user sees a congratulations screen celebrating their victory and encouraging them to play again.
How I Used Google AI Studio
I leveraged the Gemini 2.5 Flash model through the @google/genai SDK to serve as the creative "game designer" for the app. The core of the integration lies in using structured output capabilities.
In the geminiService.ts file, I defined a strict JSON schema (responseSchema) that outlines the exact data structure needed for each scavenger hunt stop: clue, locationName, challenge, and funFact.
By providing this schema in the API call along with a detailed prompt, I instruct the Gemini model to return its creative output as a perfectly formatted JSON array. This is powerful because it eliminates the need for unreliable string parsing and ensures that the data from the AI can be directly and safely loaded into the application's state, making the integration seamless and robust.
Multimodal Features
The primary AI feature is Text Generation with Structured Output. The application takes simple text input from the user (location and theme) and uses the Gemini model to generate a complex, structured JSON object that defines the entire game. This goes beyond simple text generation by forcing the AI to think and create within a specific, developer-defined framework.
While the AI generation is text-based, the application creates a multimodal user experience. The AI-generated challenge text often prompts the user to interact with the physical world using their device's camera (e.g., "Take a team photo in front of the fountain"). The user then uses the built-in photo upload component, which accesses the device's camera, to provide visual proof of completion.
This creates a fun loop:
Text-to-Game: AI generates a text-based challenge.
Real-world to Image: The user interacts with the real world and captures it as an image.
Game Progression: The image upload confirms the challenge is complete and unlocks the next part of the adventure.
Top comments (3)
Good!
nice content
Everybody loves fun loops... Great!