DEV Community: Daniel Sogl

The Skill AI Adoption Actually Requires: Leadership

Daniel Sogl — Sun, 08 Mar 2026 11:55:54 +0000

AI-assisted software development doesn't just change how fast we write code — it fundamentally changes who we need to be while developing.

Over the past months, I've had countless conversations with developers and decision-makers in my role as a consultant and conference speaker. They almost always revolve around the same topics: How much speed does AI actually bring? What data privacy challenges does it create? How secure is AI-generated code?

All fair questions. But they miss the point that matters most.

The challenge isn't technical — it's a challenge of mental models. While developers today still primarily write code, the core competency of tomorrow will be leading agents. Not real employees. But the parallels to team leadership are closer than most people think.

What Social Media Gets Wrong

AI coding tools are improving at a pace that's hard to keep up with — weekly model updates, new agent frameworks, multi-agent workflows becoming the norm. The productivity numbers sound impressive.

The data tells a different story: A study by METR (2025) with experienced open-source developers found that in a controlled RCT, developers using AI tools were on average 19% slower than without — even though they believed they were 20% faster. METR's February 2026 follow-up notes that models have improved since — and that developers in the follow-up study increasingly refused to work without AI. The tools are deeply embedded in the workflow, whether productive or not.

A DX analysis (February 2026) based on 4.2 million developers sharpens the picture: 92.6% use AI coding assistants, nearly 27% of production code is already AI-written — and yet measurable productivity gains sit at just ~10%. The reason: developers spend only 20–40% of their time actually coding. The rest is problem analysis, product strategy, reviews, communication. A speedup in coding alone barely moves the needle.

The trust problem compounds this. The Stack Overflow Developer Survey 2025 (49,000+ developers, 166 countries): More developers actively distrust AI output (46%) than trust it (33%), with only 3% saying they highly trust AI results. Positive sentiment dropped from 70%+ (2023/2024) to 60% — despite rising adoption. 66% struggle with solutions that are almost right — just wrong enough to make debugging expensive.

None of this is an argument against AI coding. It's an argument for doing it right.

The Leadership Analogy

Think about what a team lead actually does.

Their job isn't to make every decision or review every line of code. A good lead enables their team to work autonomously: to make decisions, learn from mistakes, try new approaches. Each role brings specific knowledge. The team moves toward a shared goal.

Micro-management inverts this — and makes teams slow, demotivated, and dependent.

This is exactly the pattern many developers unconsciously apply to their AI agents today. Monitor every output, correct every step, distrust by default. Understandable — but it doesn't scale.

Research on software teams shows: psychological safety is the strongest predictor of team performance across all four DORA metrics. Teams with decision autonomy and a healthy error culture deliver better results. Working with agents is no different.

What Agent Leadership Means

The shift developers need to make has three dimensions:

1. From Writing to Directing

The Stack Overflow Survey 2025: 75% of developers would still ask a human when they don't trust the AI's output — even in a future where AI handles most coding tasks. The human isn't an optional backup. They're the critical filter.

An agent isn't an autopilot. It's a junior developer with broad knowledge but poor judgment in complex situations. The best coding agents today only solve ~23% of realistic software tasks correctly on their own.

2. Calibrating Trust — Neither Blind Faith Nor Blind Rejection

Google DeepMind describes a concrete paradox in a recent paper on Intelligent AI Delegation: when AI takes over too many tasks, humans lose the ability to intervene in critical situations. The fix: deliberately built-in checkpoints where humans retain control.

Not a weakness in the system — that's design.

3. Establishing a Culture of Failure

Agents make mistakes. Always. The question isn't whether, but how quickly you catch and correct them. DX data shows the difference in practice: companies with strong AI governance experience 50% fewer customer-facing incidents — poorly structured teams see twice as many. Governance isn't bureaucracy. It's the difference between AI as a force multiplier and AI as a liability.

Building Trust Through Structure

Automated tests are the equivalent of structured processes in a team.

A team lead doesn't hand over freedom and hope for the best. They create frameworks: clear goals, reviews, feedback loops. For AI agents, automated tests play exactly this role — the safety net that makes autonomy possible.

The Stanford study by Perry et al. (2023): developers using AI assistants write significantly less secure code — while being convinced they wrote secure code. The Stack Overflow Survey 2025 confirms this at scale: 45% say debugging AI-generated code takes longer than writing it themselves. Without tests, you're handing an agent full authority without accountability.

The New Skillset That Actually Matters

In a workshop last week, I asked a group of experienced developers to delegate a real task to a coding agent — the way they'd explain it to a new teammate. Most wrote a one-line prompt and waited. The agent returned code that compiled but solved the wrong problem.

That's not an agent problem. That's a delegation problem.

A new developer needs context: Which architectural decisions apply here? What's in scope? What should they not touch? An agent needs the same information — only more precisely stated, because it won't ask when something's unclear. It interprets and acts.

Once you internalize that, your approach shifts: tasks get specified more clearly. Acceptance criteria are defined before work starts, not after the first failure. Tests become the language through which you tell an agent what "done" means — not as a post-check, but as a briefing.

That's the competency shift: from executing to specifying. From writing to leading. Whoever delegates well today — to humans or agents — has a structural advantage that grows with every model update, not shrinks.

Conclusion

The conversation around AI-assisted development focuses too much on productivity and too little on the human side of this transformation. Agents are getting better, more autonomous, faster. But the human in this system isn't becoming redundant — they're changing roles.

From someone who writes code, to someone who sets direction, ensures quality, and enables a system of agents to work together toward a goal.

Leadership has always been one of the hardest disciplines in software development. In a world of agentic AI, it becomes the core competency.

Daniel is Principal Consultant for Generative AI at Thinktecture AG, Microsoft MVP for Developer Technologies, and a regular speaker at conferences across Germany and Europe.

Spec Driven Development (SDD) - A initial review

Daniel Sogl — Tue, 16 Sep 2025 17:54:35 +0000

Since "vibe coding" emerged in early 2025 - coined by Andrej Karpathy on February 2nd - developers have been able to create full applications through AI-assisted coding tools. The numbers are staggering: 25% of Y Combinator's Winter 2025 cohort have codebases that are 95% AI-generated. Initially, there was a boom in creating applications by typing basic prompts into chat windows. While the results looked impressive - though often generic and built on the same UI libraries - developers grew frustrated over time.

LLMs excel at generating new content, but they often fall short on code quality, architecture choices, API patterns, and security standards. This isn't because LLMs lack capability compared to professional developers, but because developers struggle to define exactly what they want in their prompts, how the LLM should achieve the goal, and how results should be validated. It turns out that while developers are efficient at writing code, they often fail to formulate exactly what they want in plain text.

When I started learning software development in 2012, I encountered Test Driven Development (TDD), where developers define tests with expected results before writing actual code. I never fully adopted this technique in my development work, though I understood its merits. I found it impractical for daily work because for me, writing software is a creative process that evolves over time. While I consider architecture and patterns before starting, I typically begin coding and refactor later after implementing the requested feature. Writing tests beforehand would certainly help create better structured code from the start, but it would also slow down the creative process.

However, I once worked for a company developing a complex product where I learned the importance of defining user stories precisely, including personas and acceptance criteria. I often found that stories didn't fully reflect what the product owner wanted me to implement, causing multiple iterations of coding, QA feedback, and adjustments.

With these lessons from the past and current frustrations with AI-assisted coding tools, there's now a promising pattern that merges the concepts of TDD and well-defined user stories while still allowing creativity in coding - with AI tools handling the heavy lifting.

Introduction to Spec Driven Development

When we examine what "Vibe Coding" truly means, we realize it lets us forget that code even exists. The main idea is simple: instead of defining goals as code, we express them in plain, natural language. Thanks to LLMs, even people without deep technical knowledge can bring their ideas to life. However, this approach typically works only for prototypes. Production-ready code shouldn't just look cool - it needs to be bug-free, architecturally sound, secure, and functional. To achieve this, developers must define custom instructions with various rules, add MCP servers, and write precise prompts that provide clear guardrails for the LLM. Unfortunately, developers often underestimate the effort required for this setup and prompt engineering.
This is where Spec Driven Development (SDD) comes in. Instead of coding first and documenting later, SDD begins with defining a specification. This specification serves as a contract for how your code should behave and becomes the source of truth that your tools and AI agents use to generate, test, and validate code. The result is less guesswork, fewer surprises, and higher-quality code.

Spec Driven Development Phases

SDD divides development into four distinct phases, each with specific goals and outcomes. Throughout these phases, we rely on our chosen AI coding tool for assistance. Our responsibility is to articulate our goals in natural language. The code that's eventually generated is merely the product of these clear specifications.

1. Specify

In this phase, you provide a high-level description of what you're building and why, then the coding agent generates a detailed specification. This isn't about technical stacks or application design - it's about user journeys, experiences, and success criteria. You'll define who will use your product, what problem it solves for them, how they'll interact with it, and which outcomes matter most. Think of it as mapping the desired user experience while letting the coding agent elaborate on the details. This specification becomes a living document that evolves as you gain deeper insights into your users and their needs.

2. Plan

This phase is where you get technical. You'll provide the coding agent with your desired tech stack, architecture, and constraints, and it will generate a comprehensive technical plan. If your company has standardized technologies, specify them here. Detail any integrations with legacy systems, compliance requirements, or performance targets you need to meet. You can also request multiple plan variations to compare different approaches. By making your internal documentation available to the coding agent, it can directly incorporate your architectural patterns and standards into the plan. Think of this as setting the rules before the game begins - the coding agent needs to understand the parameters before it can start working effectively.

3. Tasks

The coding agent transforms the spec and plan into actionable work by generating small, reviewable chunks that each address a specific component. Each task should be implementable and testable in isolation—this approach allows the coding agent to validate its work and maintain focus, similar to a test-driven development process. Rather than broad directives like "build authentication," you receive precise tasks such as "create a user registration endpoint that validates email format.”

4. Implement

The coding agent executes tasks sequentially or in parallel as appropriate. The key difference here is that instead of reviewing massive code dumps, you - the developer - evaluate focused, specific changes that address particular problems. The coding agent has clear direction: the specification defines what to build, the plan outlines how to build it, and the task specifies exactly what to work on.

Crucially, your role extends beyond steering - you must verify. At each phase, reflect and refine. Does the specification truly capture your intended product? Does the plan address real-world constraints? Has the AI overlooked any edge cases or omissions? The process includes deliberate checkpoints where you evaluate what's been generated, identify gaps, and correct course before proceeding. While the AI generates the artifacts, you ensure their accuracy and relevance.

Introduction to GitHub Spec Kit

Since following SDD requires defining extensive prose text—including specifications, tech stack details, test cases, and more - GitHub released an open-source CLI called Spec Kit to simplify creating the required files. Released on September 2, 2025, Spec Kit is currently at version 0.0.30+ and continues rapid development with frequent updates and community contributions.

Spec Kit Installation

Spec Kit can be installed in two different ways. The first method uses uvx, a Python package manager that works like npm with npx. I recommend installing uvx through Homebrew.

uvx --from git+https://github.com/github/spec-kit.git specify init <PROJECT_NAME>

This command creates a new folder with the defined name. You'll then confirm which AI coding assistant you want to use. Currently, you can't switch between selected tools after initialization.

This command creates a new folder with the defined name. You’ll then confirm which AI coding assistant you want to use. Currently, you can’t switch between selected tools after initialization.

If you want to create the files in an existing project, you can pass the --here flag.

Alternative installation method: You can download platform-specific template packages without using the CLI. These are available on the release page in both POSIX shell (sh) and PowerShell (ps) variants.

Project setup

To demonstrate Spec Kit, I'll create a new project using GitHub Copilot as my AI coding assistant. For my tech stack, I'll use Angular with the latest ESLint, Prettier, and TypeScript APIs. This will also show how to ensure Spec Kit follows the most current APIs of your preferred framework.

Spec Kit Files Overview

Based on your selected tool, Spec Kit creates various files in specific directories. Understanding this structure is crucial for effective implementation.

Prompt Files

The prompt folder contains reusable prompts that can be executed through GitHub Copilot. These prompts include instructions that GitHub Copilot should follow. We will use these prompts to create our initial specification, technical implementation plan, and finally, the tasks we can execute step by step. This approach simplifies following Spec Driven Development guidelines, as the GitHub team has precisely defined what the AI agent must do, ensuring it follows the established guardrails.

Memory Directory

The memory/ folder contains the constitution.md, which defines your principles such as preferred architecture, API exposure patterns, TDD approach, libraries, technologies, and coding standards. You should fill out this file in detail before running any prompts. Your AI coding tool can help with this process. I recommend using context7 MCP or another documentation MCP server to retrieve the latest style guides for your framework. For best results, use the most advanced LLMs available, such as Sonnet 4 or GPT-4.

Fill out the project constitution for a modern Angular web application. Ensure it follows Domain-Driven Design, uses TypeScript with Angular Material and SCSS, is built with TDD principles, adheres to Clean Code practices, and complies with the latest Angular Style Guides. #context7 #angular-cli #file:constitution.md

Scripts Directory

The scripts/ directory contains shell scripts executed by the coding agent to help it understand specifications, create branches, and generate other required files. You should not modify these files manually, as they're integral to the SDD workflow automation.

Templates Directory

The templates/ folder contains markdown templates for files the coding agent will generate later. These ensure consistent formatting across all generated specifications, plans, and tasks. You should avoid modifying these files manually.

AI Tool Integration

Different AI tools use different instruction files:

GitHub Copilot: .github/copilot-instructions.md
Cursor: .cursorrules files
Claude: CLAUDE.md
Gemini: GEMINI.md

Enhanced in v0.0.30+: Template system now includes platform-specific variants (POSIX shell and PowerShell) for cross-platform compatibility, plus comprehensive validation to ensure instruction files are properly configured.

Creating Your First Specification

After defining the constitution, it's time to create your first specification. This initial step is crucial for defining your application's goal. Be as specific as possible. You can also use your preferred AI to enhance the description. Focus on the user experience rather than technical details.

To use the specify functionality, execute the command through your chosen AI tool. In GitHub Copilot's case, this involves using the /specify command:

/specify NG Pokedex is an application designed for Pokémon fans who want a simple and engaging way to discover and explore their favorite creatures. The app focuses on making the search and discovery process intuitive: users can quickly look up a Pokémon by name or browse by type, such as Fire or Water. Each Pokémon entry presents the essentials—its name, image, and key stats—so users can immediately recognize and compare them.

When users want to dive deeper, they can click on a Pokémon to open a detail view that provides richer information in a focused and easy-to-read format. To personalize the experience, users can mark their favorite Pokémon and curate their own collection, which can be updated at any time by toggling a star icon.

The experience is designed to be seamless across devices—desktop, tablet, and mobile—so users can enjoy discovering and managing their Pokémon wherever they are. Success for this application means that users feel empowered to explore the Pokémon world effortlessly, stay engaged through personalization features like favorites, and return to the app because it makes their interactions simple, fun, and rewarding.

Running this prompt creates your first spec file and branch. For each specification, the agent creates a separate branch to work on—in my example, 001-ng-pokedex-is. This process may take a few minutes, as the coding agent calls multiple scripts, creates files, and generates user stories, requirements, and key entities. The agent ensures it follows all instructions defined by the Spec Kit CLI.

Open the generated spec.md file and scroll through it. At the bottom of the file, the agent validates the following requirements:

### Content Quality
- [x] No implementation details (languages, frameworks, APIs)
- [x] Focused on user value and business needs
- [x] Written for non-technical stakeholders
- [x] All mandatory sections completed

### Requirement Completeness
- [x] No [NEEDS CLARIFICATION] markers remain
- [x] Requirements are testable and unambiguous  
- [x] Success criteria are measurable
- [x] Scope is clearly bounded
- [x] Dependencies and assumptions identified

If any of these checkboxes remain unchecked, you should either rerun the specify command with more detailed information or complete the document yourself. It's crucial to validate that the defined stories and requirements align with your vision for the application or feature. Edge cases, for example, need to be defined manually since the agent doesn't specify them automatically.

### Edge Cases

- What happens when no Pokémon match a search query? The system MUST display a user-friendly message indicating no results were found and suggest alternative actions (e.g., broadening the search criteria).
- How does the system handle when a user tries to access detailed information for a Pokémon that doesn't exist? The system MUST display a 404 error page with a friendly message and a link back to the main page.
- What occurs when the user has no favorited Pokémon yet? The system MUST display a message indicating that the favorites list is empty and suggest Pokémon to explore.

Creating a Technical Plan

After finalizing the non-technical specification, it's time to create the technical plan for implementation. From my experience, you can optimize this process by establishing the default application structure upfront instead of relying on the coding agent to do so. I suggest using context7 MCP again to ensure you follow the latest project setup guidelines. In my case, I'll also incorporate the Angular CLI MCP server to generate the Angular project. Be prepared for this prompt to take several minutes to complete.

/plan The application will be developed using Angular 20 together with Angular Material, following the guidelines of Material Design v3. There is no backend; instead, all Pokémon data will be retrieved directly from the PokeAPI V2. The list of favorites will be stored in the browser’s local storage, which means the data is tied to the user’s device and will be reloaded whenever the page is refreshed. Testing will be carried out with Jasmine and Karma, both of which are included in the standard Angular CLI setup. No other third-party libraries will be introduced, apart from those provided by the Angular CLI project and Angular Material itself. This approach ensures a lean and maintainable project that strictly follows Angular’s official ecosystem. The architecture will be guided by Angular best practices and style guides, while performance, responsiveness, and accessibility according to Material Design v3 are considered essential requirements. This plan defines the technical foundation and the constraints within which the coding agent will generate the specification, ensuring a consistent and future-proof implementation. #context7 #angular-cli

At this stage, the agent generates several files, including a plan.md document. This document outlines how the agent should research information needed to create tasks, and includes research results, instructions for following your guidelines, and entity model definitions. Review these files carefully to ensure the agent will adhere to your architecture, framework standards, and specification requirements. Pay particular attention to the quickstart.md file, as it contains instructions for initializing the project files. Verify that the npm versions match the latest versions of your preferred framework and tools.

Defining Implementation Tasks

This is the final specification step where Spec Kit helps us create task definitions for our chosen coding agent. This step doesn't require adding any specifications to the prompt file execution. Simply run the /tasks command in your chat window and wait while the coding agent defines all the tasks needed to implement your well-defined specification. Be patient, as this process can take several minutes to complete.

After executing the tasks prompt, the agent creates a tasks.md file, including a step-by-step definition of all tasks that need to be executed to create your defined specification. Again, review the file manually to make sure everything is defined and no todos are open at the end of the file.

## Validation Checklist
**GATE: All requirements met for execution**

- [✅] All 3 contracts have corresponding tests (T006-T008)
- [✅] All 9 entities have model tasks (T015-T023)  
- [✅] All tests come before implementation (T006-T014 before T024+)
- [✅] Parallel tasks truly independent (different files, no shared state)
- [✅] Each task specifies exact file path with Angular conventions
- [✅] No task modifies same file as another [P] task
- [✅] Constitutional compliance: Standalone components, signals, Material Design v3
- [✅] Domain boundaries respected: Pokemon, Favorites, Search
- [✅] Angular 20 modern patterns enforced throughout

**Total Tasks**: 44 tasks organized in 5 phases with clear dependencies
**Estimated Duration**: 3-4 weeks for full implementation with testing
**Parallel Opportunities**: 28 tasks marked [P] for parallel execution

The tasks are organized into different phases based on the specification's complexity. In my example, there are five phases: Setup, TDD, Core Implementation, Integration, and Polish. Each task has a unique identifier (e.g., T001) that you can reference when instructing your agent which task to complete first. It's essential to follow the phases and tasks in their intended order. If you complete a task manually, be sure to mark it as completed in the tasks file.
Now it's time for your coding agent to do the hard work for you!

Current Limitations and Considerations

As of September 2025, Spec Kit is still experimental (version 0.0.30+) and has some known limitations worth considering:

Tool Switching: Once initialized with a specific AI tool, you cannot easily switch to another
Greenfield Focus: Better suited for new projects than existing codebases
Python Dependency: Requires Python 3.11+ for uvx installation
Rapid development: Features and structure change frequently; documentation may lag behind latest capabilities
Community-driven expansion: Many new AI tool integrations come from community pull requests, creating inconsistent quality

The Road Ahead

GitHub has positioned Spec Kit as an experiment in structured AI-assisted development. Early adoption statistics show promise - major tech companies are already incorporating SDD principles into their development workflows, and the tool has gained traction among developers frustrated with unstructured AI coding approaches.

The integration ecosystem continues expanding. Recent updates to GitHub Copilot (including the new Coding Agent in public preview) and competitive responses from Cursor and other AI coding tools suggest that specification-driven approaches will become standard practice rather than experimental techniques.

Conclusion

Spec Driven Development promises a structured approach to AI-assisted coding that addresses the quality and maintainability issues inherent in "vibe coding." GitHub Spec Kit simplifies this process through predefined prompts and templates, providing developers with guardrails for AI code generation.

In theory, SDD appears to be the logical evolution of today's AI-assisted development, but in practice, it currently faces the fundamental challenge of human specification. The main problem isn't the AI - it's the human factor. SDD requires developers to specify their intentions precisely, which AI agents will ultimately execute. Yet this is exactly where the model faces its greatest challenge.

After over 10 years in software development, I have rarely experienced projects where requirements were completely formulated before implementation—neither by product developers nor by developers themselves. In my talks, I jokingly refer to us developers as "efficient," but "lazy" would probably be the more honest term.

Spec Kit encourages developers to continuously expand the generated documents and refine specifications. However, based on my examples from recent weeks, this approach doesn't automatically lead to better results. Only through the use of additional rules and MCP servers was I able to have my requirements - using GitHub Copilot - implemented cleanly and completely.

The question remains whether this model actually reduces development time or whether addressing a self-created problem - managing AI-generated code quality - leads to more frustration in the long term due to poorly optimized code architecture and increased specification overhead.

I will continue experimenting with Spec Driven Development in my projects and publish updates as the methodology and tooling mature. The early indicators suggest that while SDD adds upfront specification overhead, it may prove essential for scaling AI-assisted development beyond prototype-level applications.

Gemini Code Assist for GitHub: Automated Code Reviews with Gemini

Daniel Sogl — Sun, 06 Apr 2025 11:11:31 +0000

As a solo developer working on my side project codingrules.ai, I needed an efficient way to perform code reviews without another set of eyes. Google's Gemini Code Assist emerged as an ideal solution. In this post, I'll explore how Gemini Code Assist helps automate pull request reviews, detail its key features, and show how you can tailor its behavior specifically for your GitHub repositories.

What is Gemini Code Assist for GitHub?

Gemini Code Assist is Google's AI-powered code review assistant, seamlessly integrated with GitHub. Built upon Google's advanced Gemini large language models—fine-tuned with billions of lines of open-source code—Gemini automates the review of pull requests, providing intelligent, context-aware feedback to improve your code quality and streamline your workflow.

Gemini Code Assist offers:

Automated reviews identifying potential issues
Contextual, actionable feedback
Support for coding best practices and language-specific patterns
Customizable review behavior aligned with your team's standards
Easy integration with GitHub Actions for workflow automation

Key Features of Gemini Code Assist

1. Automated Pull Request Reviews

Gemini automatically analyzes your pull requests, identifying potential bugs, performance issues, and adherence to coding standards—all without manual intervention.

2. Standard Review Patterns

By default, Gemini reviews code in five primary areas:

Correctness: Checks logic errors, race conditions, edge cases, and incorrect API usage.
Efficiency: Highlights performance issues such as memory leaks, inefficient loops, redundant computations, and inefficient string manipulation.
Maintainability: Reviews readability, modularity, naming conventions, documentation, complexity, duplication, formatting, and magic numbers.
Security: Identifies vulnerabilities like insecure data handling, injection attacks, insufficient access controls, and insecure direct object references.
Miscellaneous: Addresses testing, scalability, modularity, reusability, and error logging/monitoring.

3. Code Context Awareness

Gemini considers the broader context of your codebase, ensuring relevant, precise feedback tailored specifically to your project.

4. GitHub Actions Integration

Easily automate code reviews with GitHub Actions, triggering Gemini reviews on every pull request automatically.

5. Multiple Feedback Formats

Gemini provides inline comments, summary reports, and suggested fixes, ensuring clear and actionable feedback.

How Gemini Code Assist Reviews Pull Requests

Gemini Code Assist simplifies and enhances the traditional pull request review process:

1. Pull Request Summary

Once the pull request is created, Gemini Code Assist will generate a summary comment. This comment includes:

A brief overview of the changes made in the pull request
Highlights of significant modifications
A changelog detailing the specific changes

2. Code Review Findings Summary

After the initial summary, Gemini will provide a second comment summarizing the code review findings. This summary includes:

An overview of the issues detected
The severity and impact of each issue
Suggestions for improvement

3. Detailed Code Reviews

Finally, Gemini Code Assist will create detailed code reviews for each finding. Each review includes:

The priority of the finding (e.g., critical, high, medium, low)
An example of what should be changed
A reference to the style guide rule that triggered the review

This structured approach ensures thorough reviews, maintaining high code quality standards across your repository.

Customizing Reviews with the `.gemini` Directory

Gemini Code Assist allows extensive customization using a special .gemini directory in your repository. This directory helps you standardize your coding practices across your team or personal projects.

Setting up the `.gemini` Directory

To customize Gemini's behavior:

Create a .gemini directory in the base of your repository.
Add config.yaml to define Gemini’s behavior and review criteria.
Optionally, add a styleguide.md to detail your project's coding standards explicitly.

Example Directory Structure

.gemini/
├── config.yaml      # Gemini review configuration
└── styleguide.md    # Custom coding style guide

Example `config.yaml`

version: 1

enabled_features:
  auto_review: true
  post_review_summary: true
  inline_suggestions: true
  review_pull_request: true
  severity_level: true

review_comment_severity:
  critical: true
  high: true
  medium: true
  low: false

code_review:
  disable: false
  comment_severity_threshold: MEDIUM
  max_review_comments: -1

pull_request_opened:
  summary: true
  code_review: true
  help: false

This configuration enables detailed automatic reviews, inline suggestions, and summary reports, filtering out lower-severity comments if desired.

Example `styleguide.md`

# Project Style Guide for codingrules.ai

Our project utilizes:

- Next.js 15
- React 19
- TypeScript
- Tailwind CSS v4
- Supabase
- shadcn UI

## General Coding Standards

- Use TypeScript exclusively, avoiding `any`.
- Favor functional and React Server Components.
- Implement robust error boundaries and accessibility practices (a11y).
- Apply proper internationalization (i18n) techniques.

## React & TypeScript Best Practices

- Explicit typing with interfaces.
- Limit type assertions and unnecessary annotations.
- Validate types at runtime with Zod.
- Prioritize hooks for state management and side effects.

## Supabase Integration

- Separate Supabase clients for server and client components.
- Use `@supabase/ssr` for server-side rendering.
- Properly configure environment variables and client initialization patterns.

Getting Started with Gemini Code Assist

Setting up Gemini Code Assist on GitHub is straightforward:

Install Gemini Code Assist from the GitHub Marketplace.
Authorize the app for your GitHub account.
Select repositories for Gemini reviews.
Create a .gemini directory for custom configurations (optional but recommended).
Integrate with GitHub Actions to automate pull request reviews.

Future Outlook

As AI-driven code reviews evolve, Gemini Code Assist is well-positioned to further improve development workflows. Anticipated enhancements include:

More advanced code analysis techniques
Greater understanding of complex coding patterns
Enhanced customization capabilities
Improved integration with GitHub collaboration tools

Conclusion

Gemini Code Assist for GitHub provides powerful AI-driven code reviews, customized through the .gemini directory. For solo developers or teams, it's an invaluable tool that ensures code quality, consistency, and faster integration cycles. Adopting Gemini Code Assist transforms the review process, making it simpler, quicker, and more effective.

Ready to try Gemini Code Assist for your project? Head to the GitHub Marketplace and streamline your code reviews today.

Generating and Storing Google Gemini Embeddings with Vercel AI SDK and Supabase

Daniel Sogl — Tue, 01 Apr 2025 17:17:55 +0000

Text embeddings are numerical vectors representing concepts like text, enabling AI tasks such as semantic search, recommendations, and clustering. This post guides you through generating text embeddings using Google Gemini via the Vercel AI SDK and storing them in a Supabase Postgres database with the pgvector extension.

Why Vercel AI SDK and Supabase?

Vercel AI SDK: Offers a unified, developer-friendly API for interacting with AI providers like Google, simplifying embedding generation. Source: Vercel AI SDK Docs
Supabase & pgvector: Provides a scalable Postgres database with pgvector for efficient vector storage and similarity search within the database. Source: Supabase AI Docs

Prerequisites

Node.js environment (LTS recommended)
A Supabase project (Create one)
A Google AI API Key (Get one via Google AI Studio)
A Vercel account (Optional, for easy deployment)

Step 1: Setup

Install the necessary packages:

pnpm add ai @ai-sdk/google @supabase/supabase-js
# or
npm install ai @ai-sdk/google @supabase/supabase-js
# or
yarn add ai @ai-sdk/google @supabase/supabase-js

Create a .env.local file for your environment variables:

# Required for Vercel AI SDK (Google)
GOOGLE_API_KEY='your-google-ai-api-key'

# Required for Supabase client
NEXT_PUBLIC_SUPABASE_URL='your-supabase-project-url'
# Public key for client-side reads (e.g., semantic search)
NEXT_PUBLIC_SUPABASE_ANON_KEY='your-supabase-anon-key'
# Service role key for server-side writes (e.g., storing embeddings)
SUPABASE_SERVICE_ROLE_KEY='your-supabase-service-role-key'

Warning:
Protect your API keys. Add .env.local to your .gitignore and use environment variables in your deployment environment.

Initialize the Supabase client. Create separate clients for server-side operations (using the service role key) and client-side operations (using the anon key) if needed, or manage access appropriately based on your architecture.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
const supabaseServiceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;

// Client for public read access (e.g., in browser or Edge Functions)
export const supabase = createClient(supabaseUrl, supabaseAnonKey);

// Client for server-side operations requiring elevated privileges
// Use this cautiously and only in secure server environments
export const supabaseAdmin = createClient(supabaseUrl, supabaseServiceRoleKey);

Step 2: Prepare Supabase Database

Enable vector extension: In your Supabase Dashboard, navigate to Database > Extensions, find vector, and enable it.
Create table: Go to the SQL Editor and run the SQL below. Crucially, adjust VECTOR(768) if you plan to use a different Gemini model or optimize/truncate embeddings to a different dimension. text-embedding-004 uses 768 dimensions. Source: Google AI Embeddings

-- Ensure the vector extension is enabled
CREATE EXTENSION IF NOT EXISTS vector WITH SCHEMA extensions;

-- Create table to store documents and their embeddings
-- IMPORTANT: Adjust VECTOR dimensions based on your model and optimization strategy
CREATE TABLE documents (
  id BIGSERIAL PRIMARY KEY,
  content TEXT,                       -- The original text content
  embedding VECTOR(768)               -- Use 768 for text-embedding-004 (default Gemini model)
                                      -- Use a smaller value (e.g., 256) if truncating
);

-- Optional: Create an index for faster similarity search
-- Choose one index type based on your needs:

-- HNSW: Good balance of speed and recall (recommended for many use cases)
-- Adjust m and ef_construction based on dataset size and desired recall/speed trade-off
CREATE INDEX ON documents USING hnsw (embedding vector_cosine_ops)
-- WITH (m = 16, ef_construction = 64); -- Example parameters

-- IVFFlat: Faster builds, potentially lower recall than HNSW
-- Adjust 'lists' based on your dataset size (e.g., sqrt(N) where N is # rows)
-- CREATE INDEX ON documents USING ivfflat (embedding vector_cosine_ops)
-- WITH (lists = 100); -- Example parameter

Create Search Function: Still in the SQL Editor, create a stored procedure for efficient similarity search. Again, ensure VECTOR(768) matches the dimension used in your documents table.

-- Function to search for similar documents using cosine similarity
CREATE OR REPLACE FUNCTION match_documents (
  query_embedding VECTOR(768), -- Match the vector dimension in your table
  match_threshold FLOAT,        -- Similarity threshold (e.g., 0.7)
  match_count INT               -- Max number of results to return
)
RETURNS TABLE (
  id BIGINT,
  content TEXT,
  similarity FLOAT
)
LANGUAGE plpgsql
AS $$
BEGIN
  RETURN QUERY
  SELECT
    documents.id,
    documents.content,
    1 - (documents.embedding <=> query_embedding) AS similarity -- Cosine similarity
  FROM documents
  WHERE 1 - (documents.embedding <=> query_embedding) > match_threshold
  ORDER BY documents.embedding <=> query_embedding ASC -- Order by distance (closest first)
  LIMIT match_count;
END;
$$;

Step 3: Generate, Optimize (Optional), and Store Embeddings

Create functions to generate, optionally optimize, and store embeddings in Supabase. We'll put these in lib/embeddingUtils.ts.

1. Configuration and Imports

First, import necessary modules and define configuration constants for the embedding model and dimensions.

import { google } from '@ai-sdk/google';
import { embed } from 'ai';
import { supabaseAdmin } from './supabaseClient'; // Use admin client for inserts

// Choose your Google embedding model (e.g., text-embedding-004)
// Ref: https://ai.google.dev/docs/embeddings#available_models
const EMBEDDING_MODEL = google.textEmbeddingModel('text-embedding-004');

// Define the raw dimension of the chosen model
const RAW_VECTOR_DIMENSIONS = 768;

// Define the target dimension for optimization (if used). Must match DB schema!
const OPTIMIZED_VECTOR_DIMENSIONS = 256; // Example: optimize to 256 dimensions

2. Helper Function: L2 Normalization

This helper function normalizes a vector (scales it to have a length of 1), which is often beneficial for cosine similarity calculations.

// ... imports and config from above

function normalizeL2(v: number[]): number[] {
  const norm = Math.sqrt(v.reduce((sum, val) => sum + val * val, 0));
  if (norm === 0) return v; // Avoid division by zero
  return v.map((val) => val / norm);
}

3. Helper Function: Optimize Embedding

This function optionally truncates an embedding to a target dimension and then normalizes it using the normalizeL2 helper.

// ... imports, config, and normalizeL2 from above

/**
 * Truncates (optional) and normalizes an embedding vector.
 */
function optimizeEmbedding(
  embedding: number[],
  dimension: number = embedding.length, // Default: no truncation
): number[] {
  if (dimension < 0 || dimension > embedding.length) {
    console.warn(
      `Invalid target dimension ${dimension}. Using original length ${embedding.length}.`,
    );
    dimension = embedding.length;
  }

  // 1. Truncate if necessary
  const truncated =
    dimension === embedding.length ? embedding : embedding.slice(0, dimension);

  // 2. Normalize
  const normalized = normalizeL2(truncated);

  if (normalized.length !== dimension) {
    console.warn(
      `Optimization resulted in unexpected dimension: ${normalized.length}`,
    );
  }
  return normalized;
}

4. Core Function: Embed and Store

This main function orchestrates the process: it takes text, generates the embedding using the Vercel AI SDK, calls the optimization helper if requested, and inserts the original text and final embedding vector into the Supabase table using the admin client.

// ... imports, config, and helpers from above

export async function embedAndStore(
  text: string,
  optimize: boolean = false, // Set to true to truncate and normalize
  tableName: string = 'documents', // Make table name configurable
  contentColumn: string = 'content',
  embeddingColumn: string = 'embedding',
): Promise<{ success: boolean; error?: Error }> {
  const cleanedText = text; // Google models handle newlines generally well

  try {
    console.log(
      `Generating Gemini embedding for: "${cleanedText.substring(0, 60)}..."`,
    );
    // Generate the initial embedding
    const { embedding: rawEmbedding } = await embed({
      model: EMBEDDING_MODEL,
      value: cleanedText,
      // Optional: Use Google's built-in dimensionality reduction
      // ...(optimize ? { parameters: { outputDimensionality: OPTIMIZED_VECTOR_DIMENSIONS } } : {}),
    });

    // Basic validation of raw embedding length
    if (
      rawEmbedding.length !== RAW_VECTOR_DIMENSIONS &&
      !optimize /* Add check if using Google's param */
    ) {
      console.warn(
        `Expected ${RAW_VECTOR_DIMENSIONS} dimensions, got ${rawEmbedding.length}`,
      );
    }

    // Optimize (truncate/normalize) or just normalize
    const finalEmbedding = optimize
      ? optimizeEmbedding(rawEmbedding, OPTIMIZED_VECTOR_DIMENSIONS)
      : optimizeEmbedding(rawEmbedding); // Normalize only if not truncating

    // Validate final embedding length
    const targetDimension = optimize
      ? OPTIMIZED_VECTOR_DIMENSIONS
      : RAW_VECTOR_DIMENSIONS;
    if (finalEmbedding.length !== targetDimension) {
      throw new Error(
        `Final embedding dimension mismatch: expected ${targetDimension}, got ${finalEmbedding.length}`,
      );
    }

    // Store in Supabase
    console.log(`Storing embedding with ${finalEmbedding.length} dimensions.`);
    const { error } = await supabaseAdmin.from(tableName).insert({
      [contentColumn]: cleanedText,
      [embeddingColumn]: finalEmbedding,
    });

    if (error) {
      console.error('Supabase insert error:', error);
      throw new Error(
        `Failed to store embedding in Supabase: ${error.message}`,
      );
    }

    console.log('Successfully stored text and embedding.');
    return { success: true };
  } catch (error: any) {
    console.error('Error in embedAndStore process:', error);
    return { success: false, error: error as Error };
  }
}

/* Example Usage Placeholder: Add example API route/Server Action call here if needed */

Optimization Considerations:
If you enable optimization (truncation + normalization), ensure the VECTOR(...) dimension in your documents table and match_documents function exactly matches OPTIMIZED_VECTOR_DIMENSIONS (e.g., 256). If optimization is disabled, ensure they match RAW_VECTOR_DIMENSIONS (768 for text-embedding-004). Consistency is key! Normalization (normalizeL2) is generally beneficial for cosine similarity searches even without truncation. Google's models also support an outputDimensionality parameter in the API call for built-in reduction. Source: Vercel AI SDK - Google Provider

Step 4: Implement Semantic Search

Create a function in lib/semanticSearch.ts to perform semantic search using the stored embeddings and the Supabase RPC function (match_documents).

1. Configuration and Imports

Import dependencies and define configuration matching the embedding generation step.

import { google } from '@ai-sdk/google';
import { embed } from 'ai';
import { supabase } from './supabaseClient'; // Use public client for reads

// Match configuration with embedAndStore and DB schema
const EMBEDDING_MODEL = google.textEmbeddingModel('text-embedding-004');
const RAW_VECTOR_DIMENSIONS = 768;
const OPTIMIZED_VECTOR_DIMENSIONS = 256; // Must match embedAndStore if optimize=true

2. Re-use Helper Functions

Include the same normalizeL2 and optimizeEmbedding helper functions used during storage to ensure the query vector is processed identically.

// ... imports and config from above

// --- Re-use Helper: Normalize L2 ---
function normalizeL2(v: number[]): number[] {
  const norm = Math.sqrt(v.reduce((sum, val) => sum + val * val, 0));
  if (norm === 0) return v;
  return v.map((val) => val / norm);
}

// --- Re-use Helper: Optimize Embedding ---
function optimizeEmbedding(
  embedding: number[],
  dimension: number = embedding.length,
): number[] {
  // (Identical implementation as in embeddingUtils.ts)
  if (dimension < 0 || dimension > embedding.length) {
    dimension = embedding.length;
  }
  const truncated =
    dimension === embedding.length ? embedding : embedding.slice(0, dimension);
  const normalized = normalizeL2(truncated);
  if (normalized.length !== dimension) {
    console.warn(
      `Search query optimization resulted in unexpected dimension: ${normalized.length}`,
    );
  }
  return normalized;
}

3. Core Search Function

This function takes a search query, generates its embedding, optimizes it (if the stored embeddings were optimized), and then calls the match_documents Supabase RPC function to find similar documents.

// ... imports, config, and helpers from above

export async function semanticSearch(
  query: string,
  optimize: boolean = false, // MUST match the optimization state used for storing
  limit: number = 5,
  threshold: number = 0.7, // Similarity threshold
): Promise<{
  results: Array<{ content: string; similarity: number }>;
  error?: Error;
}> {
  try {
    // 1. Generate Query Embedding
    const { embedding: rawQueryEmbedding } = await embed({
      model: EMBEDDING_MODEL,
      value: query,
      // Optional: Use Google's built-in dimensionality reduction
      // ...(optimize ? { parameters: { outputDimensionality: OPTIMIZED_VECTOR_DIMENSIONS } } : {}),
    });

    // 2. Optimize Query Embedding (must match storage optimization strategy)
    const queryEmbedding = optimize
      ? optimizeEmbedding(rawQueryEmbedding, OPTIMIZED_VECTOR_DIMENSIONS)
      : optimizeEmbedding(rawQueryEmbedding); // Normalize only

    // Validate query embedding length
    const expectedDimension = optimize
      ? OPTIMIZED_VECTOR_DIMENSIONS
      : RAW_VECTOR_DIMENSIONS;
    if (queryEmbedding.length !== expectedDimension) {
      throw new Error(
        `Query embedding dimension mismatch: expected ${expectedDimension}, got ${queryEmbedding.length}`,
      );
    }

    // 3. Call Supabase RPC function
    const { data, error } = await supabase.rpc('match_documents', {
      query_embedding: queryEmbedding,
      match_threshold: threshold,
      match_count: limit,
    });

    if (error) {
      console.error('Supabase RPC error:', error);
      throw new Error(`Semantic search failed: ${error.message}`);
    }

    return { results: data || [] };
  } catch (error: any) {
    console.error('Error in semanticSearch process:', error);
    return { results: [], error: error as Error };
  }
}

/* Example Usage Placeholder: Add example API route/Page call here if needed */

Alternative Approach: Automatic Database-Driven Embeddings

While the application-level approach works well for many use cases, we can also implement a more automated pattern where the database itself manages the embedding generation process.

How Database-Driven Embeddings Work

Instead of managing embeddings at the application level (as shown in the examples above), we can use PostgreSQL's trigger system to automatically generate and update embeddings when data changes:

When a row is inserted or updated, a database trigger fires
The trigger enqueues an embedding job via pgmq (PostgreSQL Message Queue)
A background worker (pg_cron) processes the queue
The worker calls an Edge Function via pg_net to generate the embedding
The embedding is stored back in the vector column

This pattern has several advantages:

No embedding drift: Your vectors automatically stay in sync with source content
Fully asynchronous: Write operations aren't slowed down by embedding generation
Resilient: Jobs are retried if they fail, ensuring embedding consistency
SQL-native: The entire process is managed within PostgreSQL

Implementation Example

Here's a simplified example of how to set up database-driven automatic embeddings:

-- Create a table with a vector column
CREATE TABLE documents (
  id integer PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
  title text NOT NULL,
  content text NOT NULL,
  embedding vector(768), -- For Google's text-embedding-004
  created_at timestamp with time zone DEFAULT now()
);

-- Create a function that specifies what content to embed
CREATE OR REPLACE FUNCTION embedding_input(doc documents)
RETURNS text
LANGUAGE plpgsql
IMMUTABLE
AS $$
BEGIN
  RETURN '# ' || doc.title || E'\n\n' || doc.content;
END;
$$;

-- Add triggers to handle inserts and updates
CREATE TRIGGER embed_documents_on_insert
  AFTER INSERT
  ON documents
  FOR EACH ROW
  EXECUTE FUNCTION util.queue_embeddings('embedding_input', 'embedding');

CREATE TRIGGER embed_documents_on_update
  AFTER UPDATE OF title, content
  ON documents
  FOR EACH ROW
  EXECUTE FUNCTION util.queue_embeddings('embedding_input', 'embedding');

This approach removes the need for the application-level embedding logic we implemented earlier. When you insert or update a document, the embedding is automatically generated and stored:

-- Insert a document (embedding will be generated asynchronously)
INSERT INTO documents (title, content)
VALUES ('Understanding Embeddings', 'Embeddings are vector representations of text...');

Initially, the embedding column will be null, but within a few seconds, it will be automatically populated by the background process.

This pattern is particularly useful for production systems where you need to ensure embeddings always stay in sync with your content without building complex application logic.

The implementation requires setting up Supabase Edge Functions to handle the actual embedding generation and PostgreSQL extensions like pgmq, pg_cron, and pg_net to manage the asynchronous workload.

Conclusion

You've now learned how to generate Google Gemini embeddings using the Vercel AI SDK, optionally optimize them, store them efficiently in Supabase with pgvector, and perform semantic searches. This powerful combination enables sophisticated AI features like:

Meaning-based Search: Go beyond keywords to find truly relevant content.
Recommendation Systems: Suggest similar items based on semantic understanding.
RAG (Retrieval-Augmented Generation): Find relevant context to enhance LLM responses for Q&A bots.

The Vercel AI SDK simplifies AI model interactions, while Supabase and pgvector provide a robust, scalable backend. Remember to maintain consistency in embedding dimensions between storage and search, especially when using optimization techniques.

Happy building!

GitHub Copilot — Agent Mode Review

Daniel Sogl — Sun, 09 Feb 2025 18:49:26 +0000

The year 2025 is dominated by the new AI buzzword: AI agents. Tools like Cursor, Windsurf, and Cline have been offering so-called agent modes for quite some time, allowing developers to automate programming tasks. Surprisingly, GitHub Copilot, the most well-known AI-powered development tool, had not included such a feature — until now. With the introduction of Agent Mode, available in preview for Visual Studio Code, Copilot has taken a major step towards autonomous coding assistance.

Over the past few days, I have tested this new feature extensively. In this review, I’ll provide an overview of what GitHub Copilot’s Agent Mode can and cannot do, as well as areas where GitHub (or Microsoft) still needs to improve.

What is GitHub Copilot’s Agent Mode?

An AI agent is an autonomous system designed to perform tasks, make decisions, and adapt based on data and user feedback. It operates independently, automating processes across various domains, including software development.

Copilot’s Agent Mode follows this principle: it autonomously reads files, makes decisions, and executes code edits without requiring manual confirmation for each change. Unlike the traditional Copilot mode, users don’t have to approve every single modification. Instead, after the Agent completes a task, users can review and approve or reject the suggested changes.

GitHub Copilot’s new Agent Mode is capable of:

Iterating on its own code, recognizing errors, and fixing them automatically.
Suggesting terminal commands and prompting users to execute them.
Analyzing run-time errors and performing self-healing operations.

Installation

To use the Agent Mode, you need to:

Download and install the Insider version of Visual Studio Code.
Install the GitHub Copilot plugin (Preview version).
Link your GitHub account to enable the feature.
Open the Copilot Edit panel and select Agent Mode from the menu at the bottom.

Once these steps are completed, you can start experimenting with Copilot’s new autonomous capabilities.

Use Cases for Copilot Agent

While the standard Copilot Edit Mode is great for implementing small features and making incremental improvements, Agent Mode is designed to handle larger, more complex tasks. Since I primarily work in the Angular ecosystem, I tested Agent Mode with Angular projects, but the workflow remains the same across different frameworks and technologies.

Test #1: Building a TodoMVC App with Angular

For my first test, I asked the Agent to create a TodoMVC application using Angular based on a simple screenshot. Initially, I planned to use Sonnet-3.5, but since Copilot does not yet support image inputs, I had to switch to GPT-4ofor this task.

Unfortunately, the Agent struggled with this seemingly simple request.

It correctly initialized a new Angular project using the Angular CLI and started generating components and styles.
However, since GPT-4o was trained on Angular 15, it could not use the latest Angular features in a brand-new project like the new control flow or signals.
Even worse, the Agent failed to reference files it had previously generated, making it difficult to maintain project context.
Additionally, it was unable to resolve compile errors autonomously, getting stuck in an infinite loop, focusing on irrelevant files.

Test #2: Enhancing an Existing Next.js App

In my second test, I asked the Agent to add a Testimonial section to an existing Next.js application, ensuring it was responsive. This time, I opted for Sonnet-3.5 instead of GPT-4o.

The Agent correctly read the project’s package.json to identify relevant dependencies (Next.js, Tailwind, and Radix UI).
It then generated the required components and integrated them into the application.
The Next.js config was modified to allow the display of placeholder images.
The initial implementation looked decent. When I later asked the Agent to enable automatic scrolling when the user reached the section, it also handled this well.
Unlike in the first test, the Agent successfully fixed compile-time errors autonomously.

This test clearly demonstrated that Copilot’s Agent Mode works significantly better when given access to an existing codebase rather than generating a project from scratch. This aligns with my experience testing other AI coding agents.

Test #3: Code Review and Unit Testing in a Next.js Project

For the third test, I asked the Agent to review the code from the previous task and add unit tests using Jest. My goal was to determine whether:

The Agent unnecessarily altered its own previously generated code (a common issue with AI-generated code reviews).
It could independently set up Jest, since the project had no existing test setup.

First, the Agent scanned the entire codebase to confirm that Jest was not yet installed.
It performed the code review but did not suggest any changes — which was a positive sign.
It then attempted to set up Jest and create unit tests.
Interestingly, the Agent aimed for 100% test coverage but encountered a major issue: it got stuck in an infinite loop, failing to resolve JSX-related errors properly.
Instead of fixing the JSX errors directly, it tried adding unnecessary dependencies, breaking the Jest setup.
After multiple retries, it eventually managed to resolve the issue.

Preliminary Verdict

GitHub Copilot’s Agent Mode is a long-overdue step forward in AI-powered coding assistance. It enables developers to tackle larger tasks with simple prompts, reducing the need for manual intervention.

However, at the time of writing, Agent Mode still lags behind competitors like Cline and Cursor in key areas:

Limited LLM support: Unlike its competitors, Copilot currently lacks a variety of model options.
Context limitations: It does not yet allow for extended context inputs, such as local documentation or web links.
Lack of robustness: The Agent still struggles with compile-time errors and complex project structures, often getting stuck in loops.

That being said, GitHub has confirmed that Agent Mode will eventually be available in all Copilot-supported IDEs, and they are actively seeking feedback to improve the experience.

I will continue monitoring GitHub Copilot’s Agent Mode and will share updates as new features are released. Stay tuned for future tests and comparisons!

The AI-Enhanced Developer: Maximizing Efficiency with Coding Agents

Daniel Sogl — Fri, 07 Feb 2025 17:57:14 +0000

Software development has evolved far beyond just writing code—it’s about efficiency, smart solutions, and focusing on what truly matters. AI-powered coding tools like GitHub Copilot, Cursor, bolt.new, and v0 are revolutionizing the way we build software. These tools automate repetitive tasks, accelerate development processes, and create space for more creative and strategic work. However, they come with their own challenges and limitations. This article explores how AI tools optimize workflows and make day-to-day development more productive without compromising on quality.

The Rise of AI in Software Development

AI-powered coding assistants have gained significant traction in recent years, transforming the way developers write and manage code. Industry leaders predict that AI agents will play an increasingly prominent role in software development:

Sam Altman (CEO of OpenAI): “We believe that in 2025, we might see the first AI agents join the workforce.”
Jensen Huang (CEO of Nvidia): “AI agents are going to get deployed; I think this year we are going to see it take off.”
Mark Zuckerberg (CEO of Meta): “AI will write most software soon.”

These statements highlight the rapid advancements in AI-powered development. But will AI replace developers entirely? The more practical question is how AI tools can be leveraged to boost productivity rather than replace human expertise.

Understanding AI Agents and Their Role

An AI agent is an autonomous system designed to perform tasks, make decisions, and adapt based on data and user feedback. These agents operate independently, automating processes in various fields—including software development. AI coding tools fall into this category, helping developers write, refactor, and optimize code with increased efficiency.

AI-Powered Coding Tools: What’s Available?

There is an overwhelming number of AI tools available today. For simplicity, they can be categorized into two main types:

1. AI-Driven Prototyping Tools

These tools focus on rapid prototyping, allowing developers to transform ideas into working applications with minimal effort.

v0 by Vercel – Best for generating React components.
Bolt.new – Developed by StackBlitz, supports full-stack applications.
Lovable.dev – Integrates deeply with Supabase, making it ideal for creating full-stack applications quickly.

These tools help developers validate ideas quickly but are not meant for production-ready code.

2. AI Coding Assistants and IDE Enhancements

For real-world development, coding assistants provide greater value. These tools assist with writing, refactoring, and debugging code directly within the developer's workflow.

Cursor – An AI-powered IDE that indexes codebases and external documentation for better AI-assisted development.
Cline – A Visual Studio Code plugin that offers a transparent cost model and supports various LLMs.
GitHub Copilot – One of the most popular AI coding assistants, with code completion and inline suggestions.

Practical Use Cases of AI Coding Tools

1. Automating Repetitive Coding Tasks

AI assistants can automate mundane tasks such as writing boilerplate code, setting up configurations, and generating common UI components. Developers can focus on solving complex problems instead of redoing the same tasks repeatedly.

2. Improving Code Quality and Consistency

By leveraging AI-powered tools, developers can ensure consistency in their coding styles. Tools like Cursor allow developers to index their internal documentation and enforce coding guidelines through structured prompts.

3. Accelerating Prototyping and MVP Development

Prototyping tools like v0, Bolt, and Lovable enable developers to quickly generate UI components and full-stack applications, reducing the time required to validate ideas and present functional prototypes.

4. Enhancing Debugging and Code Reviews

AI coding tools assist in debugging by analyzing logs, suggesting fixes, and automatically detecting patterns that may cause errors. They also facilitate code reviews by identifying areas for improvement based on predefined rules.

Challenges and Limitations

While AI tools are impressive, they are not without their downsides:

Cost Transparency: Some tools (like Copilot) offer a flat rate, while others (like Cursor) charge based on API usage.
Code Quality Variability: Without guidelines, AI-generated code can be inconsistent.
LLM Model Latency: Some AI models take time to process requests, which can impact efficiency.
Vendor Lock-in: Tools like v0 may lock developers into specific ecosystems.
Lack of Angular-Specific Support: Many AI coding assistants prioritize React, leaving Angular developers with fewer tailored solutions.

Best Practices for AI-Assisted Development

To get the most out of AI coding tools, developers should consider the following workflow:

Define Your Goal & Tech Stack – Use AI to refine ideas and outline project structures.
Prototype with AI-Driven Tools – Utilize tools like v0, Bolt, or Lovable to create rapid prototypes.
Develop in an AI-Assisted IDE – Use Cursor, Cline, or Copilot for real-world coding tasks.
Plan Before Execution – Leverage AI’s planning features to avoid unnecessary refactoring.
Ensure Code Quality & Compliance – Use rule files to enforce coding standards and maintain consistency.

Conclusion

AI coding tools are powerful allies in software development. They can boost productivity, automate repetitive tasks, and provide insightful recommendations. However, they should be used strategically, with human oversight, to ensure quality and maintainability. By integrating AI tools into the development workflow, developers can work smarter—not harder.

For a deeper dive into these concepts, check out the recording of my talk linked below. Let me know your thoughts and experiences with AI coding tools in the comments! 🚀

Boosting Your Angular Development Workflow with Cursor Code Editor

Daniel Sogl — Sun, 05 Jan 2025 23:00:00 +0000

The software development landscape is rapidly evolving, with AI-powered tools becoming integral to modern workflows. In recent years, we’ve seen the rise of coding assistants like GitHub Copilot, showcasing the transformative potential of Large Language Models (LLMs) and Generative AI (GenAI) in software development.

Taking this innovation a step further is Cursor, a Visual Studio Code fork that embeds generative AI features directly into its interface. Equipped with built-in chat, coding composer, coding agent, and advanced documentation indexing, Cursor is redefining how developers approach coding tasks.

In this article, we’ll explore Cursor’s unique features and show how Angular developers can harness its capabilities to boost productivity and improve code quality.

What Is Cursor?

Cursor is a next-generation, AI-powered code editor that builds on the familiar experience of Visual Studio Code (VS Code) while introducing advanced AI capabilities. Whether you’re looking to automate repetitive tasks, improve code quality, or gain deeper insights, Cursor offers a comprehensive solution.

Key Features of Cursor

Tab Autocomplete: Cursor predicts your next edits across multiple lines, intelligently adapting to your coding patterns.
Chat Integration: Engage in natural language conversations with an AI that understands your codebase. The AI can analyze specific blocks of code or the entire project to provide suggestions, detect bugs, and even rewrite snippets.
Smart Rewrites: Cursor proactively fixes syntax issues and optimizes code structure, ensuring clean and efficient output.
Multi-Line Edits: Suggests batch changes across your codebase to save time.
Multimodal Models: Supports multiple AI models like Claude 3.5 Sonnet, o1, and Cursor’s own cursor-fast and cursor-mini, which can also process images as reference points.
Project Indexing: Cursor indexes your project files to access your code base as fast as possible. This reduces the time to interact with your code dramatically
Documentation Indexing: Cursor includes the largest framework documentations by default but developers can add any other documentation hosted in the web to index them
Search the Web: Fetches relevant information from the internet to enhance code suggestions and task handling.
Seamless Migration from VS Code: Migrating from VS Code is straightforward, ensuring developers can retain their existing workflows while upgrading to an AI-enhanced environment. (Learn how to migrate)

Using Cursor for Angular Development

Angular developers can unlock even more potential with Cursor by leveraging its customization and documentation features. Here’s how:

1. Define Angular-Specific Coding Rules

Cursor allows developers to define custom coding rules, tailoring the editor to meet project-specific or team-wide standards. These rules can enforce Angular-specific conventions, such as:

Structuring components and services.
Using reactive programming best practices with RxJS.
Enforcing state management patterns with NgRx.

You only have to create a .cursorrules file in the root of your project and past your custom rules into that file. Cursor will always take a look into that file when you write a prompt.

Visit Cursor Directory for a curated collection of reusable Cursor Rules. Developers can copy and paste these rules directly into their projects, saving time and ensuring consistency across the codebase.

2. Supercharge Your Workflow with Documentation Indexing

The documentation indexing feature is particularly useful for Angular applications, where working with multiple interconnected modules, services, and components is common. By indexing your project and its libraries, Cursor enables developers to:

Query library-specific documentation without leaving the editor.
Resolve coding challenges faster by fetching method definitions and usage examples directly.
Stay productive by keeping the most relevant information a keystroke away.

For example, if you’re unsure how to set up an NgRx Effect, you can simply type your question into Cursor’s chat, and it will provide accurate guidance, often accompanied by example code. You can also include multiple documentations into your prompts. Just type @Docs into the prompt field and select your documentation Cursor should use to resolve your task.

Why Cursor Is a Game-Changer for Angular Developers

Cursor stands out as an indispensable tool for Angular developers aiming to stay ahead of the curve. Its blend of AI-driven assistance, Angular-specific customization, and robust documentation integration simplifies the development process, reduces errors, and boosts productivity.

What’s Next?

Are you intrigued by Cursor’s potential? Would you like to see a detailed tutorial on setting up and customizing Cursor for Angular development? Share your thoughts in the comments below or reach out on social media. If there’s enough interest, I’ll dive deeper into Cursor’s features and show how you can maximize its capabilities for your Angular projects.

Ready to try it yourself? Explore the official Cursor documentation and start building smarter today!

Enhancing Side Effects in Angular with NgRx's signalMethod

Daniel Sogl — Mon, 30 Dec 2024 22:00:00 +0000

NgRx has always been a trusted library for managing state in Angular applications. With the introduction of its Signals API, developers now have a more streamlined way to handle state changes and side effects. To handle those side effects the NgRx team recently introduced the signalMethod that simplifies reactive workflows and makes them more intuitive.

In this article, I’ll dive into the signalMethod, showcasing how it works through practical examples and why it’s an excellent addition to your Angular toolkit.

What is `signalMethod`?

The signalMethod is a utility introduced by NgRx that allows you to manage side effects in a clean, reactive way. Unlike traditional approaches that may rely on RxJS operators or manual effect management, signalMethod lets you focus on what matters: the logic for handling changes.

It achieves this by combining signals with a processor function. This function reacts to changes in its input, whether it's a static value or a reactive signal. The result is a flexible yet powerful way to handle state-driven actions.

Setting Up a Signal-Driven Action

Let’s start with a simple example: logging a message whenever a number doubles. Here’s how you can achieve this using signalMethod:

import { Component } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Component({
  selector: 'app-math-logger',
  template: `<button (click)="increment()">Increment</button>`
})
export class MathLoggerComponent {
  private counter = signal(1);

  // Define the signal method
  readonly logDoubledValue = signalMethod<number>((value) => {
    const doubled = value * 2;
    console.log(`Doubled Value: ${doubled}`);
  });

  constructor() {
    this.logDoubledValue(this.counter);
  }

  increment() {
    this.counter.set(this.counter() + 1);
  }
}

Here, logDoubledValue is invoked whenever the increment method is called. The counter’s value is passed into the signalMethod, which then logs the doubled value. This example shows how easily signalMethod integrates with signals to react to state changes.

Reacting to Signals Dynamically

Suppose you’re working on a temperature monitoring system. Instead of logging doubled values, you need to alert the user if the temperature exceeds a threshold. With signalMethod, this becomes straightforward:

@Component({
  selector: 'app-temperature-monitor',
  template: `<button (click)="increaseTemperature()">Increase Temperature</button>`
})
export class TemperatureMonitorComponent {
  private temperature = signal(20); // Start at 20°C

  readonly alertHighTemperature = signalMethod<number>((temp) => {
    if (temp > 30) {
      console.warn('Warning: High temperature detected!');
    }
  });

  constructor() {
    this.alertHighTemperature(this.temperature);
  }

  increaseTemperature() {
    this.temperature.set(this.temperature() + 5);
  }
}

Every time the temperature increases, the alertHighTemperature method evaluates the new value and issues a warning if it’s too high.

Controlling Cleanup for Services

In some cases, you might define signalMethod in a service rather than directly in a component. This allows for better reuse but requires careful management of side effects to avoid memory leaks.

Here’s an example:

import { Injectable } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Injectable({ providedIn: 'root' })
export class ScoreService {
  readonly logScore = signalMethod<number>((score) => {
    console.log(`Current Score: ${score}`);
  });
}

Now, suppose a component uses this service:

@Component({
  selector: 'app-score-tracker',
  template: `<button (click)="updateScore()">Update Score</button>`
})
export class ScoreTrackerComponent {
  private scoreService = inject(ScoreService);

  private score = signal(0);

  constructor() {
    this.scoreService.logScore(this.score);
  }

  updateScore() {
    this.score.set(this.score() + 10);
  }
}

To prevent memory leaks, make sure to inject the component’s context when using the service in dynamic scenarios:

import { Injector } from '@angular/core';

@Component({ /* ... */ })
export class ScoreTrackerComponent {
  private injector = inject(Injector);
  private scoreService = inject(ScoreService);

  private score = signal(0);

  constructor() {
    this.scoreService.logScore(this.score, { injector: this.injector });
  }

  updateScore() {
    this.score.set(this.score() + 10);
  }
}

Why Choose `signalMethod`?

Compared to other tools like effect, signalMethod offers some distinct advantages:

Flexibility: It can process both static values and reactive signals, making it ideal for mixed scenarios.
Explicit Dependency Tracking: Tracks only the provided signal, reducing the risk of unintended dependencies.
Simplified Context Management: Works seamlessly in Angular injection contexts and allows manual control when needed.

A Note on When to Use `signalMethod`

While signalMethod is perfect for handling straightforward side effects in reactive workflows, there are scenarios where RxJS might be a better fit—especially for complex streams or cases involving race conditions. However, for applications leveraging NgRx signals, signalMethod strikes a perfect balance of simplicity and power.

Final Thoughts

NgRx’s signalMethod is a game-changer for handling side effects in Angular applications. By combining the elegance of signals with the flexibility of processor functions, it simplifies reactive patterns while maintaining control over cleanup and dependencies.

If you’re using NgRx Signals in your projects, I highly recommend exploring signalMethod to streamline your side-effect handling. Try it out and experience how it can make your Angular applications cleaner and more reactive!

Flexible Angular Builds: A Guide to Angular 19 Build-Time Variables with Docker

Daniel Sogl — Tue, 10 Dec 2024 23:00:00 +0000

When deploying Angular applications as containers, managing environment variables at build time has always been a challenge. With Angular 19, the CLI now supports passing variables directly at build time. In this article, I’ll demonstrate how to dockerize your Angular application and leverage build-time variables for seamless containerized deployment.

What Are Build-Time Variables?

Build-time variables allow you to inject configuration values during the build process. These variables are embedded into the application, enabling different behaviors or settings based on the build environment.

This approach is perfect for:

Environment-Specific API Endpoints: Switch between development, staging, and production configurations seamlessly.
Feature Flags: Enable or disable features dynamically at build time.
Secure Secrets Management: Avoid exposing sensitive information in your source code.

Step-by-Step Guide: Dockerizing an Angular App with Build-Time Variables

Step 1: Define Variables in the Environment File

Start by defining your variables as constants in an environment.ts file (or another dedicated file). You can optionally define default values and export them as an environment object for reuse in your Angular project:

declare const apiKey: string;
declare const configuration: 'development' | 'production';

export const environment = {
  apiKey,
  configuration,
};

Step 2: Create a Dockerfile with Build Arguments

Use a Dockerfile to define how the build-time variables will be injected. Below is a basic example; for a more complex setup, check the linked GitHub repository at the end of the article:

# Stage 1: Build Angular app
FROM node:lts-alpine AS build

# Set working directory
WORKDIR /app

# Copy package files and install dependencies
COPY package.json package-lock.json ./
RUN npm install

# Copy source code
COPY . .

# Define build arguments and use them during the build
ARG API_KEY
ARG CONFIGURATION=production
ENV API_KEY=$API_KEY
ENV CONFIGURATION=$CONFIGURATION

RUN npm run build -- --configuration=$CONFIGURATION --define apiKey=\"$API_KEY\" --define configuration=\"$CONFIGURATION\"

# Stage 2: Serve the app using Nginx
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist /usr/share/nginx/html

The new --define option passes the variable to the bundler and replaces the placeholder values we created in the first step.

Step 3: Pass Build-Time Variables in Docker Compose

Create a docker-compose.yml file to pass values for the build arguments defined in the Dockerfile:

services:
  webapp:
    build:
      context: .
      args:
        - API_KEY=YOUR_PRODUCTION_API_KEY
        - CONFIGURATION=production
    ports:
      - "4200:80"
    environment:
      - NODE_ENV=production

This setup ensures that YOUR_PRODUCTION_API_KEY and production are injected into your Angular build process during container creation.

Step 4: Access Build-Time Variables in Your Application

In your Angular application, use the injected variables like this:

import { Component } from '@angular/core';
import { environment } from '../environment';

@Component({
  selector: 'app-root',
  template: `
    <div class="container">
      <h1>Angular Environment Variables Demo</h1>
      <p>Configuration: {{ configuration }}</p>
      <p>API Key: {{ apiKey }}</p>
    </div>
  `,
})
export class AppComponent {
  protected readonly apiKey = environment.apiKey;
  protected readonly configuration = environment.configuration;
}

Step 5: Configure Nginx for Production

Finally, configure Nginx to serve your Angular application:

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Place this configuration file (nginx.conf) in your project directory, and it will be included in the Docker image during the build process.

Benefits of Combining Docker and Build-Time Variables

• Security: Embed secrets like API keys during the build process, avoiding exposure in source code or runtime environments.

• Environment Flexibility: Switch environments by modifying Docker Compose files without hardcoding changes.

• Streamlined CI/CD: Automate builds for multiple environments, enhancing deployment efficiency.

Conclusion

With Angular 19’s build-time variables and Docker, you can streamline application builds, manage environment-specific configurations effortlessly, and enhance security. This combination is essential for developers looking to create scalable and flexible deployment pipelines. As promised I created a GitHub repository with a extended Docker file that can be found here: https://github.com/danielsogl/ng-env-docker-demo

Try Dockerizing your Angular application today and share your experiences!

Functional Programming in Angular: Exploring inject and Resources

Daniel Sogl — Wed, 04 Dec 2024 19:41:52 +0000

Angular’s evolving ecosystem is shifting toward a more functional and reactive programming paradigm. With tools like Signals, the Resource API, and the inject function, developers can simplify application logic, reduce boilerplate, and enhance reusability.

This blog post explores how Angular’s modern features empower developers to handle asynchronous logic in a clean, declarative, and reactive way.

Key Benefits of Angular’s Functional Features

Reusable Functions with Dependency Injection: The inject function allows developers to create standalone functions that seamlessly integrate with Angular's dependency injection system. This decouples business logic from components and services, making functions reusable across the application.
Simplified State Management: Automatically handle loading, success, and error states.
Enhanced Reactivity: Automatically update data when dependencies change.
Reduced Boilerplate: Focus on the logic, not manual subscriptions or lifecycle management.
Improved Readability: Declarative templates make UI state transitions easy to understand.

Step 1: The API and Data Model

For this example, we’ll fetch posts from a REST API. Each post has the following structure:

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

The base URL for the API is provided via an InjectionToken:

import { InjectionToken } from '@angular/core';

export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
  providedIn: 'root',
  factory: () => 'https://jsonplaceholder.typicode.com',
});

Step 2: Define Data Fetching Functions

1. Traditional RxJS-Based Approach

The following function fetches a post by its ID using Angular’s HttpClient:

import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
import { Observable } from 'rxjs';
import { API_BASE_URL } from '../tokens/base-url.token';
import { Post } from './post.model';

export function getPostById(postId: number): Observable<Post> {
  const http = inject(HttpClient);
  const baseUrl = inject(API_BASE_URL);

  return http.get<Post>(`${baseUrl}/posts/${postId}`);
}

To use this function in a component, you can bind it to an observable and display the result with the async pipe:

import { AsyncPipe, JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { getPostById } from './shared/posts.inject';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe, JsonPipe],
  template: `
    @if (post$ | async; as post) {
      <p>{{ post | json }}</p>
    } @else {
      <p>Loading...</p>
    }
  `,
})
export class AppComponent {
  private readonly postId = signal(1);

  protected readonly post$ = getPostById(this.postId());
}

Limitations

Reactivity Issues: Signal changes (e.g., postId) don’t automatically trigger a new fetch.
Manual Error Handling: You must write custom logic for loading and error states.

2. Signal-Based Resource API Approach

The Resource API simplifies reactivity and state management. Here’s a function that uses the Resource API:

import { inject, resource, ResourceRef, Signal } from '@angular/core';
import { API_BASE_URL } from '../tokens/base-url.token';

export function getPostByIdResource(postId: Signal<number>): ResourceRef<Post> {
  const baseUrl = inject(API_BASE_URL);
  return resource<Post, { id: number }>({
    request: () => ({ id: postId() }),
    loader: async ({ request, abortSignal }) => {
      const response = await fetch(`${baseUrl}/posts/${request.id}`, {
        signal: abortSignal,
      });
      return response.json();
    },
  });
}

This approach:

Automatically reloads data when postId changes.
Handles loading, error, and success states declaratively.

In a component:

import { JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { getPostByIdResource } from './shared/posts.inject';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [JsonPipe],
  template: `
    @if (post.isLoading()) {
      <p>Loading...</p>
    } @else if (post.error()) {
      <p>Error: {{ post.error() }}</p>
    } @else {
      <p>{{ post.value() | json }}</p>
    }
  `,
})
export class AppComponent {
  private readonly postId = signal(1);

  protected readonly post = getPostByIdResource(this.postId);
}

Key Features of the Resource API

Declarative State Management

The Resource API automatically manages states like loading, error, and success. This removes the need for custom flags and ensures cleaner templates.

Reactivity

The Resource API is tightly integrated with Signals. Changes to a Signal automatically trigger the loader function, ensuring that your UI always reflects the latest data.

Error Handling

Errors are centralized and exposed via .error(), simplifying error management in templates.

Automatic Lifecycle Management

The API cancels ongoing requests when dependencies (e.g., postId) change, preventing race conditions and stale data.

RxJS vs Resource API: A Quick Comparison

Feature	RxJS (Observable)	Resource API (Signal)
State Management	Manual	Automatic (`loading`, `error`)
Reactivity	Requires custom setup	Built-in
Error Handling	Manual	Declarative
Lifecycle Handling	Requires cleanup	Automatic

Conclusion

Angular’s inject function and Signal-based Resource API represent a leap forward in simplifying asynchronous logic. With these tools, developers can:

Decouple business logic from components.
Write reusable functions that integrate seamlessly with Angular’s dependency injection system.
Eliminate boilerplate for state management.
Build reactive and declarative applications with ease.

The Resource API, in particular, is ideal for modern Angular projects, providing automatic reactivity and declarative state handling. Start exploring these features today and take your Angular development to the next level!

From Flaky to Flawless: Angular API Response Management with Zod

Daniel Sogl — Thu, 25 Apr 2024 14:43:45 +0000

As a front-end developer, this has surely happened to you before. You start your computer in the morning, launch your Angular project, open http://localhost:4200 and are greeted by several runtime errors that weren't there the previous day. Your date pipe returns an 'Invalid Date' string and some components don't even render anymore. After your unit tests are still green and you haven't changed any other code since the last workday, there's only one culprit left: the backend. To save you work in the future and find faulty backend responses that were not agreed with you, I will show you a simple, but powerful solution with zod in this blog post.

Zod 101: An Introduction to Schema Validation in TypeScript

Zod is an open-source schema declaration and validation library that emphasizes TypeScript. It can refer to any data type, from simple to complex. Zod eliminates duplicative type declarations by inferring static TypeScript types and allows easy composition of complex data structures from simpler ones. It has no dependencies, is compatible with Node.js and modern browsers, and has a concise, chainable interface. Zod is lightweight (8kb when zipped), immutable, with methods returning new instances. It encourages parsing over validation and is not limited to TypeScript but works well with JavaScript as well.

Let's examine a simple example of how Zod helps us define and validate schemas.

import { z } from "zod";

// creating a schema for strings
const mySchema = z.string();

// parsing
mySchema.parse("tuna"); // => "tuna"
mySchema.parse(12); // => throws ZodError

// "safe" parsing (doesn't throw error if validation fails)
mySchema.safeParse("tuna"); // => { success: true; data: "tuna" }
mySchema.safeParse(12); // => { success: false; error: ZodError }

By using the safeParse function, we can return responses from the backend to our components while displaying any validation errors.

Defining API Response Models with Zod

Now, let's examine a schema that defines the response model from the backend. For this example, I'll use the JSONPlaceholder API.

import { z } from 'zod';

export const CommentSchema = z.object({
  postId: z.number(),
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  body: z.string(),
});

export type Comment = z.infer<typeof CommentSchema>;

As illustrated, I've defined the Zod schema as an exported constant, which can be used later in a function that's yet to be defined. Additionally, I've exported a type using the infer function, allowing it to be used in your Angular code without referencing the Zod library.

How to Validate API Responses Using Zod in Angular

After creating our zod schema and exporting the type based on that schema, we can construct a helper function to validate our API responses. Given that the Angular HttpClient returns Observables, it's logical to create a custom rxjs operator function.

import { isDevMode } from '@angular/core';
import { map, pipe } from 'rxjs';
import { z } from 'zod';

export function verifyResponse<T extends z.ZodTypeAny>(zodObj: T) {
  return pipe(
    map((response) => {
      if (isDevMode()) {
        const result = zodObj.safeParse(response);

        if (!result.success) {
          console.error(result.error);
        }
      }
      return response as z.infer<T>;
    })
  );
}

The verifyResponse function takes a Zod object as an argument. It uses the pipe function from RxJS to create a new function that maps responses to a validation process.

If the Angular application is in development mode (isDevMode()), it attempts to parse the response using Zod's safeParse method. If parsing is unsuccessful, it logs the error to the console. Although you could use the parse function to validate the response model, this would throw an error that needs to be caught. To make identifying incorrect response models simpler, I recommend using the error handling as demonstrated.

Finally, regardless of whether it's in development mode or not, it returns the unmodified response. This allows any components or services using this helper function to behave as if it wasn't there when not in development mode.

Integrating Schema Definitions and Validation in Angular Services

We can now bring everything together and define our Angular service. This service will call our backend and validate our response model. Thanks to Zod, the response is automatically typed based on the given schema. However, it's always good practice to explicitly define the return type.

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { CommentSchema, Comment } from '../models/comment.model';
import { verifyResponse } from '../utils/schema.validator';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class CommentsService {
  private readonly http = inject(HttpClient);

  public getCommentById(id: number): Observable<Comment> {
    return this.http
      .get<Comment>('https://jsonplaceholder.typicode.com/comments/' + id)
      .pipe(verifyResponse(CommentSchema));
  }
}

To illustrate the error output, I modified the schema to assume incorrect property types.

schema.validator.ts:12 ZodError: [
  {
    "code": "invalid_type",
    "expected": "number",
    "received": "string",
    "path": [
      "body"
    ],
    "message": "Expected number, received string"
  }
]

Conclusion

In conclusion, utilizing Zod for API response validation can significantly improve the robustness of your Angular application. It allows you to catch and handle unexpected or incorrect backend responses before they cause runtime errors in your application. By integrating Zod with Angular, you can ensure that your frontend codebase is more resilient and less prone to bugs due to faulty backend responses. Remember, it's always better to prevent errors than to debug them!

Streamlining Coverage Reports in SonarCloud with an NX Monorepo

Daniel Sogl — Tue, 16 Apr 2024 16:04:20 +0000

After setting up your nx-workspace project, including your apps and libraries, you also want to use the power of nx-affected commands and the nx cloud. Perhaps you, like me, want also to define multiple code quality gates, including coverage reports for new and existing code in your repository. To handle that goal, I’m using SonarCube or SonarCloud for all of my professional projects.

SonarCloud makes it possible to auto-scan your repositories without setting up a CI pipeline. All you have to do is create a free SonarCloud account, connect your GitHub project, and commit and push the sonar config file. But with this approach, it is impossible to generate a coverage report for your repository. To handle this issue, Sonar provides a GitHub action to upload your generated coverage report as part of your defined quality gates.

Necessary Steps to Enhance Code Quality Reporting

To solve this problem, the following steps are necessary:

run the test command on all nx-projects without using affected
add a custom script to merge coverage reports into one file
create a sonar-project.properties file and define the coverage report path
upload the coverage report to SonarCloud using the official Sonar GitHub action.

Step 1: Running Tests Across All Projects

The first step is kind of simple. nx provides the run-many command to run a specified target on all nx-projects. In the past, I also had the best experience with Sonar using lcov reports.

npx nx run-many --all --target=test --parallel=3 --ci --code-coverage --coverageReporters=lcov

Step 2: Merging Coverage Reports

The second step is also not that complicated. I wrote a simple JavaScript function to loop through the coverage folder and merge the project lcov files into one single file. The script is placed inside the tools/scripts folder.

const glob = require('glob');
const fs = require('fs');
const path = require('path');

const getLcovFiles = function (src) {
  return new Promise((resolve) => {
    glob(`${src}/**/lcov.info`, (error, result) => {
      if (error) resolve([]);
      resolve(result);
    });
  });
};

(async function () {
  const files = await getLcovFiles('coverage');
  const mergedReport = files.reduce((mergedReport, currFile) => (mergedReport += fs.readFileSync(currFile)), '');
  await fs.writeFile(path.resolve('./coverage/lcov.info'), mergedReport, (err) => {
    if (err) throw err;
    console.log('The file has been saved!');
  });
})();

Step 3 & 4: Configuring and Uploading the Coverage Report

I added the merge command to my nx-cloud GitHubAction file. This will add the executed command to the nx-cloud report posted by nx in all pull requests.

I also added the coverage report as an artifact to use it later with the Sonar GitHub action. You can take a look at my configuration here.

Based on your Sonar configuration, your config file will differ from mine. The demo project’s related config file looks like this.

sonar.projectKey=danielsogl_nx-sonar-example
sonar.organization=danielsogl
sonar.host.url=https://sonarcloud.io

# This is the name and version displayed in the SonarCloud UI.
#sonar.projectName=nx-sonar-example
#sonar.projectVersion=1.0

# Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
#sonar.sources=.

# Encoding of the source code. Default is default system encoding
sonar.sourceEncoding=UTF-8

sonar.test.inclusions=**/*.spec.ts
sonar.typescript.lcov.reportPaths=coverage/lcov.info

After all CI steps are executed, the Sonar action will download the previously created coverage report artifact and upload it.

When I now create a new pull request, Sonar will not only check my code quality gates. Sonar now also checks my new checked-in code and its coverage.

I created a public demo repository where you can take a closer look at my solution: https://github.com/danielsogl/nx-sonar-example

DEV Community: Daniel Sogl

The Skill AI Adoption Actually Requires: Leadership

What Social Media Gets Wrong

The Leadership Analogy

What Agent Leadership Means

Building Trust Through Structure

The New Skillset That Actually Matters

Conclusion

Spec Driven Development (SDD) - A initial review

Introduction to Spec Driven Development

Spec Driven Development Phases

1. Specify

2. Plan

3. Tasks

4. Implement

Introduction to GitHub Spec Kit

Spec Kit Installation

Project setup

Spec Kit Files Overview

Prompt Files

Memory Directory

Scripts Directory

Templates Directory

AI Tool Integration

Creating Your First Specification

Creating a Technical Plan

Defining Implementation Tasks

Current Limitations and Considerations

The Road Ahead

Conclusion

Gemini Code Assist for GitHub: Automated Code Reviews with Gemini

What is Gemini Code Assist for GitHub?

Key Features of Gemini Code Assist

1. Automated Pull Request Reviews

2. Standard Review Patterns

3. Code Context Awareness

4. GitHub Actions Integration

5. Multiple Feedback Formats

How Gemini Code Assist Reviews Pull Requests

1. Pull Request Summary

2. Code Review Findings Summary

3. Detailed Code Reviews

Customizing Reviews with the .gemini Directory

Setting up the .gemini Directory

Example Directory Structure

Example config.yaml

Example styleguide.md

Getting Started with Gemini Code Assist

Future Outlook

Conclusion

Generating and Storing Google Gemini Embeddings with Vercel AI SDK and Supabase

Why Vercel AI SDK and Supabase?

Prerequisites

Step 1: Setup

Step 2: Prepare Supabase Database

Step 3: Generate, Optimize (Optional), and Store Embeddings

Step 4: Implement Semantic Search

Alternative Approach: Automatic Database-Driven Embeddings

How Database-Driven Embeddings Work

Implementation Example

Conclusion

GitHub Copilot — Agent Mode Review

What is GitHub Copilot’s Agent Mode?

Installation

Use Cases for Copilot Agent

Test #1: Building a TodoMVC App with Angular

Test #2: Enhancing an Existing Next.js App

Test #3: Code Review and Unit Testing in a Next.js Project

Preliminary Verdict

The AI-Enhanced Developer: Maximizing Efficiency with Coding Agents

The Rise of AI in Software Development

Understanding AI Agents and Their Role

AI-Powered Coding Tools: What’s Available?

1. AI-Driven Prototyping Tools

2. AI Coding Assistants and IDE Enhancements

Practical Use Cases of AI Coding Tools

1. Automating Repetitive Coding Tasks

2. Improving Code Quality and Consistency

3. Accelerating Prototyping and MVP Development

4. Enhancing Debugging and Code Reviews

Customizing Reviews with the `.gemini` Directory

Setting up the `.gemini` Directory

Example `config.yaml`

Example `styleguide.md`

What is `signalMethod`?

Why Choose `signalMethod`?

A Note on When to Use `signalMethod`