#4 Angular + AI
Angular recently unveiled new AI powered tools for developers and discover the Angular AI community ecosystem.
Vibe coding and using AI Agents all day long is not enough to get the best out of them. You need to fine-tune them with proper context and up-to-date documentation. Discover official and community AI tools.
Angular + AI event
The Angular team hosted a YouTube live event a few weeks ago to share new AI projects for Angular developers.
They all use Gemini in some way under the hood, but you can adapt most of them to your needs. Discover them below!
Web Codegen Scorer
Framework agnostic, Web Codegen Scorer is a tool meant to score the quality of web code generated by LLMs.Firstly, only tied to Gemini, you can now fully use it with OpenAI, Anthropic, and Grok.
From my experience, it’s both too slow and expensive for a lone developer to regularly evaluate LLMS or custom AI rules to iterate on code generation quality.
As mentioned in an issue, I wish there were a benchmark page on Angular documentation to get to know the best LLM solution (coupled with Angular AI rules) to create Angular apps.
AI Tutor
The Angular team ingeniously shaped an AI rule file to make it act as a tutor. It explains its roles, the boundaries, the Angular best practices, the learning path, a set of difficulty levels, and module lessons.
Rules are in the .idx folder to work with Firebase Studio by default. Bring the same experience with your favorite IDE by moving the rules where you need.
I attempted to change the learning path to another, more complete one, but it failed to provide a good experience for learners. Keep this tool for any short-paced tutorials focused on the Angular API.
Discover the AI Tutor project: https://github.com/angular/ai-tutor
If not fixed already at the time of reading, there is an open-source contribution opportunity to fix some best practices related content:
- 2 interfaces, only one suffixed with ‘Model’
- the service suffixed by ‘Service’, not following the new official standards
Firebase Studio
It now provides a more straightforward experience at creating Angular apps, as the option is no longer in advanced settings.
Gemini Canvas
It was kind of a shame that a Google Product could only create React components (asking for an Angular one resulted in a React component called ‘AngularComponent’). It’s now solved!
Compared to Firebase Studio, Canvas is intended for more limited prototypes: test an idea quickly and then move to Firebase Studio or your preferred IDE.
Discover the official Angular blog post about these new releases.
Angular.dev/ai
The Angular documentation includes some tooling to help you enhance AI code generation: https://angular.dev/ai
LLM prompts and AI IDE setup
Angular provides textual content to enhance AI Agents:
Angular CLI MCP Server
The Angular MCP Server is meant to help you generate better code with AI and provides the following tools:
get_best_practices: official Angular best practices
list_projects: read angular. json configuration
search_documentation: query angular.dev
ai_tutor: provides a turo like learning experience
find_example: to provide quality code examples
There are also some experimental tools:
modernize: help trigger Angular migration schematics
zoneless_migration: a dedicated migration one for Zoneless
Community AI projects
Context7
Context7 provides up-to-date documentation for LLMs and AI code editors. It’s available as:
a static file you can integrate into your project
a MCP server, so you always get up-to-date information
dolmen.tools MCP server
A MCP server I created based on the content I shared with the community already. It brings:
up to date info for Angular, Angular Material, RxJs, and NgRx documentation (powered by kapa.ai)
Angular Can I Use documentation
Discover the MCP Server: https://www.dolmen.tools/en/angular/mcp-server
Hashbrown
What if generative AI did not just live in your dev environment but helped you create dynamic UIs for your users, right in their browsers?
Discover Hashbrown, a project created by Brian Love and Mike Ryan.
Angularize
An upcoming online IDE similar to Lovable, but for Angular!
You can join the waitlist of the project created by Krish Arora and Ankit Singh.
That's all for this week's digest. We'll be back soon with more Angular goodness!
Fun fact
Algolia is now an Angular CLI dependency as it is now used to query angular.dev for the CLI MCP Server.