How I Actually Use AI Agents As A Senior Frontend Dev (Without Breaking Prod)

Every week there’s a new “AI for developers” video, but in real projects the question is simpler: how do you use these tools without slowing yourself down or shipping garbage to production? Over the last year, working across large Next.js frontends and Python FastAPI backends, a few patterns have consistently worked for me.

This is the playbook I wish I had when I started using Zed with Claude and Gemini as part of my daily workflow.

1. Always Use Two AI Tools, Not One

The first thing that changed my productivity was treating AI tools like infrastructure: never have a single point of failure. In practice, that means running:

• Zed editor for inline coding, refactors, and local context.
• Claude or Gemini as your agent/chat layer for planning, multi-file changes, and architecture discussions.

Why this matters for real work:

• Rate limits and outages happen, always at the worst time. With two tools, you just switch context and keep shipping.
• Different tools are good at different things: Zed is great as a fast editing environment; Claude and Gemini are better at repo-wide reasoning and agentic workflows.

If your whole workflow depends on a single AI product, you’re one bad day away from shipping nothing.

2. Don’t Use AI For 3-Minute Tasks

One hard rule that has saved me a lot of time: if a task will take less than 3–4 minutes to fix manually, do not call the AI. Things like:

• Renaming a variable.
• Adding one conditional.
• Fixing an obvious typo or import.

Spinning up an agent, explaining context, and waiting for a plan is slower than just typing the fix yourself. AI shines when:

• The change spans multiple files.
• You need to explore options or edge cases.
• The work includes planning plus implementation.

Use AI where it reduces cognitive load, not where it adds ceremony to simple tasks.

3. Plan Mode First, Then Let The Agent Run

Modern tools and workflows increasingly rely on a “plan mode” concept. That’s where the agent:

• Reads your repository.
• Proposes a step-by-step plan.
• Lists files it wants to touch and what it will change.

My workflow:

1. Describe the issue like a proper ticket: current behavior, desired behavior, constraints, edge cases.
2. Force the agent to stay in planning mode until the plan looks like something you’d assign to a junior developer.
3. Only then say “Okay, execute this plan.”

Planning first trades a few extra minutes for far fewer surprises in your diff.

4. Feed It Real Context From Your Codebase

The biggest difference between “meh” AI output and “wow, that’s useful” is context. When working with an agent on a feature in a Next.js + FastAPI setup:

• Paste or link to existing implementations that are similar (for example, “copy how public events are implemented and reuse that pattern”).
• Mention relevant pages, API routes, services, or feature flags.
• Call out constraints like “don’t touch this payment proxy” or “must stay backward-compatible with existing API.”

These tools are very good at copying patterns that already exist in your repository. If you don’t point them to those patterns, they’ll happily invent new ones and increase the entropy of your codebase.

5. Let Agents Work Asynchronously While You Do Something Else

Watching an agent work is fun the first two times and a total productivity killer after that. Once the plan is approved and the agent starts editing:

• Put it in the background.
• Pick up another small task, review, or planning ticket.
• Wait for the notification or completion message.

Treat AI like a teammate you trust to follow the specification, not a screen you need to stare at. This is where tools that support asynchronous agent runs and notifications really shine.

6. Give AI Access To The Full Flow (Frontend + Backend)

Most real-world issues are not “pure frontend” or “pure backend.” A contest flow, checkout, or onboarding usually spans: Next.js page, React components, FastAPI route, database, feature flags, and analytics. If your agent only sees half the picture, it will:

• Fix the frontend but miss the backend validation.
• Patch the API but forget the UI edge state.

So for multi-part setups:

• Add all relevant directories to the AI workspace (Next.js app, FastAPI backend, shared libraries).
• Clearly specify where the feature starts and ends (“from this landing page to this FastAPI endpoint and DB table”).

The better the global view, the more “end-to-end” the changes it can ship.

7. Review Diffs Like A Senior Engineer

The worst thing you can do is treat AI output as “trusted code.” After the agent finishes:

• Open the diff in your editor or source control management (SCM) tool and review it like a pull request from a junior developer.
• Look for unnecessary abstractions, duplicated logic, and subtle behavior changes.
• Run tests and click through critical flows manually.

AI does not know your business, your service-level agreements (SLAs), or that one CEO dashboard that breaks if a field changes type. That judgment is still on you.

8. Use AI To Review Your Own Code Too

One underrated use case: AI as a code reviewer. After committing your changes:

• Ask a different agent (not the one that wrote the code) to review the last commit or pull request.
• Tell it to focus on edge cases, performance, error handling, and security.
• Use the feedback as a second pair of eyes, not the final authority.

This dual-agent pattern catches issues you mentally skipped because you were too close to the change.

9. Know Where AI Is Not Allowed To Touch

Every serious production system has “no-mistake” zones: payment routing, tenant isolation, authentication, critical infrastructure configuration. For these:

• Either don’t let agents touch them at all, or
• Force extremely small, tightly-scoped changes with heavy human review.

It’s fine if a public landing page breaks for 5 minutes; it’s not fine if a multi-tenant configuration leaks data across customers because an agent refactored a shared middleware wrong. The rule of thumb:

• Use AI on code you already understand well and could implement yourself.
• Use AI for proofs-of-concept on unknown areas, then go back and re-implement or deeply audit.

That mindset keeps AI as a force multiplier instead of a silent source of production incidents.

Before You Plug AI Deeper Into Your Workflow

If you’re a senior developer or tech lead, the goal is not “use AI everywhere,” it’s “ship more value with less mental load and risk.” The setup that has worked best for a Next.js + FastAPI stack in Zed is:

• Two complementary tools: Zed as the editor, Claude or Gemini as the agent/chat brain.
• A hard filter against using AI for trivial fixes or ultra-critical code paths.
• A plan-first, context-rich, asynchronous workflow where agents do the grunt work and you do the thinking and reviewing.

With that mindset, AI stops being a toy or a threat and becomes what it should be: a very fast, very obedient junior developer that never gets tired—but always needs your judgment before anything hits production.