AI: The Good, The Bad, and The Confused Frontend Dev

Righto, whether you like it or not, we’re slap-bang in the middle of the AI era. It’s a bit of a mixed bag – exciting one minute, bloody frustrating the next.

On the bright side, AI is an absolute game-changer, giving us unlimited power for the apps we’re building. Remember when tricky stuff like image recognition or sorting text was a nightmare for us average devs? Well, now, customers just expect us to pull that stuff off in a ridiculously short amount of time. Easy peasy.

But here’s the rub: trying to keep up with AI development is a shocker. It’s moving at a hundred miles an hour. New models and ideas pop up and then die out before we can even have a fair go at using them. A lot of those ‘tutorials’ are just sneaky ways to flog you something, and a good chunk of the useful info is still being kept under wraps by the more experienced crew, hidden behind fancy buzzwords like “agentic AI” and “RAG.” It’s a genuine headache.

This is a particularly tough gig if you’re a JavaScript developer, especially a frontend one like me, working with Angular. I hear it all the time from other devs: “Do I have to learn Python to do AI?” “I’m not a backend gun, so how the heck do I build AI apps?” and the biggest one: “Where do I even start? It’s all too much!” To be fair, I’ve asked myself the exact same questions.

So, for the past few months, I’ve been giving the Gemini API a solid workout, building a stack of different apps. Now’s the time to cut through the nonsense for my fellow Angular devs and help them get their AI journey sorted. Consider this the start of a new series of articles on how to build ripper AI-powered apps using Angular and Gemini.

💡 About the Article Series

In this series, we will explore how to build modern AI-powered applications using Angular and Google Gemini. We will focus on practical examples, clear explanations, and real-world implementation strategies.

This is going to be a true blue, from-the-ground-up tutorial. We’ll break it down into small, easy bits so you can get started without a drama. The best bit? We’re not assuming you know anything beforehand! If you’re an Angular developer who’s got no clue how people build apps with AI models, this is your starting line!

🛠️ What You Will Learn in This Series

This series will cover the following topics:

1. Getting Started with the Gemini API

• Accessing the API
• Authentication
• Making simple model requests
• Understanding model options
• Creating interactive chat-based experiences

2. Integrating Gemini with an Angular Application

• Setting up an Angular service
• Using HttpClient to make model requests
• Handling streaming responses
• Displaying AI output in real time

3. Building UI Components for AI Features

• Chat components
• Prompt input fields
• Response renderers
• Loading states and error handling

4. Advanced Features

• Multi-modal requests (text + image)
• Function calling
• Content filtering
• Custom datasets

More parts will be added to this series, with each post focusing on step-by-step implementation.

Cheers, Ryan