AI prompts, strategies, and best practices
Prompts, strategies, best practices, and examples for using AI with Angular.
ai_tutor
Angular MCP tool providing AI tutoring.
angular-developer
Generates Angular code and provides architectural guidance for components, services, reactivity, forms, DI, routing, SSR, ARIA, animations, styling, testing, and CLI tooling.
Angular MCP
Angular MCP with get_best_practices and find_examples tools.
Angular MCP tools
Angular MCP tools including get_best_practices, ai_tutor, and find_examples.
angular-new-app
Creates a new Angular app using the Angular CLI and provides guidelines for structuring a modern Angular application.
Best Practices
Best practices for AI in Angular.
Angular best-practices prompt
Domain-specific system instructions for TypeScript and Angular best practices.
Build AI-powered applications with Firebase AI Logic and Angular
Build AI-powered applications with Gemini API and Angular
Build AI-powered applications with Genkit and Angular
Build with AI
Connecting to model providers and keeping your API Credentials Secure
Define tool parameters
Define arguments with JSON Schema inputSchema; Angular infers execute callback types.
Examples
Examples of AI usage in Angular.
Adjust Experience Level
Set level to Beginner (1-3), Intermediate (4-7), or Experienced (8-10); adapts teaching style.
find_examples
Angular MCP tool for finding examples.
Firebase AI Logic and Angular
Secure client-side access to Vertex AI Gemini or Imagen APIs from Angular apps.
Firebase AI Logic Integration
Secure client-side API to interact with Vertex AI Gemini API or Imagen API directly from web and mobile apps.
Gemini API and Angular
Use the Gemini API surface directly for full-stack Angular applications.
Gemini API Integration
Build applications using methods and functionality exposed through the Gemini API surface directly.
Genkit and Angular
Build full-stack AI apps using Genkit's unified model interface with Angular SSR.
Genkit Integration
Open-source toolkit with a unified interface for integrating AI models from Google, OpenAI, Anthropic, Ollama, and more.
get_best_practices
Angular MCP tool for retrieving best practices.
Getting Started
Handling non-deterministic responses
Jump to Any Topic
Learn a specific topic out of order; the tutor updates your project to the correct starting point.
See the Full Learning Plan
Ask for the table of contents to see the full plan and your current location.
linkedSignal
Derived state with access to prior values, useful for chat history.
llms.txt context files
llms.txt index and llms-full.txt compiled resources for LLM context.
onpush_zoneless_migration
Analyzes code and provides a plan to migrate to OnPush change detection.
Prompts
Prompts for AI-assisted Angular development.
Provide tools for the application
Register WebMCP tools for the whole app lifecycle via provideExperimentalWebMcpTools.
Read-only mode
--read-only registers only tools that do not modify the project.
Resource API
Declarative async data loading with loader, params, defaultValue and reload().
Leave and Come Back
Progress is tied to project code; the tutor analyzes files to resume where you left off.
Provide tools for a route
Provide tools in route definitions, optionally auto-cleaned on navigation.
IDE rules files
Rules files for Antigravity, Copilot, Cursor, JetBrains, VS Code, and Windsurf.
search_documentation
Searches the official documentation at angular.dev.
Provide tools within services
declareExperimentalWebMcpTool registers a tool in an injection context and unregisters on destroy.
Implicit tools in Signal Forms
Enable the WebMCP forms feature and opt in a Signal Form to expose it as an AI tool.
Skip the Current Module
Ask the tutor to skip the current exercise and get the complete code solution.
SSR and incremental hydration
Render initial content quickly and defer AI data fetch until hydration.
Strategies
Strategies for using AI with Angular.
Use Tool Calling to enhance apps
Web Codegen Scorer
Open-sourced tool to evaluate and score AI-generated web code quality.