A New Way to Build with AI Studio

I've always been fascinated by the intersection of technology and education. Recently, I embarked on a project to build an adult literacy application for Spanish speakers, and I discovered a powerful new way to approach software development: building with AI. This article explores how I used Google's AI Studio to transform my vision into a reality, discovering along the way the potential of AI as a collaborator, an educator, and an enhancer of the coding experience.

From AI Code Generation to Building with AI

AI-powered code extensions have become increasingly popular, often promising to generate entire blocks of code with a simple prompt. While this can be quick and efficient for certain tasks, it often falls short in providing true understanding, maintainability, and adherence to modern best practices. I have found that building with AI, on the other hand, is a more empowering experience. It allows you to be actively involved in every step, from conceptualization to execution.

When you simply generate code with AI, you might end up with code that you don't fully understand, making future maintenance or updates a daunting task. Building with AI, however, lets you understand the nuances of the code you're writing, ensuring you build a more robust and maintainable software product. Moreover, the latest and greatest standards are often quickly adopted and incorporated into AI models, which will also encourage you to ensure your code is up to date and following best practices.

If you're a junior developer, coding with AI teaches you how to write good code, why certain patterns are used, and why following best practices is essential. If you are an experienced developer, it empowers you to optimize and enhance your code to a degree that might have been impossible before. You are now in a position to learn more about edge cases that may not have been obvious before. It is no longer a tool to produce code faster, but a tool to enhance the code you produce.

Google's AI Studio

AI Studio, from Google, has been a game-changer for me. It allows you to leverage the power of Google's state-of-the-art AI models within an accessible environment. It's the perfect tool for not only experimenting with generative AI prompts, but also for quickly translating those prompts into real code.

One of the features that I love the most is the ease of translating your prompts into code. If you are interested in engineering prompts for a generative AI project, you can quickly get the code for your prompt. With one click, you have the code to implement it with cURL, Python, JavaScript, Go, Kotlin, Swift, and Dart. This allows you to rapidly prototype the solutions you design into your AI project, regardless of your platform.

Building Beto

I was recently reminded of the importance of accessible education. It came to me as I was thinking about my father. My father is illiterate, and a native Spanish speaker. I wanted to help him and others who are struggling to learn how to read in Spanish by building an application, what I ended up calling "Beto" — a playful shortening of the word "Alfabeto". This application needed to be intuitive, easy to use, and accessible for people with no prior experience with literacy or technology. This project was going to be a challenge, as I had to think about how a user, without knowing how to read, would interact with an application.

I decided that I was going to take a build-first approach to this application. I was not going to use AI code generation to build my application. I was going to focus on building with AI, leveraging it as a mentor and assistant, guiding me to the best coding practices, and helping me understand the choices I was making.

How I Build with AI Studio

Here’s the workflow I’ve adopted for using AI Studio, which I believe can be replicated for any coding project.

1. Describe Requirements and Current State with Code Examples

The first step is always to understand what we are building. The best way I’ve found to ensure that both me and my AI collaborator are on the same page, is to be very clear with the goals of the application. This means writing down all requirements for the application or, if I'm building upon an existing project, describing the current state with code examples. This helps to ground the project and provide specific use cases that AI can use to give more relevant advice.

For example, in the Beto project, I started with a basic description of the main components of the application:

• Alphabet Grid: A grid of letters representing the Spanish alphabet, where each letter was tappable.
• Text-to-Speech: When a letter is tapped, the device's text-to-speech engine should pronounce the letter.
• Highlighting: The tapped letter should be highlighted visually.

I supplemented this with initial code examples to give the AI context on the technology stack I wanted to use. Here's a simplified example of what I provided:

///TypeScript Alphabet Array
export const alphabet = [
    "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
    "n", "?", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"
];


// letter-grid.compomnent.html
<div class="grid grid-cols-6 gap-4">
  <button
    *ngFor="let letter of alphabet"
    (click)="onLetterClick(letter)"
    class="p-4 bg-gray-200 rounded text-4xl font-bold"
  >
    {{ letter }}
  </button>
</div>        

By clearly outlining the features, and the technologies that are being used, I can then move on to the next step: asking questions.

2. Ask Questions!

This is where the true power of building with AI shines. Instead of just asking it to write code for me, I pose questions like:

• "How can I make the letter grid more accessible for screen readers?"
• "What is the best way to handle text-to-speech in a web application?"
• "What is the best way to load this data in my Angular Application?"
• "How can I make this more maintainable?"
• "What can I do to prevent performance issues in this application?"

This process helps me understand the trade-offs of different architectural decisions and also helps me uncover edge cases I might not have considered on my own. This is where the true value of AI for developers lies. It's not just about writing code; it's about understanding why you're writing it a certain way.

For example, I asked AI Studio how I could use the device's native screen reader to pronounce the letters. The response was incredibly helpful, including code examples, and best practices that I could easily incorporate into my project.

3. Review Code

When the AI provides code examples or suggestions, I always take the time to review each line of code very carefully. I ask questions about specific lines, patterns, and methodologies. This helps me understand not only what the code does but also how it does it.

For example, I asked the AI how to highlight the tapped letter. The AI suggested using a class binding with Tailwind. I then asked the AI about its reasoning for using this particular method.

4. Revise Code to Follow Latest Standards

It's crucial to ensure that all the code in your project is following the latest and greatest standards. Often, as I'm building a project, I find myself using older, more established practices. Even when using AI Studio, LLMs do not always provide code with the latest standards. Revising your generated code is essential to making sure that all of the code in the project is compliant with modern practices.

For example, AI Studio initially used Angular's legacy ngFor and ngIf directives for rendering lists and conditional elements. I had to inform the LLM about Angular 19's built-in control flow directives (@for, @if), which are more efficient and offer better readability.

5. Revise Code to Ensure it is Secure

AI-generated code, like any code, should be treated as inherently insecure. It is crucial to approach any AI generated code, especially in its early stages, with the mindset that there are potential vulnerabilities present. This step should never be skipped. I take the time to manually review all generated code and ask questions that focus specifically on security implications.

This includes checking for common vulnerabilities such as:

• Cross-Site Scripting (XSS): Ensuring that user-supplied data is properly sanitized and escaped to prevent malicious script injection.
• SQL Injection: When working with databases, I always review how user inputs are being used in database queries, to prevent SQL injection attacks.
• Authentication and Authorization: Reviewing the authentication and authorization logic, making sure users can only access data they are supposed to.
• Data Handling: Ensuring that sensitive data is handled securely and is not exposed unintentionally.

Even though AI is an excellent tool, security needs to be prioritized, and that should always come from a human.

6. Revise Code to Ensure it is DRY and Modular

While AI is powerful, it also has a tendency to duplicate efforts and sometimes get lost in the details, creating code that repeats logic unnecessarily. Therefore, as I build with AI, I am always actively optimizing the generated code to ensure that it adheres to the DRY principle (Don't Repeat Yourself) and is highly modular. This involves identifying reusable components and functions, extracting common logic, and ensuring a clear separation of concerns. By doing this, I can create a cleaner, more maintainable, and more scalable code.

For example, by working with AI Studio, I was able to quickly identify reusable components, such as my WordComponent. This component allowed me to have a singular point of reference to render a word in my application and that it uses the device's native text to speech capabilities to pronounce the word.

The Power of Building with AI

My experience with AI Studio has transformed my approach to coding. Building with AI empowers me to:

• Understand Code: It forces me to actively engage with every line of code, making sure I truly understand its implications.
• Learn and Adapt: It helps me learn about the latest standards, and also makes me question why certain practices may no longer be relevant.
• Write Better Code: It guides me to create cleaner, more maintainable, and more secure code.
• Document Code: AI excels in documenting code, providing clear explanations and summaries. This is invaluable, especially when onboarding new team members or when revisiting older projects.
• Enjoy Coding: It removes tedious and error-prone tasks, letting me focus on the creative problem-solving process of developing software.
• Share Prompts: With Google AI Studio, I can easily share the specific prompts and code examples used in projects. This allows others to learn from my approach and build upon my work, making it easier to understand and contribute to a project.

Building for Others

My goal with "Beto" is not just to build an application, but also to build a platform that can be easily expanded and adapted by others to make knowledge more accessible. By providing the code for this application, I want to show others that building with AI is possible. By sharing the method in this article, I hope to inspire the community to start using AI not only as a code generator, but as a partner to help them build empowering and accessible software.

To facilitate this collaboration, the Beto project is publicly available on GitHub: https://github.com/mrivasperez/beto. I am actively seeking contributions, especially to expand the application to support English and French in addition to Spanish.

You can also access the AI Studio session used for this project here. This will allow you to see the specific prompts I used and the code AI created to help me build this application.

I hope that by making both the code and the process transparent, it will be much easier for others to join me in helping others reach their full potential through literacy.