🧠 Angular + AI – Wie du GPT & Co. smart in deine App bringst

Künstliche Intelligenz ist mehr als ein Hype – sie ist ein echter Game-Changer.
In diesem Beitrag zeige ich dir, wie du GPT-basierte Systeme in Angular integrierst, um echte Mehrwerte zu schaffen.

🚀 Mögliche Use Cases

• 🧾 Intelligente Formvorschläge
• 💬 Chatbots für User Support
• 🔍 Smart Search mit semantischem Verständnis
• 🛠 Code-Generatoren im Frontend
• 📚 AI-gestützte Empfehlungen im Dashboard

🔐 1. OpenAI / GPT-API einbinden

@Injectable({ providedIn: 'root' })
export class AiService {
  constructor(private http: HttpClient) {}

  generatePrompt(input: string) {
    return this.http.post('https://api.openai.com/v1/chat/completions', {
      model: 'gpt-4',
      messages: [{ role: 'user', content: input }]
    }, {
      headers: {
        Authorization: `Bearer YOUR_API_KEY`
      }
    });
  }
}

➡ Sicherheitstipp: API-Key niemals ins Frontend hartcodieren – Proxy oder Backend verwenden!

🧩 2. Integration im UI

@Component({
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <textarea [(ngModel)]="input"></textarea>
    <button (click)="ask()">Fragen</button>
    <p *ngIf="response">{{ response }}</p>
  `
})
export class ChatComponent {
  input = '';
  response = '';

  constructor(private ai: AiService) {}

  ask() {
    this.ai.generatePrompt(this.input).subscribe((res: any) => {
      this.response = res.choices?.[0]?.message?.content;
    });
  }
}

🔁 Optional: Reaktive Signals + Async Pipe

readonly input = signal('');
readonly response = signal('');

readonly result = effect(() => {
  if (this.input()) {
    this.ai.generatePrompt(this.input()).subscribe((res) =>
      this.response.set(res.choices?.[0]?.message?.content)
    );
  }
});

➡ Ultra smooth. Ultra smart.

✅ Fazit

AI ist kein Fremdkörper – es ist dein Assistent.
Mit Angular + GPT baust du smarte, reaktive Interfaces, die echte Intelligenz zeigen.

📍 Bald im Blog: 🔐 Angular Security – Auth, Roles & sichere APIs richtig gemacht