How We Built It: The I/O Crossword

At Google I/O this year, we announced new products and tools to help you build with AI. We also launched the Gemini API Dev Competition to encourage you to harness the power of our tools and integrate our most capable AI models to build incredible new experiences for users–with a chance to win a custom-built, electric DeLorean supercar (plus a whole lot of cash!).

So, to celebrate the start of our I/O Connect event series and give you some inspiration, we thought it would be fun to showcase some of our favorite tools announced at I/O that integrate with the Gemini API. Introducing the I/O Crossword, a helpful twist on the classic crossword puzzle that not only tests your knowledge of all things I/O, but also gives you a hands-on look at the power of Flutter, Firebase, and the Gemini API.

Let’s dive in!

How to Play

Step 1: Select a team by choosing a mascot. Each team has a color on the board, and everyone contributes to the collective score.

Step 2: Choose a place on the board to start solving words.

Step 3: Stuck on a word? Click the "Hint" button and ask up to ten yes-or-no questions about the word guiding you towards the solution.

Step 4: Submit your score to the leaderboard, collect a badge for your profile in the Google Developer Program, and share your crossword prowess with the world!

Let’s get under the hood with each of the technologies we used to build the game!

Gemini: Brand-safe, topical, and creative content

A natural place to start for the words and clues in the I/O Crossword was everything we’ve talked about at I/O this year. In this case, we asked Gemini Advanced to review 3 hours of Google I/O keynote footage from YouTube to create topical, technology-related words and clues to make solving the crossword a fun way to learn about I/O product announcements.

The Gemini app enables anyone to use our state of the art models to supercharge creativity in their work. We specifically used Gemini Advanced because it has a more recent knowledge cut-off compared to many other LLMs and can access the internet for up-to-date information.

The Gemini API: Build experiences with Gemini model capabilities

But what's really exciting is that we're enabling you to build with the same Gemini models. With the Gemini API, you can integrate our AI models into your applications. To increase engagement and reduce churn, we added a twist to the crossword – a “Hint” feature designed to keep players in the game when they get stumped. We used Firebase Genkit with the Gemini API, a new framework that enables adding AI features easily to any app's backend.

When a player clicks the “Ask for a hint” button and asks a question, a Genkit flow takes their yes-or-no question, gathers relevant clues and past questions, and sends this information to the Gemini 1.5 Flash model. The model, specifically instructed to give a "yes" or "no" answer, nudges them towards the correct word.

There’s a lot more to the underpinnings of this feature, so if you want to learn more, check out the deep dive post on the Firebase blog about it!

Flutter and Dart: Interactive user interface and multiplatform performance

The game’s UI is built with Flutter. Flutter's flexibility and performance across platforms made it the perfect choice to build a dynamic and interactive game.

We leaned on Flutter’s InteractiveViewer widget to render the crossword board and enable smooth navigation. The widget is designed for handling user interactions like panning and zooming on large content areas, which made it ideal for exploring our expansive crossword grid.

Since the game is a collaborative experience where players play on the same board at the same time, performance is crucial for a great gaming experience. That’s why the game compiles to WebAssembly (WASM), which graduated to the stable channel for Flutter web apps at Google I/O.

For more details on topics like using matrix transformations within the InteractiveViewer widget, or how WASM helped us maintain a high frame rate check out the Flutter deep dive!

Firebase: Hosting, resetting the board, and securing the game experience

Firebase provided a number of tools that work across platforms to provide backend functionality. The live application is hosted on Firebase Hosting and all data from the application is stored in Firestore. Firestore acts in real-time, storing live updates as users from around the world complete the puzzle, automatically scaling up and down as users join and leave the game.

When the crossword is complete, the entire board resets, which means the game is always-on and ready to play as new users join. This functionality is powered by Cloud Functions for Firebase.

When the Flutter app accesses Firestore directly, we set up App Check and anonymous auth to secure the leaderboard API so that only authenticated users have access. Using Firebase Authentication, every user that joins the game is authenticated anonymously to keep track of their individual score and to display it on the leaderboard.

Dart Frog and Cloud Run: Sharing code between frontend and backend

Our backend setup, built with Dart, manages API calls, interacts with the database, and handles requests from the Flutter app. Cloud Run provides autoscaling to ensure a smooth experience.

To prevent cheating, we use a Dart Frog backend. The app reads from Firestore, but only the Dart Frog backend can make changes. This architecture, along with authentication, ensures fair play.

Try It Yourself

Experience the I/O Crossword firsthand. For the technically curious, the code is open-sourced. But most importantly, we can’t wait to see how you apply the lessons we’ve learned on this journey to your own creations for the Gemini API Developer Competition.

To help you get started, we’ve launched a Developer Learning Pathway to guide you through our development process. Check it out!