frontend-angular-ai

name: frontend-angular-ai description: AI integration patterns for Angular applications using Genkit, Firebase AI Logic, or Gemini API. Includes streaming responses, tool calling, and RAG patterns. Use when building AI-powered features in Angular apps. kb-sources: - wiki/software-engineering/angular-ai-tools updated: 2026-05-21

Angular AI Integration

Patterns for integrating AI capabilities into Angular 21+ applications.

Integration Approaches

Quick Decision

Need server-side processing? → Genkit
Using Firebase already? → Firebase AI Logic
Need image/audio analysis? → Gemini API (multimodal)
Building chatbot with history? → Genkit (server-side state)
Simple text completion? → Firebase AI Logic

Genkit Overview (Recommended)

Google's open-source toolkit for production AI applications.

// Server: Express + Genkit
import { genkit } from 'genkit';
import { googleAI, gemini20Flash } from '@genkit-ai/googleai';

const ai = genkit({ plugins: [googleAI()] });

app.post('/api/chat', async (req, res) => {
  const { message, history } = req.body;

  const response = await ai.generate({
    model: gemini20Flash,
    messages: [...history, { role: 'user', content: message }]
  });

  res.json({ reply: response.text });
});

Key Patterns

Streaming Responses

// Use Resource API for signal-based streaming
streamingResponse = resource({
  stream: async () => {
    const data = signal<{ value: string }>({ value: '' });
    // Stream handling logic
    return data;
  }
});

Tool Calling

// Define tools for LLM to call
const tools = [
  {
    name: 'searchProducts',
    description: 'Search product catalog',
    parameters: { query: 'string' }
  }
];

Temperature Control

Security Patterns

See reference.md for detailed patterns and examples.md for implementations.