DEV Community: Gergely Szerovay

🤖 Angular AI skills, tools and development

💎Angular Gems of February, 2026

📰 Angular Signal Forms Essentials

By Kevin Kreuzer

📰 Goodbye ControlValueAccessor, Hello Signals-powered FormValueControl!

By Enea Jahollari

📰 How to migrate your Angular app to Zoneless

By Francesco Borzì

📰 How We’re Surviving 600+ Legacy Angular Components While Migrating to Next.js, GraphQL, and a Monorepo

By ujja

📰 Security Advisory: Addressing Recent Vulnerabilities in Angular

👨‍💻About the author

My name is Gergely Szerovay, I worked as a data scientist and full-stack developer for many years, and I have been working as frontend tech lead, focusing on Angular based frontend development. As part of my role, I'm constantly following how Angular and the frontend development scene in general is evolving. To share my knowledge, I started the Angular Addicts monthly newsletter and publication in 2022, so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered. Let me know if you would like to be included as a writer. Let’s learn Angular together! Subscribe here 🔥

Angular has evolved very rapidly over the past few years, and in the past year, with the rise of generative AI, our software development workflows have also evolved rapidly. In order to closely follow the evolution of AI-assisted software development, I decided to start building AI tools in public, and publish my progress on AIBoosted.dev. Join my on this learning journey: Subscribe here 🚀

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

📨 Submit your Angular resource

Have you found or written an interesting Angular-related article, tweet or other resource lately? Please let me know here in the comments or send me a DM on Twitter! I might feature it in the next Angular Addicts issue!

Angular Addicts #46: Angular 21.1, Skills, Signal Forms & more

Gergely Szerovay — Tue, 10 Feb 2026 08:12:31 +0000

👋Hey fellow Angular Addict

This is the 46th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the 45th, 44th and 43rd)

📢 Release announcements

📰 What's new in Angular 21.1?

💎Angular Gems of January, 2026

📰 Angular Skills: Agent Skills for AI-Assisted Development

By Brandon Roberts

📰 Angular Signal Forms Config

By Kevin Kreuzer

📰 FormValueControl: Deep Dive into Angular Signal Forms Custom Controls

By Netanel Basal

📰 Accessibility-First Angular with Angular Aria Combobox

By Adrian Romanski

📰 Gemini and Angular, Part II: Creating Generative UIs

📰 Configure Tailwind v4 with Angular in an Nx Monorepo

By Juri Strumpflohner

📰 Angular: MatPaginator Custom Styling

By Eduard Krivanek

📰 Introducing Angular Toolbar

By Alfredo Perez

📰 Implement Enter/Exit Animations with Angular CDK Overlay

By Dharmen Shah

👨‍💻About the author

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

📨 Submit your Angular resource

Angular Addicts #45: Signal Form guides, AI integrations & more

Gergely Szerovay — Tue, 13 Jan 2026 08:05:19 +0000

👋Hey fellow Angular Addict

This is the 45th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the 44th, 43rd and 42nd)

📢 Release announcements

📢 Announcing NgRx 21: Celebrating a 10 Year Journey with a fresh new look and @ngrx/signals/events

By Tim Deschryver

📢 Nx 22.3 Release: Angular 21 Support, tsgo Compiler, and Prettier v3

By Philip Fulcher

📢 Migration guide to PrimeNG v21

🤖 AI & Angular

🤖 Building an Angular Compiler using AI with Google Gemini

By Brandon Roberts

🤖 Generative UI for AI Assistants: Component Control with Hashbrown

🤖 Building an AI-Powered Alt Text Generator with Angular, Firebase AI Logic, and Gemini 3

By Connie Leung

🤖 Using AI with Angular — 2025 update

🤖 Streaming AI Speech with Gemini 2.5 Flash TTS, Angular, and Firebase

By Connie Leung

📋 Signal Forms

📋 Signal Forms Guide

By Stefanos Lignos

📋 Signal Forms in Angular 21 - Complete Guide

By Mateusz Stefańczyk

💎 Angular Gems of December, 2025

📰 Angular Signals That Will Replace Half Your RxJS Code in 2025

By Piyali Das

📰 9 Architecture Mistakes That Quietly Kill Large Angular Codebases (And How DDD Fixes Them)

By Karol Modelski

📰 Angular pipes: Time to rethink

By Vyacheslav Borodin

📰 Framework-agnostic internationalization with Angular's localize tools and Nx

By Edouard Bozon

📰 The Magic of deepSignal: How Angular Signal Forms Enable True Nested Reactivity

By Netanel Basal

📰 Angular tests with Vitest browser mode

By Jean-Baptiste Nizet

👨‍💻About the author

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

📨 Submit your Angular resource

Angular Addicts #44: Angular 21, Signal Forms, Vitest, Chat assistant integration & more

Gergely Szerovay — Tue, 09 Dec 2025 08:14:06 +0000

👋Hey fellow Angular Addict

This is the 44th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the 43rd, 42nd and 41st)

📢 Release announcements

📢 Announcing Angular v21

By Jens Kuehlers and Mark “Techson” Thompson

📢 Announcing AnalogJS 2.0

By Brandon Roberts

💎Angular Gems of November, 2025

📰 Angular Signal Forms

📰 Angular SSR: Optimize SEO with rendering Meta Tags, OG Tags and Social Media Previews - Angular.love

By Dawid Kostka

📰 The Angular Resource API

By Preston Lamb

📰 Going Zoneless: Why Your Angular ErrorHandler Went Silent — and How to Fix It

By Ricky Lopes

📰 Understanding Nx's Affected Graph vs. Cache Hits

By Edouard Bozon

📰 An AI Assistant for your Angular Application: Tool Calling in the Frontend with Hashbrown

📰 Gemini and Angular, Part II: Structured Outputs and Tool calls

📰 Angular Signal Forms — Set-up and validation rules

📰 Handling Time and Mock Clocks in Tests

By Andrew Scott

📰 A Quick Vibe Code Experiment with Angular's MCP Server

By Alisa Duncan

👨‍💻About the author

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

📨 Submit your Angular resource

Angular Addicts #43: Vitest, Signal Forms, Animations & more

Gergely Szerovay — Tue, 11 Nov 2025 07:34:56 +0000

👋Hey fellow Angular Addict

This is the 43rd issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the 42nd, 41st and 40th)

💎Angular Gems of October, 2025

📰 Dynamic Forms: Building a Form Generator with Signal Forms

📰 Angular v21 Goes Zoneless by Default: What Changes & Why It’s Faster

By Enea Jahollari

📰 Angular's Testing Revolution: Vitest, Fake Timers & Testronaut

By Rainer Hahnekamp

📰 Custom Angular Form Controls Made Simple with Signal Forms

By Elisa Schnabel

📰 20 Ways to Make Your Angular Apps Run Faster | Part 4: Build and Diagnostics

By Alejandro Cuba Ruiz

This is the 4th part of the "20 Ways to Make Your Angular Apps Run Faster" series:

📰 Building an AI Creative Suite with Angular, Gemini, Imagen and Veo

By Connie Leung

📰 How to animate transitions with Angular?

📰 Angular support for generating apps in Google AI Studio is now available

By Mark (Techson) Thompson

👨‍💻About the author

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

📨 Submit your Angular resource

Is This the Future of E2E Testing? How AI Automates Browser Tests from Plain English Requirements

Gergely Szerovay — Thu, 30 Oct 2025 10:16:16 +0000

End-to-end testing has always been the gold standard for verifying that your application actually works the way users experience it. But let's be honest: writing and maintaining E2E tests is often a thankless job. Flaky selectors, timing issues, brittle test code that breaks with every UI change, the pain points are real and numerous.

What if instead of writing test code, you could simply describe what you want to test in plain language, and have an AI assistant execute those tests for you, then generate a detailed report of what happened? That's exactly what becomes possible when you combine the Chrome DevTools MCP server with AI-powered testing workflows.

This is Part 2 of our Chrome DevTools MCP series. In Part 1 (Chrome DevTools MCP Server Guide), we explored the fundamentals of the Chrome DevTools MCP server and its tools for browser automation. Now, we're going to put those tools to work in a complete, practical workflow: taking a product requirements document, generating test scenarios, executing them automatically, and producing comprehensive test reports, all orchestrated by your AI assistant.

By the end of this article, you'll understand how to transform requirements documents into executable test scenarios and leverage AI to execute Gherkin-style tests via browser automation.

Let's dive in with a real example: a Tic-Tac-Toe game. I've generated both React and Angular versions of this demo app in the companion GitHub repository, so you can follow along with whichever framework you prefer. The repository contains everything you need: the complete PRD, architecture documentation, generated Gherkin scenarios, and test reports.

The Traditional E2E Testing Workflow (The Old Way)

Before we explore the AI-assisted approach, let's acknowledge how E2E testing typically works and why it's often neglected. The traditional workflow starts with writing specifications or a PRD to document what the application should do. Then you manually create test scenarios by thinking through user flows and edge cases. Next comes the real work: writing Puppeteer, Playwright, or Cucumber Gherkin scripts to translate those scenarios into code, followed by hours of debugging flaky selectors and timing issues. Finally, you maintain that test code as the UI inevitably changes, updating selectors, refactoring tests, and fixing breakages.

Introducing the AI-Assisted Testing Workflow

Here's what changes when you let AI orchestrate your E2E testing using the Chrome DevTools MCP server:

The Five-Step Process

Document requirements: PRD, you're doing this anyway
Generate Gherkin scenarios: AI translates requirements into test scenarios
AI executes tests: via Chrome DevTools MCP, no test code to write or maintain
AI generates detailed test reports
Iterate and maintain: Update requirements and regenerate tests as needed

Why This Works

The key insight is that we're working in natural language throughout the entire process. Your requirements get written in natural language (PRD), then translated into natural language test scenarios (Gherkin). The AI orchestrates test execution by understanding these natural language instructions, and finally generates test reports in natural language that anyone can read. There's no translation layer into brittle test code, no fighting with selectors, just clear descriptions of what should happen, executed and verified automatically.

Let's see this in action with our Tic-Tac-Toe example.

Step 1: Foundation: The Product Requirements

Every good testing strategy starts with clear requirements. For our Tic-Tac-Toe game, we have a comprehensive Product Requirements Document (PRD) that lays everything out. You can find the complete PRD in the GitHub repository.

The Product Requirements Document (PRD)

Our PRD covers everything we need to know about how the game should behave:

User Stories organized by category:

Core Gameplay: Placing marks, seeing turns, winning, draws
Game Management: New game, undo, move counter
User Experience: Hover effects, mobile support, accessibility

Functional Requirements (FR-1 through FR-19) that specify exact behaviors:

FR-1: The game must support two players: X and O
FR-2: Player X always goes first
FR-3: Players alternate turns
FR-4: A player wins by placing three marks in a row
FR-5: The game ends in a draw if all cells are filled
FR-6: Cells cannot be overwritten once marked
...and so on

Non-Functional Requirements covering performance, usability, and accessibility:

NFR-8: All interactive elements must have proper ARIA labels
NFR-9: Game must be fully keyboard navigable
NFR-10: Screen readers must be able to announce game state

Why This Documentation Matters

This PRD serves as the single source of truth for both development and testing. When requirements are this clear and structured, AI can extract testable behaviors, generate appropriate test scenarios, understand the expected outcomes, and verify that the implementation matches the specification.

The investment in writing good requirements pays dividends throughout the entire development lifecycle, but especially in testing. Think of it as building a solid foundation, everything else gets easier when you start with clarity.

Step 2: From Requirements to Gherkin Scenarios

Gherkin is a business-readable, domain-specific language for describing software behaviors without detailing how those behaviors are implemented. It uses a simple structure:

Feature: Description of the feature
  Scenario: Description of a specific behavior
    Given [initial context]
    When [action taken]
    Then [expected outcome]

If you're new to Gherkin, the Gherkin reference has everything you need to know about the syntax and best practices. But don't worry, you'll pick up the basics just by following along with our examples.

The Translation Process

Here's the simple prompt I used to transform our PRD into executable test scenarios:

Create Gherkin feature files based on the PRD (Product Requirements Document) located at:
`tic-tac-toe-react/src/features/tic-tac-toe/PRD.md`

Save the generated feature files to the following directory:
`e2e`

Additionally, create a README.md file in the same `e2e` folder that explains:
- How each feature file maps to specific PRD requirements
- The relationship between test scenarios and product specifications

That's all it took. The AI read through the PRD, identified testable behaviors, and organized them into four focused feature files covering everything from basic gameplay to accessibility.

Let me show you how it translates requirements into Gherkin. The following examples are from the core-gameplay.feature file in our repository. Take this functional requirement:

From this requirement:

FR-2: Player X always goes first

To this Gherkin scenario:

Scenario: First move is always Player X
  When the game starts
  Then the status should display "Player X's turn"
  And all cells should be empty
  And the move counter should show "0"

Or this user story:

From this user story:

As a player, I want to click on an empty cell to place my mark, so I can make my move

To this Gherkin scenario:

Scenario: Player places mark in empty cell
  When Player X clicks on cell 0
  Then cell 0 should display "X"
  And it should be Player O's turn
  And the move counter should show "1"

Pretty straightforward, right? The AI maintains the intent of each requirement while converting it into a testable format that anyone on your team can read and understand.

For our Tic-Tac-Toe game, the AI organized everything into four feature files covering core gameplay, game outcomes, controls, and accessibility. Rather than walk through all of them in detail, let me show you what the core gameplay scenarios look like, this will give you a good feel for how comprehensive these tests become.

The Traceability Matrix

One of the most valuable outputs is the traceability matrix that links each requirement to its corresponding test scenarios. You can see the complete traceability matrix in the repository:

Requirement ID	Test Scenario	Feature File	Status
FR-1	Two players support	core-gameplay.feature	✅
FR-2	X goes first	core-gameplay.feature	✅
FR-3	Turn alternation	core-gameplay.feature	✅
FR-4	Win detection	game-outcomes.feature	✅
FR-5	Draw detection	game-outcomes.feature	✅
NFR-8	ARIA labels	accessibility.feature	✅
NFR-9	Keyboard navigation	accessibility.feature	✅

This matrix ensures complete test coverage and makes it easy to verify that every requirement has been tested.

Step 3: AI Executes Tests Using Chrome DevTools MCP

Now comes the magic: executing these Gherkin scenarios automatically using the Chrome DevTools MCP server. Let's walk through the actual conversation that orchestrated the entire test suite execution.

The Initial Request

Before running tests, you need your application running locally. In our case, we have both React and Angular implementations available in the GitHub repository. To start the React version, run npm start from the tic-tac-toe-react directory, it'll launch on port 4305. For Angular, navigate to tic-tac-toe-ng and use ng serve. Once your app is running, you can begin testing.

Here's the prompt I used to kick off the test execution:

I have a React app located in the `tic-tac-toe-react` directory that's running on http://127.0.0.1:4305/.

Please use the Chrome DevTools MCP server to:
1. Execute the test steps defined in `e2e/core-gameplay.feature`
2. Generate a test report and save it to `e2e/core-gameplay.report.md`

For each Gherkin step in the report, include a text result indicating whether it passed or failed (and any relevant details).

That's it. No test code to write.

Advanced Approach: Using Subagents for Large Test Suites

For complex applications with many test scenarios, there's a more scalable approach using subagents. Instead of executing all test steps in a single AI conversation context, you can delegate each scenario to its own subagent. The main orchestrator agent maintains only the Gherkin file, coordinates subagent executions, and generates the final consolidated report, while each subagent independently runs its assigned scenario's steps.

This architecture provides significant benefits for large test suites. The main agent's context stays clean and focused on orchestration rather than getting cluttered with hundreds of detailed test execution steps. Each scenario executes in isolation with its own fresh context, preventing context pollution and token limit issues. Most importantly, this approach allows you to run comprehensive test suites with many scenarios and steps without hitting context length limitations.

Here's how you structure the prompt for subagent-based testing. The following example is for the Angular app and GitHub Copilot:

I have an Angular app located in the `tic-tac-toe-ng` directory 
that's running on http://127.0.0.1:4200/.

Please use the Chrome DevTools MCP server to execute the test 
scenarios defined in `e2e/core-gameplay.feature`.

For each scenario in the feature file:
1. Use `runSubagent` to execute the test steps for that specific scenario
2. Each subagent should test the scenario independently and return 
   a detailed text result indicating whether it passed or failed, including:
   - Pass/fail status for each Gherkin step in the scenario
   - Any relevant details, observations, or error messages
   - Verification data (e.g., DOM state, element content, computed styles)

After all subagents complete:
3. Aggregate all the scenario results and generate a comprehensive test report
4. Save the final report to `e2e/core-gameplay.report-ng-subagents.md`

The report should include the pass/fail status and details for 
each scenario returned by the subagents.

This subagent approach becomes essential as your test suite grows beyond a dozen scenarios or when individual scenarios involve complex multi-step interactions.

How AI Interprets Gherkin Steps

The AI reads the Gherkin scenarios and translates them into Chrome DevTools MCP tool calls. Let's look at a concrete example from the actual test execution:

Example: Preventing Cell Overwrites

Gherkin:

Given Player X clicks on cell 4
When Player O attempts to click on cell 4
Then cell 4 should still display "X"
And it should still be Player O's turn

AI's internal process:

1. navigate_page to http://127.0.0.1:4305/
2. take_snapshot → Find cell 4 (uid: "48_8")
3. click uid "48_8"
4. take_snapshot → Verify cell 4 now shows "Cell with X" (disabled)
5. click uid "49_8" → Attempt to click again
   Result: Click timed out (element disabled, click prevented)
6. take_snapshot → Verify state unchanged:
   - Cell 4: Still "Cell with X"
   - Status: Still "Current player: O"
   - Move counter: Still "Moves: 1"

The insight: The click timeout actually confirms the test passed! The cell is disabled, so the click cannot complete, which is exactly the expected behavior.

The Power of Accessibility-Driven Testing

Notice how every test relies on the accessibility tree rather than implementation details. This approach provides remarkable stability since accessibility properties remain unchanged even when you refactor CSS or restructure DOM elements. Tests verify what users actually experience rather than just confirming that certain classes are applied. When your accessibility tree is well-structured, you're simultaneously ensuring your app is accessible to screen reader users. The snapshots themselves are immediately understandable, showing "Button", "Empty cell", "Cell with X" instead of cryptic selectors or implementation details that make sense to humans.

Step 4: The Test Report: Automated Documentation

After executing all tests, the AI generates a comprehensive test report in Markdown format. Let's examine the structure and value of this automatically generated documentation. You can view the complete test report in the repository.

The report opens with a summary table, this immediately tells you the health of your application at a glance.

For each Gherkin step, the report includes:

Pass/Fail status (✅ or ❌)
Detailed result description explaining what was observed
Element UIDs referenced during the test
Evidence from Chrome DevTools interactions

Limitations and Considerations

While this AI-assisted testing approach offers significant advantages, let's be realistic about where it fits in your testing strategy.

Standardization for Production Use

For real-world usage in production environments, you'll want to establish consistency across your test artifacts. This means defining report templates that standardize how test results are formatted and presented, making it easier to compare results across different test runs and share reports with stakeholders. You'll also want to establish a coding standard for Gherkin files that defines naming conventions, step patterns, and structural guidelines, ensuring that AI-generated scenarios follow your team's conventions and integrate smoothly with your existing test documentation.

These standards become especially important when multiple team members are generating tests or when you're maintaining a large test suite over time. Consider creating example templates and style guides that you can reference in your prompts to the AI.

Requirements Are Your Foundation

The quality of your tests directly reflects the quality of your requirements. Vague or incomplete PRDs lead to vague or incomplete tests, there's no magic here. This approach shines when your requirements are specific, testable, and well-structured. The good news? The discipline of writing better requirements benefits your entire project, not just testing.

Complex Interactions May Need Detailed Steps

Simple interactions like clicking buttons and filling forms work automatically. But complex scenarios, think multi-step wizards, drag-and-drop operations, or dynamic content loading, often need more granular Gherkin steps. Instead of "When the user completes the checkout flow," you'll want to break it down: "When the user adds items to cart, And navigates to checkout, And fills in shipping address..." The AI can handle complexity, but it needs clear, step-by-step instructions.

Human Review Still Matters

AI can generate tests from your documented requirements, but it won't catch missing requirements, undocumented edge cases, or critical integration points you forgot to mention. A human reviewer should verify test coverage, ensure both happy paths and error cases are tested, and confirm that scenarios match real-world usage patterns.

Complement, Don't Replace

E2E tests through Chrome DevTools MCP excel at verifying user-facing behaviors in the actual browser. They complement but don't replace unit tests for isolated functions, integration tests for component interactions, or API tests for backend functionality. Think of this as the top layer of your testing pyramid or thropy, you still need the foundation underneath.

About the Author

My name is Gergely Szerovay, and I've worked as a data scientist and full-stack developer for many years. Currently, I work as a frontend tech lead focusing on Angular-based development. As part of my role, I'm constantly following how Angular and the frontend development scene in general is evolving.

To share my knowledge, I started the Angular Addicts monthly newsletter and publication in 2022, sending subscribers the best resources each month. Whether you're a seasoned Angular developer or just getting started, I've got you covered.

In the past year, with the rise of generative AI, our software development workflows have evolved rapidly. To closely follow this evolution, I decided to start building AI tools in public and publish my progress on AIBoosted.dev.

Join me on this learning journey:

🔥 Subscribe to Angular Addicts
🚀 Subscribe to AIBoosted.dev

Connect with me:

Learn more about Angular, TypeScript, React, and how to build AI-assisted development workflows that make you more productive!

Chrome DevTools MCP Server Guide

Gergely Szerovay — Tue, 21 Oct 2025 07:37:16 +0000

Ever wished your AI assistant could actually see and interact with a browser like you do? That's exactly what the Chrome DevTools MCP server delivers: a direct connection between your AI coding assistant and Chrome's powerful developer tools, enabling everything from automated testing to debugging and performance analysis.

Instead of asking your AI to generate Puppeteer scripts or guess at how your web app behaves, it can now control a real Chrome browser, inspect network requests, capture screenshots, and even record performance traces. The Model Context Protocol (MCP) creates this bridge, giving your AI assistant the same view into your web application that you'd get from Chrome DevTools.

But here's where it gets really interesting. Need to debug why a form submission isn't working? Your AI can take a snapshot of the page, examine the form elements, fill them out, and capture any console errors, all while explaining what's happening. Want to understand why your page is loading slowly? It can record a performance trace and break down the Core Web Vitals for you with actionable insights.

Common Workflows

Before we dive into the individual tools, let me show you how they work together to solve real problems you face every day. These workflows demonstrate the power of combining different tools to automate complex testing and debugging scenarios.

End-to-End Testing

Testing a complete user flow from start to finish:

"Test the checkout process with these steps: add a product to cart, proceed to checkout, fill in shipping details, and verify the order confirmation appears."

Your AI will:

Take a snapshot to find the "Add to Cart" button (take_snapshot)
Click it and wait for the cart to update (click)
Navigate to checkout (click)
Take another snapshot to identify form fields (take_snapshot)
Fill in shipping details using realistic test data (fill_form)
Submit the form (click)
Wait for the confirmation message (wait_for)
Take a screenshot of the confirmation for your records (take_screenshot)

If anything fails, it'll capture console errors and network requests to help debug (list_console_messages, list_network_requests).

Performance Debugging

Understanding why a page loads slowly:

"Analyze the performance of example.com and tell me what's slowing it down."

Your AI will:

Navigate to the URL (navigate_page)
Start a performance trace with page reload (performance_start_trace)
Wait for the trace to complete (performance_stop_trace)
Analyze Core Web Vitals (LCP, FID, CLS)
Examine specific insights like ImageDelivery breakdown (performance_analyze_insight)
Identify the largest contributors (render-blocking resources, slow server response, large images)
Suggest concrete optimizations with priority order

Responsive Design Testing

Verifying layouts work across different screen sizes:

"Test how the navigation menu behaves on mobile, tablet, and desktop."

Your AI will:

Start at desktop size (1920x1080) (resize_page)
Take a snapshot and screenshot of the navigation (take_snapshot, take_screenshot)
Resize to tablet (768x1024) (resize_page)
Check if the menu collapses to a hamburger icon (take_snapshot)
Test that the hamburger menu opens correctly (click)
Resize to mobile (375x667) (resize_page)
Verify mobile navigation works (take_snapshot, click)
Report any layout issues or broken interactions

API Testing Through UI

Debugging network requests triggered by user interactions:

"Submit the search form and show me what API calls are made."

Your AI will:

List network requests to establish a baseline (list_network_requests)
Take a snapshot to find the search input and button (take_snapshot)
Fill in the search term (fill)
Click the search button (click)
Wait for results to appear (wait_for)
List new network requests since the click (list_network_requests)
Show you the request details (URL, headers, payload, response) (get_network_request)

This is incredibly useful for debugging API integration issues without opening DevTools manually.

Available Tools

Now that you've seen what's possible, let's explore the individual tools. The Chrome DevTools MCP server organizes its 26 tools into six categories, each targeting a specific aspect of browser automation and debugging.

Input Automation (7 tools)

Tools for interacting with page elements:

click - Click or double-click elements on the page
drag - Drag one element onto another
fill - Type text into inputs or select options from dropdowns
fill_form - Fill out multiple form fields at once
handle_dialog - Accept or dismiss browser dialogs (alerts, confirms, prompts)
hover - Hover over elements to trigger hover states
upload_file - Upload files through file input elements

Navigation Automation (7 tools)

Tools for controlling browser tabs and navigation:

close_page - Close browser tabs by index
list_pages - Get a list of all open tabs
navigate_page - Navigate to a specific URL
navigate_page_history - Go back or forward in browser history
new_page - Open a new tab with a URL
select_page - Switch context to a different tab
wait_for - Wait for specific text to appear on the page

Emulation (3 tools)

Tools for simulating different device and network conditions:

emulate_cpu - Throttle CPU to simulate slower devices (1-20x slowdown)
emulate_network - Simulate network conditions (Offline, Slow 3G, Fast 3G, Slow 4G, Fast 4G)
resize_page - Change viewport dimensions to test responsive designs

Performance (3 tools)

Tools for analyzing page performance:

performance_start_trace - Begin recording a performance trace
performance_stop_trace - Stop the active trace recording
performance_analyze_insight - Get detailed information about specific performance insights (like LCP breakdown or document latency)

Network (2 tools)

Tools for inspecting network activity:

list_network_requests - Get all network requests since the last navigation, with filtering options
get_network_request - Retrieve detailed information about a specific request by its ID

Debugging (4 tools)

Tools for inspecting and debugging pages:

evaluate_script - Execute JavaScript code in the page context and get JSON-serializable results
list_console_messages - Retrieve all console logs, warnings, and errors
take_screenshot - Capture screenshots of the full page or specific elements (PNG, JPEG, or WebP)
take_snapshot - Get a text representation of the page based on the accessibility tree with unique element identifiers

Configuration

Let's get you up and running! The Chrome DevTools MCP server is pretty flexible, so you can configure it to match your workflow. I'll cover the essentials here, but if you want to dive deeper into all the configuration options, check out the official configuration documentation.

Basic Setup

The simplest way to get started is to let the server launch a fresh Chrome instance with default settings:

{
  // or "mcpServers", depending your IDE / tool
  "servers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

That's it! This configuration will work great for most use cases.

Connecting to a Running Chrome Instance from Docker

Here's a scenario I've run into a lot: you're developing in a Docker container but want to use a Chrome instance that's running on your host machine. Maybe you want to see the browser window, or you need to use your existing Chrome profile. Whatever the reason, connecting to a running instance is the way to go.

First, start Chrome on your host machine with remote debugging enabled. Chrome needs a user data directory when remote debugging is on, so make sure to specify one:

"C:\Program Files\Google\Chrome\Application\chrome.exe" ^
  --remote-debugging-port=9222 ^
  --user-data-dir="C:\Temp\chrome-profile-stable"

Now for the Docker-specific part. Docker provides a special DNS name called host.docker.internal that resolves to your host machine. From inside your container, you can find the IP address:

host host.docker.internal
# Output: host.docker.internal has address 192.168.65.254

Use that IP address in your MCP server configuration:

{
  // or "mcpServers", depending your IDE / tool
  "servers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://192.168.65.254:9222"
      ]
    }
  }
}

You might be wondering: "Why can't I just use host.docker.internal directly in the browserUrl?" If you're curious about the details, check out this discussion in the Puppeteer GitHub issues.

For more configuration options like headless mode, custom Chrome paths, network throttling, and debugging settings, take a look at the full configuration guide.

Tool Reference

Input Automation Tools

`click`

Clicks or double-clicks an element identified by its unique ID from a page snapshot.

Input Schema:

{
  uid: string,        // Required: The uid of an element on the page from the page content snapshot
  dblClick?: boolean  // Optional: Set to true for double clicks. Default is false.
}

In Action: Let's say you want to test a login form. First, take a snapshot to get element IDs, then use click to submit the form. Your AI assistant can chain these actions naturally when you ask "Can you test the login flow?" It'll find the form, fill it out, click submit, and report what happened.

`drag`

Drags one element onto another, useful for testing drag-and-drop interfaces.

Input Schema:

{
  from_uid: string,  // Required: The uid of the element to drag
  to_uid: string     // Required: The uid of the element to drop into
}

In Action: Testing a kanban board? Ask your AI to "move the task card from 'In Progress' to 'Done'" and it'll locate both elements from a snapshot and perform the drag operation. It can even verify the move succeeded by checking the DOM afterward.

`fill`

Types text into input fields, text areas, or selects an option from a dropdown.

Input Schema:

{
  uid: string,    // Required: The uid of an element on the page from the page content snapshot
  value: string   // Required: The value to fill in
}

In Action: When you ask "Fill out the contact form with test data," your AI can take a snapshot, identify all the form fields, then use fill on each one. It's smart enough to generate appropriate test data based on field names and types.

`fill_form`

Fills multiple form fields in a single operation, more efficient than calling fill repeatedly.

Input Schema:

{
  elements: Array<{
    uid: string; // The uid of the element to fill out
    value: string; // Value for the element
  }>;
}

In Action: This is perfect for complex forms. Instead of watching your AI fill fields one by one, it batches everything together. Ask "Complete the registration form" and it'll snapshot the page, identify all required fields, then fill them all at once.

`handle_dialog`

Responds to JavaScript alerts, confirms, or prompts.

Input Schema:

{
  action: 'accept' | 'dismiss',  // Required: Whether to dismiss or accept the dialog
  promptText?: string            // Optional: Optional prompt text to enter into the dialog.
}

In Action: Testing a "delete item" flow that shows a confirmation dialog? Your AI will click the delete button, detect the dialog, then use handle_dialog to confirm or cancel. You can specify which action you want: "Test the delete flow but cancel the confirmation."

`hover`

Triggers hover states on elements, essential for testing dropdown menus and tooltips.

Input Schema:

{
  uid: string; // Required: The uid of an element on the page from the page content snapshot
}

In Action: Want to test if your navigation dropdown works? Ask "Check if the Products menu shows all categories" and your AI will hover over the menu, wait for it to expand, then snapshot and verify the contents.

`upload_file`

Uploads a file through a file input element.

Input Schema:

{
  uid: string,       // Required: The uid of the file input element or an element that will open file chooser on the page from the page content snapshot
  filePath: string   // Required: The local path of the file to upload
}

In Action: Need to test an image upload feature? Tell your AI "Upload test-image.jpg to the profile picture form" and it'll locate the file input, handle the upload, and can even wait to verify the upload succeeded.

Navigation Automation Tools

`close_page`

Closes a browser tab by its index. You can't close the last remaining tab.

Input Schema:

{
  pageIdx: number; // Required: The index of the page to close. Call list_pages to list pages.
}

In Action: After opening multiple tabs for testing, clean them up: "Close all the test tabs we opened." Your AI will list the pages, then close the ones that aren't needed, keeping your main tab active.

`list_pages`

Returns all open browser tabs with their URLs and indices.

Input Schema: None

In Action: This runs automatically whenever your AI needs to know what tabs are open. When you ask "What pages do I have open?" or "Switch to the documentation tab" it uses this tool behind the scenes.

`navigate_page`

Navigates the current tab to a URL.

Input Schema:

{
  url: string,        // Required: URL to navigate the page to
  timeout?: number    // Optional: Maximum wait time in milliseconds. If set to 0, the default timeout will be used.
}

In Action: The most straightforward tool. "Go to https://example.com" triggers this directly. Your AI can also chain it with other actions: "Navigate to the login page and check if the form is accessible."

`navigate_page_history`

Moves backward or forward through the browser history.

Input Schema:

{
  navigate: 'back' | 'forward',  // Required: Whether to navigate back or navigate forward in the selected pages history
  timeout?: number                // Optional: Maximum wait time in milliseconds. If set to 0, the default timeout will be used.
}

In Action: Testing multi-step flows? "Complete the checkout process, then go back and verify the cart is still correct." Your AI navigates forward through each step, then uses history navigation to go back and verify state.

`new_page`

Opens a new tab and navigates to a URL.

Input Schema:

{
  url: string,        // Required: URL to load in a new page.
  timeout?: number    // Optional: Maximum wait time in milliseconds. If set to 0, the default timeout will be used.
}

In Action: Comparing pages side-by-side? "Open the production and staging sites in separate tabs and compare the homepage layouts." Your AI opens both pages and can switch between them to analyze differences.

`select_page`

Changes which tab is active for subsequent tool operations.

Input Schema:

{
  pageIdx: number; // Required: The index of the page to select. Call list_pages to list pages.
}

In Action: When working with multiple tabs, this switches context. Ask "Check the console errors in the second tab" and your AI uses list_pages to find it, select_page to switch to it, then list_console_messages to check for errors.

`wait_for`

Waits for specific text to appear on the page, useful after triggering actions that update the UI.

Input Schema:

{
  text: string,       // Required: Text to appear on the page
  timeout?: number    // Optional: Maximum wait time in milliseconds. If set to 0, the default timeout will be used.
}

In Action: After submitting a form, you want to verify success: "Submit the form and check for the success message." Your AI clicks submit, then uses wait_for to ensure "Thank you for your submission" appears before continuing.

Emulation Tools

`emulate_cpu`

Throttles CPU performance to simulate slower devices.

Input Schema:

{
  throttlingRate: number; // Required: The CPU throttling rate representing the slowdown factor 1-20x. Set the rate to 1 to disable throttling
}

In Action: Want to see how your app performs on older devices? "Test the page performance on a slow device" triggers CPU throttling, helping identify performance bottlenecks that only appear on less powerful hardware.

`emulate_network`

Simulates various network conditions.

Input Schema:

{
  throttlingOption: "No emulation" |
    "Offline" |
    "Slow 3G" |
    "Fast 3G" |
    "Slow 4G" |
    "Fast 4G"; // Required: The network throttling option to emulate. Available throttling options are: No emulation, Offline, Slow 3G, Fast 3G, Slow 4G, Fast 4G. Set to "No emulation" to disable. Set to "Offline" to simulate offline network conditions.
}

In Action: Testing offline functionality? "Check if the app works without internet" sets the network to offline mode, then you can ask your AI to verify that your service worker and caching work correctly. You can also test on slow connections: "How does the page load on 3G?"

`resize_page`

Changes the viewport dimensions to test responsive designs.

Input Schema:

{
  width: number,   // Required: Page width
  height: number   // Required: Page height
}

In Action: Checking mobile responsiveness? "Test the layout on iPhone 12 dimensions" resizes to 390x844, takes screenshots, and you can explicitly ask it to check that the mobile menu works correctly. Your AI can test multiple sizes in sequence to catch responsive design issues.

Performance Tools

`performance_start_trace`

Begins recording a performance trace to analyze page load and runtime performance.

Input Schema:

{
  reload: boolean,    // Required: Determines if, once tracing has started, the page should be automatically reloaded.
  autoStop: boolean   // Required: Determines if the trace recording should be automatically stopped.
}

In Action: "Analyze the performance of this page" starts a trace with reload enabled and autoStop true. After recording, your AI gets Core Web Vitals (LCP, FID, CLS) and performance insights automatically.

`performance_stop_trace`

Stops the active performance trace and returns the analysis.

Input Schema: None

In Action: If you started a trace with autoStop disabled (to capture user interactions), you'd stop it manually: "Stop the performance recording and show me the results." The trace includes detailed timing information and performance insights.

`performance_analyze_insight`

Gets detailed information about specific performance issues identified in a trace.

Input Schema:

{
  insightName: string; // Required: The name of the Insight you want more information on. For example: "DocumentLatency" or "LCPBreakdown"
}

Here's the list of all 18 Chrome DevTools Performance Insights and their names:

Each of these insights focuses on a specific aspect of performance that can help you make your pages faster. When you run a performance trace, Chrome analyzes your page and highlights which of these insights are relevant to your situation:

Cache: Use efficient cache lifetimes
CLSCulprits: Layout shift culprits
DocumentLatency: Document request latency
DOMSize: Optimize DOM size
DuplicatedJavaScript: Duplicated JavaScript
FontDisplay: Font display
ForcedReflow: Forced reflow
ImageDelivery: Improve image delivery
INPBreakdown: INP breakdown
LCPBreakdown: LCP breakdown
LCPDiscovery: LCP request discovery
LegacyJavaScript: Legacy JavaScript
ModernHTTP: Modern HTTP
NetworkDependencyTree: Network dependency tree
RenderBlocking: Render-blocking requests
SlowCSSSelector: CSS selector costs
ThirdParties: Third parties
Viewport: Optimize viewport for mobile

Want to understand how Chrome generates these insights and what each one means for your page? The Performance Insights documentation has all the details.

In Action: After running a trace that shows "LCP could be improved," ask "What's causing the slow LCP?" Your AI uses this tool to get a breakdown of what contributed to the Largest Contentful Paint time and suggests specific optimizations.

Network Tools

`list_network_requests`

Retrieves all network requests since the page loaded.

Input Schema:

{
  pageSize?: number,          // Optional: Maximum number of requests to return. When omitted, returns all requests.
  pageIdx?: number,           // Optional: Page number to return (0-based). When omitted, returns the first page.
  resourceTypes?: string[]    // Optional: Filter requests to only return requests of the specified resource types. When omitted or empty, returns all requests.
}

In Action: Debugging API calls? "Show me all the failed network requests" lists requests, filters to status codes 4xx and 5xx, and shows you what went wrong. You can also check "Are there any requests taking longer than 2 seconds?"

`get_network_request`

Gets a network request by URL. You can get all requests by calling list_network_requests.

Input Schema:

{
  reqid: number; // Required: The reqid of a request on the page from the listed network requests
}

In Action: After listing requests, dive into details: "What headers were sent with that POST request?" Your AI uses the request ID to fetch complete information including headers, response body, timing breakdown, and status.

Debugging Tools

`evaluate_script`

Executes JavaScript code in the page context and returns JSON-serializable results.

Input Schema:

{
  function: string,  // Required: A JavaScript function to run in the currently selected page
  args?: Array<{     // Optional: An optional list of arguments to pass to the function.
    uid: string      // The uid of an element on the page from the page content snapshot
  }>
}

In Action: Need to inspect page state? "What's the current value of the search input?" triggers evaluation of document.querySelector('input[name="search"]').value. You can also modify state, check global variables, or debug complex interactions.

`list_console_messages`

Retrieves console logs, warnings, and errors from the page.

Input Schema:

{
  pageSize?: number,   // Optional: Maximum number of messages to return. When omitted, returns all requests.
  pageIdx?: number,    // Optional: Page number to return (0-based). When omitted, returns the first page.
  types?: string[]     // Optional: Filter messages to only return messages of the specified resource types. When omitted or empty, returns all messages.
}

In Action: After page interactions, check what happened: "Did any errors occur?" Your AI lists console messages, filters to errors, and explains what each one means. Great for catching JavaScript errors during testing.

`take_screenshot`

Captures visual snapshots of the page or specific elements.

Input Schema:

{
  format?: 'png' | 'jpeg' | 'webp',  // Optional: Type of format to save the screenshot as. Default is "png"
  quality?: number,      // Optional: Compression quality for JPEG and WebP formats (0-100). Higher values mean better quality but larger file sizes. Ignored for PNG format.
  uid?: string,          // Optional: The uid of an element on the page from the page content snapshot. If omitted takes a pages screenshot.
  fullPage?: boolean,    // Optional: If set to true takes a screenshot of the full page instead of the currently visible viewport. Incompatible with uid.
  filePath?: string      // Optional: The absolute path, or a path relative to the current working directory, to save the screenshot to instead of attaching it to the response.
}

In Action: Visual regression testing made easy: "Take a screenshot of the homepage and compare it to yesterday's version." Your AI captures the image, compares layouts, and highlights any differences. You can also screenshot specific components: "Show me what the modal looks like when open."

`take_snapshot`

Generates a text representation of the page based on the accessibility tree, with unique IDs for each element. Think of this as getting a bird's eye view of your page's structure: it shows you all the interactive elements, their roles, and how they're organized, similar to how a screen reader would understand the page.

The accessibility tree is a simplified version of the DOM that exposes only the information needed for assistive technologies. By using this tree, the snapshot focuses on semantically meaningful elements while filtering out purely visual markup. This makes it perfect for understanding page structure and finding elements to interact with.

For a deeper dive into how Chrome's accessibility tree works and what information it provides, check out the Full Accessibility Tree in Chrome DevTools blog post.

Input Schema:

{
  verbose?: boolean  // Optional: Whether to include all possible information available in the full a11y tree. Default is false.
}

In Action: This is your AI's eyes into the page structure. When you ask "What form fields are on this page?" it takes a snapshot to see all interactive elements. The unique IDs from this snapshot are what other tools use to interact with specific elements.

👨‍💻About the author

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

Angular CLI MCP Server Guide

Gergely Szerovay — Thu, 16 Oct 2025 08:47:37 +0000

The Angular team has added something that changes how AI can help with your projects: an MCP server built into the CLI that provides everything from live documentation access to code modernization tools and interactive tutoring.

Instead of relying on potentially stale training data, your AI can now actively query Angular's documentation, search through curated code examples, and access official best practices. The Model Context Protocol (MCP) acts as a bridge, letting your AI assistant tap into the same resources you'd manually search for.

But it goes beyond just looking things up. Need to see how a modern feature works in practice? The find_examples tool searches through a curated database of official Angular code examples that emphasizes current patterns (stable in v21). Got legacy code that needs updating? The modernize tool doesn't just tell you what to change: it gives you the exact CLI commands to run, along with clear explanations of what's happening and why.

And if you're new to Angular or want to level up your skills? The ai_tutor tool (coming in v21) transforms your AI assistant into a dedicated Angular instructor, walking you through building a complete application while teaching you modern patterns along the way.

Angular v21 hasn't been officially released yet. At the time of writing, v21-next.6 is the latest preview version available, so keep in mind that some features mentioned here are still in development.

Available Tools

Angular v20.3

Stable tools:

get_best_practices - Retrieves official Angular coding standards and conventions from the Angular team
search_documentation - Queries live Angular documentation at angular.dev
list_projects - Analyzes workspace structure and provides comprehensive information about all Angular projects and libraries

Experimental tools:

find_examples - Searches a curated database of official Angular code examples emphasizing modern features
modernize - Provides migration instructions and CLI commands for upgrading Angular code to current patterns
onpush-zoneless-migration - Offers step-by-step guidance for adopting OnPush change detection strategy

Angular v21

Angular v21 is unreleased yet, but most likely the find_examples tool will become stable and there will be a new ai_tutor tool: it loads Angular AI Tutor curriculum transforming the assistant into a specialized Angular instructor

Configuration

The Angular CLI MCP server accepts several command-line options that control its operational behavior.

The --read-only flag restricts the server to register only tools that do not make changes to the project.

The --local-only flag enables tools that don't need an internet connection. For example, the search_documentation tool searches the official Angular documentation at https://angular.dev and requires an internet connection, so it would be disabled with this flag.

The --experimental-tools option enables specific experimental features by accepting a list of tool names.

To enable both stable and experimental tools, add the following MCP server configuration to your mcp.json file:

Angular v20.3.5:

{
  "servers": {
    // or "mcpServers", depending your IDE / tool
    "angular-cli": {
      "command": "npx",
      "args": [
        "-y",
        "@angular/cli@20.3.5",
        "mcp",
        "--experimental-tool",
        "modernize",
        "onpush-zoneless-migration",
        "find_examples"
      ]
    }
  }
}

Angular v21.0.0-next.7:

{
  "servers": {
    // or "mcpServers", depending your IDE / tool
    "angular-cli": {
      "command": "npx",
      "args": [
        "-y",
        "@angular/cli@21.0.0-next.7",
        "mcp",
        "--experimental-tool",
        "modernize",
        "onpush-zoneless-migration"
      ]
    }
  }
}

Tool Reference

`ai_tutor`

Angular v21+, local, read-only

Loads the Angular AI Tutor curriculum and persona, transforming the AI assistant into a specialized Angular instructor that guides developers through building a complete "Smart Recipe Box" application. The tool provides structured learning paths through Angular concepts with hands-on exercises.

In Action: Want to dive into modern Angular but not sure where to start? Just ask your AI assistant "Teach me Angular" and watch what happens, the tutor kicks in and guides you through building a real app from scratch. It's like having a patient mentor who won't judge you for asking "wait, what's a component again?" for the third time. The curriculum walks you through foundations first, then gradually introduces more advanced concepts as you build out the Smart Recipe Box application.

`get_best_practices`

Local, read-only

Retrieves the official Angular Best Practices Guide containing current coding standards and conventions including standalone components, signal-based state management, typed forms, modern control flow syntax, and architectural best practices.

In Action: Make this your first step before writing or modifying any Angular code. It's like checking the map before a road trip, you'll save yourself from wrong turns later. Just ask your AI assistant to "Load the Angular best practices" and you'll be working with the latest standards from the start.

`search_documentation`

Read-only

Queries the live Angular documentation at angular.dev. The tool accepts a search query, optionally fetches the full content of the top result, and can target specific Angular major versions for relevant results. This ensures developers receive up-to-date information about Angular features and APIs rather than potentially outdated training data.

Input Schema:

  {
    query: string,               // Required: Search query
    includeTopContent?: boolean, // Optional: default true, fetches content of top result
    version?: number             // Optional: Angular major version to search
  }

In Action: Let's say you're wondering "Are components standalone by default in Angular?" Just ask your AI assistant naturally, and it'll check your project's Angular version, then query the official documentation at angular.dev to get you the right answer for your specific setup. No more guessing whether that Stack Overflow answer from 2019 still applies!

`list_projects`

Local, read only

Analyzes the workspace structure and returns comprehensive information about all Angular workspaces and projects within the current directory. The tool reads angular.json configuration files and provides details including project names, types, root directories, source roots, and selector prefixes. This enables AI assistants to understand the specific workspace structure, whether it's a single application, multiple apps, libraries, or a monorepo setup.

In Practice: You can ask for this information explicitly with something like "List the projects in my workspace," but your AI assistant will also pull this data automatically when you ask architecture questions. For example, if you ask "Where should I place the new UserSettingsComponent?" the assistant will check your workspace structure first to give you contextually relevant advice.

`find_examples`

Local, read only, experimental in v20.3, stable from v21+, Requires Node.js 22.16 or higher

Searches a curated SQLite database of official Angular code examples with emphasis on modern and recently updated features. The examples are maintained in the Angular CLI repository at https://github.com/angular/angular-cli/tree/main/packages/angular/cli/lib/examples. At the time of writing, there is a single @if control flow example available, but we expect the collection to grow significantly for the release of Angular v21.

Input Schema:

  {
    query: string,                      // Required: FTS5 search query
    keywords?: string[],                // Optional: Exact keywords to filter
    required_packages?: string[],       // Optional: NPM packages the example must use
    related_concepts?: string[],        // Optional: High-level concepts to filter by
    includeExperimental?: boolean       // Optional: default false
  }

`modernize`

Local, read only, experimental in v20.3 and v21

Provides detailed instructions and CLI commands for upgrading Angular code to align with current patterns and syntax. The tool generates step-by-step migration guidance for specific transformations or provides general modernization recommendations. Each transformation includes the exact Angular CLI command to execute along with explanatory context about what will change and why.

Input Schema:

  {
    transformations?: string[]  // Optional: Array of transformation names
  }

Available transformations:

control-flow-migration - Migrate from *ngIf/*ngFor to @if/@for syntax
self-closing-tags-migration - Convert HTML tags to self-closing format
inject - Migrate from constructor injection to inject() function
output-migration - Migrate from @Output to output() API
signal-input-migration - Migrate from @Input to input() signals
signal-queries-migration - Migrate @ViewChild/@ContentChild to viewChild()/contentChild()
standalone - Convert NgModule-based components to standalone

In Action: Let's say you've got an older component that still uses constructor injection and you want to modernize it. Just tell your AI assistant something like "modernize src/app/app.ts" and watch the magic happen. The assistant will check the Angular best practices first (you know, to make sure it's giving you current advice), then use the modernize tool to figure out exactly which transformations you need. You'll get the specific CLI commands to run, like ng generate @angular/core:inject, along with a clear explanation of what's changing and why.

`onpush-zoneless-migration`

Local, read only, experimental in v20.3 and v21

Analyzes code and provides iterative, step-by-step migration guidance for adopting OnPush change detection strategy, which serves as a prerequisite for zoneless Angular applications. The tool operates through repeated invocations, providing one actionable step at a time with clear explanations. This incremental approach ensures developers understand each change while maintaining code stability throughout the migration process.

Input Schema:

  {
    fileOrDirPath: string; // Required: Absolute path to file or directory to analyze and migrate
  }

In Action: Point it at a component or directory (something like "analyze src/app/dashboard for OnPush migration"), and you'll get one clear, actionable step to work on. Complete that step, then run the tool again for the next one. It's like having a patient guide who knows exactly what order to tackle things in. This step-by-step approach keeps you from getting overwhelmed, and your code stays stable throughout the process. Much better than attempting a big-bang migration and crossing your fingers!

👨‍💻About the author

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

Angular Addicts #42: Signal Forms API, AI powered apps with Angular & more

Gergely Szerovay — Tue, 07 Oct 2025 07:18:19 +0000

👋Hey fellow Angular Addict

This is the 42nd issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the 40th, 39th and 38th)

📢 Release announcements

📰 What’s new in Angular 20.3?

🚦 Signal forms

Angular v21-next releases introduce the new experimental Signal Forms API.

📰 All About Angular's New Signal Forms

📰 Angular Signal Forms: The most awaited feature is here

By Elisa Schnabel

📰 Signals Form: Introduction

By Nicolas Frizzarin

💎Angular Gems of September, 2025

📰 Beyond the Horizon: How Angular is Embracing AI for Next-Gen Apps

By Simona Cotin

📰 Dynamic Angular Config for SSR. Setup smarter Server-Side rendering

By Enea Jahollari

📰 Building AI-powered apps with Angular and Gemini

📰 Dynamic component creation with Angular

📰 afterRenderEffect, afterNextRender, afterEveryRender & Renderer2

By Eduard Krivanek

📰 Optimizing Angular Signals with Smart Equality Checks

By Romain Geffrault

👨‍💻About the author

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

📨 Submit your Angular resource

Angular Addicts #41: Angular 20.2, Animations, Monorepos & more

Gergely Szerovay — Tue, 16 Sep 2025 07:51:10 +0000

👋Hey fellow Angular Addict

This is the 41st issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the 40th, 39th and 38th)

📢 Release announcements

📰 Angular Summer Update 2025

By Mark (Techson) Thompson and Jens Kuehlers

📰 What’s new in Angular 20.2?

💎Angular Gems of August, 2025

📰 Bring Your Angular App to Life with Anime.js

By William Juan

📰 Introduction to Frontend Monorepos

By Stefan Haas

📰 Migrating to Angular Signals

📰 Component architecture with inputs, model(), and viewChild()

📰 Interview: How AI Is Transforming Angular Development (Transcript)

By Manfred Steyer and Daniel Sogl

👨‍💻About the author

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

📨 Submit your Angular resource

Angular Addicts #40: Angular 20.1, NgRx 20, Zoneless testing, Native Federation & more

Gergely Szerovay — Wed, 13 Aug 2025 08:18:21 +0000

👋Hey fellow Angular Addict

This is the 40th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the 39th, 38th and 37th)

📢 Release announcements

📰 What’s new in Angular 20.1?

📰 Announcing NgRx v20: The Power of Events, Enhanced DX, and a Mature SignalStore!

By Alex Okrushko

💎Angular Gems of July, 2025

📰 What's New in Angular Material 20

By Dharmen Shah

📰 Angular Zoneless Unit Testing

By Francesco Borzì

📰 How to use the new Signal Graph in the Angular Dev Tools?

📰 Native Federation Just Got Better: Performance, DX, and Simplicity

This article is part of Manfred Steyer's Micro Frontends with Modern Angular Series:

📰 Hidden parts of Angular: View Providers

By Paweł Kubiak

📰 Senior Angular Interview Questions

By Eduard Krivanek

📰 Injection-Aware Lazy Loading for loadComponent and loadChildren in Angular

By Netanel Basal

👨‍💻About the author

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

📨 Submit your Angular resource

Angular Addicts #39: Zoneless Angular, Incremental hydration, DDD & more

Gergely Szerovay — Tue, 15 Jul 2025 07:43:21 +0000

👋Hey fellow Angular Addict

This is the 39th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that caught my attention. (Here are the 38th, 37th and 36th)

📢 Release announcements

📰 Nx 21.2 (featuring Angular 20, NestJS 11, and Storybook 9)

By Philip Fulcher

💎Angular Gems of June, 2025

📰 The Angular Custom Profiling Track is now available (in Chrome DevTools)

By Mark (Techson) Thompson and Pawel Kozlowski

📰 All about DDD for Frontend Architectures (with Angular & Co.)

📰 Implementing Incremental Hydration in Angular

Michael Hladky's series about incremental hydration:

📰 Strategy Pattern the Angular Way: DI and Runtime Flexibility

By Ivan Kudria

📰 The Angular Compiler: From Your Code to Browser Code

📰 Zoneless Angular

By Kevin Kreuzer

📰 Angular Error Handling