Build with AI, Ship with Agents
Unifying AI agents with the Angular toolchain, schematics, and verification.
Teaching models modern Angular standards.
Client-side agentic AI with Gemini models.
Build with AI, Ship with Agents
Unifying AI agents with the Angular toolchain, schematics, and verification.
Teaching models modern Angular standards.
Client-side agentic AI with Gemini models.
A practical guide to modern AI-driven Angular architecture
Connecting AI coding agents directly to the Angular CLI and project environment via Model Context Protocol.
Teaching AI agents your team's modern standards: Signals, standalone components, inject(), and native control flow.
Connecting Angular web applications directly to Google Gemini models using Firebase AI Logic.
Production architectural guardrails, security best practices, and resources.
The Angular renaissance moves faster than general training cutoffs
Models default to older Angular syntax: heavy NgModules, constructor DI, and structural directives.
Angular today is Standalone-first, Signals-driven, Zoneless-ready, and uses new built-in control flow (@if, @for).
Bridge the gap with two tools: 1) Angular CLI MCP Server for runtime awareness, and 2) Angular Skills for code standards.
Direct AI access to workspace schematics, documentation, and diagnostics
Exposes project-level intelligence: installed Angular version, standalone defaults, routing paths, and tsconfig mappings.
Generates components, services, and directives using official Angular CLI schematics instead of raw, unverified file writing.
Automatically executes incremental builds (`ng build`) and linters to test and correct newly generated code immediately.
Connecting Claude, Cursor, Copilot, or Antigravity to your Angular Workspace
| 1 | { |
| 2 | "mcpServers": { |
| 3 | "angular-cli": { |
| 4 | "command": "npx", |
| 5 | "args": ["-y", "@angular/cli", "mcp"] |
| 6 | } |
| 7 | } |
| 8 | } |
An interactive tutor that teaches you Angular directly in your workspace—perfect for onboarding.
Fetches official Angular recommendations for Signals, standalone components, and modern patterns.
Queries live angular.dev guides, API references, and release notes directly inside the agent loop.
Enforcing Signals, modern syntax, and team standards in AI generation
Explicitly mandates `inject()`, `signal()`, `computed()`, and `@if/@for` syntax, actively suppressing obsolete constructor DI.
Encodes your team's folder structure, state management patterns, and naming conventions.
Overrides outdated LLM defaults without requiring expensive model fine-tuning or retraining.
Install modern best practices in a single command to eliminate legacy code generation
| @Component({ |
| selector: 'app-root', |
| template: '<div *ngIf="user">{{ user }}</div>' |
| }) |
| export class AppComponent { |
| user = ''; |
| } |
| @Component({ |
| selector: 'app-root', |
| template: ` |
| @if (user()) { |
| <div>{{ user() }}</div> |
| } |
| ` |
| }) |
| export class AppComponent { |
| user = signal(''); |
| } |
Direct client access to Google Gemini models with enterprise security and tool calling
Connect your Angular application directly to Google's Gemini models via the Firebase SDK, removing the need to build, deploy, or maintain custom backend AI proxy servers.
Leverages Firebase App Check attestation to cryptographically verify incoming requests from authentic instances of your Angular app, preventing API key leakage and quota abuse.
Declare type-safe local function schemas that Gemini can invoke autonomously to query live app state, execute local business logic, and drive UI updates.
Direct client-to-model architecture with Firebase SDK, tool calling & Gemini
Registering the Firebase instance in Angular's ApplicationConfig
| 1 | import { ApplicationConfig } from '@angular/core'; |
| 2 | import { initializeApp } from 'firebase/app'; |
| 3 | |
| 4 | const firebaseApp = initializeApp(firebaseConfig); |
| 5 | |
| 6 | export const appConfig: ApplicationConfig = { |
| 7 | providers: [ |
| 8 | { provide: 'FIREBASE_APP', useValue: firebaseApp } |
| 9 | ] |
| 10 | }; |
Initializes Firebase once and provides it across the entire Angular application tree.
Decouples Firebase credentials and setup from application components.
Teaching Gemini what local functions it can call
| 1 | import { FunctionDeclarationsTool, Schema } from 'firebase/ai'; |
| 2 | |
| 3 | const toolset: FunctionDeclarationsTool = { |
| 4 | functionDeclarations: [{ |
| 5 | name: 'addTicket', |
| 6 | description: 'Add parking ticket for a car', |
| 7 | parameters: Schema.object({ |
| 8 | properties: { |
| 9 | plateNo: Schema.string(), |
| 10 | arrival: Schema.string(), |
| 11 | location: Schema.string() |
| 12 | } |
| 13 | }) |
| 14 | }] |
| 15 | }; |
Declares client-side capabilities that Gemini can request the app to execute.
Defines strongly typed parameters (plateNo, arrival, location) for reliable structured extraction.
Giving Gemini domain context, geocoding abilities, and tool access
| 1 | import { getAI, getGenerativeModel } from 'firebase/ai'; |
| 2 | |
| 3 | const instructions = `Smart agent for parking validation that submits tickets, converts dates, and geocodes.`; |
| 4 | |
| 5 | const ai = getAI(firebaseApp); |
| 6 | |
| 7 | const model = getGenerativeModel(ai, { |
| 8 | model: 'gemini-3.8-flash', |
| 9 | systemInstruction: instructions, |
| 10 | tools: [toolset] |
| 11 | }); |
| 12 | |
| 13 | this.chat = model.startChat(); |
Instructs Gemini to parse dates into strings and geocode locations to coordinates.
Attaches the toolset and starts a chat session maintaining conversation context.
Detecting function calls from Gemini and executing local methods
| 1 | async ask(prompt: string) { |
| 2 | const result = await this.chat.sendMessage(prompt); |
| 3 | const calls = result.response.functionCalls(); |
| 4 | |
| 5 | if (calls && calls[0].name === 'addTicket') { |
| 6 | const args = calls[0].args as Record<string, string>; |
| 7 | this.createTicket( |
| 8 | args['plateNo'], |
| 9 | new Date(args['arrival']), |
| 10 | args['location'] |
| 11 | ); |
| 12 | } |
| 13 | } |
Sends the user's natural language input directly to Gemini without server middleware.
Inspects if Gemini invoked our addTicket tool and passes parsed arguments to a local method for creating tickets.
Security, performance, and UX guardrails for Angular + AI
Never expose client-side Firebase AI Logic without Firebase App Check to prevent quota abuse.
Provide `systemInstruction` when initializing `getGenerativeModel` to keep output strictly formatted (e.g. JSON schema).
Even with Schema declarations, always validate parsed dates, coordinates, and strings before updating Angular state.
Build faster, enforce best practices, and deliver intelligent UX
Toolchain context & verified generation
Signals & modern syntax guardrails
Client-side agentic AI with Gemini
Questions, discussion & slide resources
Interactive presentation deck, runnable code snippets & architecture guide