# Erstelle einen Chat-Assistenten mit KI
Erinnerst du dich an Star Trek, als die Crew zwanglos mit dem Computer des Raumschiffs sprach, ihm komplexe Fragen stellte und durchdachte Antworten erhielt? Was in den 1960er Jahren wie reine Science-Fiction erschien, kannst du heute mit den Webtechnologien, die du bereits kennst, selbst bauen.
In dieser Lektion erstellen wir einen KI-Chat-Assistenten mithilfe von HTML, CSS, JavaScript und etwas Backend-Integration. Du wirst entdecken, wie die gleichen Fähigkeiten, die du gelernt hast, genutzt werden können, um leistungsstarke KI-Dienste zu verbinden, die Kontext verstehen und sinnvolle Antworten generieren können.
Stell dir KI wie den Zugriff auf eine riesige Bibliothek vor, die nicht nur Informationen findet, sondern sie auch zu kohärenten Antworten zusammenführt, die auf deine spezifischen Fragen zugeschnitten sind. Anstatt Tausende von Seiten zu durchsuchen, erhältst du direkte, kontextbezogene Antworten.
Die Integration erfolgt durch bekannte Webtechnologien, die zusammenarbeiten. HTML erstellt die Chat-Oberfläche, CSS übernimmt das visuelle Design, JavaScript steuert die Benutzerinteraktionen und ein Backend-API verbindet alles mit KI-Diensten. Es ist vergleichbar mit den unterschiedlichen Sektionen eines Orchesters, die zusammen eine Symphonie schaffen.
Wir bauen im Grunde eine Brücke zwischen natürlicher menschlicher Kommunikation und maschineller Verarbeitung. Du lernst sowohl die technische Umsetzung der KI-Dienstintegration als auch die Designmuster, die Interaktionen intuitiv wirken lassen.
Am Ende dieser Lektion wird sich die KI-Integration weniger wie ein mysteriöser Prozess anfühlen und mehr wie eine weitere API, mit der du arbeiten kannst. Du wirst die grundlegenden Muster verstehen, die Anwendungen wie ChatGPT und Claude antreiben – basierend auf den gleichen Webentwicklungsprinzipien, die du gelernt hast.
## ⚡ Was du in den nächsten 5 Minuten machen kannst
**Schneller Einstiegspfad für viel beschäftigte Entwickler**
```mermaid
flowchart LR
A[⚡ 5 Minuten] --> B[GitHub-Token bekommen]
B --> C[KI-Spielplatz testen]
C --> D[Python-Code kopieren]
D --> E[KI-Antworten ansehen]
```
- **Minute 1**: Besuche [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) und erstelle ein persönliches Zugriffstoken
- **Minute 2**: Teste KI-Interaktionen direkt in der Playground-Oberfläche
- **Minute 3**: Klicke auf den Reiter „Code“ und kopiere den Python-Schnipsel
- **Minute 4**: Führe den Code lokal mit deinem Token aus: `GITHUB_TOKEN=dein_token python test.py`
- **Minute 5**: Sieh zu, wie deine erste KI-Antwort durch deinen eigenen Code generiert wird
**Test-Code zum schnellen Ausprobieren**:
```python
import os
from openai import OpenAI
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key="your_token_here"
)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Hello AI!"}],
model="openai/gpt-4o-mini"
)
print(response.choices[0].message.content)
```
**Warum das wichtig ist**: Innerhalb von 5 Minuten wirst du die Magie programmatischer KI-Interaktion erleben. Das ist der grundlegende Baustein, der jede KI-Anwendung antreibt, die du benutzt.
So sieht dein fertiges Projekt aus:
## 🗺️ Deine Lernreise durch die KI-Anwendungsentwicklung
```mermaid
journey
title Von Webentwicklung zur KI-Integration
section Grundlagen der KI verstehen
Generative KI-Konzepte entdecken: 4: You
GitHub Models Plattform erkunden: 6: You
KI-Parameter und Prompts meistern: 8: You
section Backend-Integration
Python API-Server erstellen: 5: You
KI-Funktionsaufrufe implementieren: 7: You
Asynchrone Operationen handhaben: 8: You
section Frontend-Entwicklung
Modernes Chat-Interface erstellen: 6: You
Echtzeit-Interaktionen meistern: 8: You
Responsive Benutzererfahrung bauen: 9: You
section Professionelle Anwendung
Komplettes KI-System bereitstellen: 7: You
Leistungsoptimierungsmuster optimieren: 8: You
Produktionsreife App erstellen: 9: You
```
**Dein Ziel auf der Reise**: Am Ende dieser Lektion hast du eine vollständige, KI-gestützte Anwendung gebaut, die die gleichen Technologien und Muster nutzt, welche moderne KI-Assistenten wie ChatGPT, Claude und Google Bard antreiben.
## KI verstehen: Vom Geheimnis zur Meisterschaft
Bevor wir in den Code eintauchen, lass uns verstehen, womit wir es zu tun haben. Wenn du schon APIs verwendet hast, kennst du das Grundmuster: eine Anfrage senden, eine Antwort erhalten.
KI-APIs folgen einem ähnlichen Prinzip, aber anstatt vorgefertigte Daten aus einer Datenbank abzurufen, generieren sie neue Antworten basierend auf Mustern, die aus riesigen Textmengen gelernt wurden. Das ist wie der Unterschied zwischen einem Bibliothekskatalogsystem und einem kenntnisreichen Bibliothekar, der Informationen aus mehreren Quellen zusammenfassen kann.
### Was ist „Generative KI“ wirklich?
Denk daran, wie der Stein von Rosetta es Gelehrten erlaubte, ägyptische Hieroglyphen durch Mustererkennung zwischen bekannten und unbekannten Sprachen zu verstehen. KI-Modelle funktionieren ähnlich – sie finden Muster in riesigen Textmengen, um zu verstehen, wie Sprache funktioniert, und nutzen diese Muster, um passende Antworten auf neue Fragen zu generieren.
**Einfach erklärt mit einem Vergleich:**
- **Traditionelle Datenbank**: Wie wenn du deine Geburtsurkunde anfragst – du bekommst jedes Mal dasselbe Dokument
- **Suchmaschine**: Wie wenn du den Bibliothekar bittest, Bücher über Katzen zu finden – er zeigt dir, was verfügbar ist
- **Generative KI**: Wie wenn du einen kenntnisreichen Freund nach Katzen fragst – er erzählt dir interessante Dinge in seinen eigenen Worten, zugeschnitten auf das, was du wissen möchtest
```mermaid
graph LR
A[Deine Frage] --> B[KI-Modell]
B --> C[Mustererkennung]
C --> D[Inhaltserstellung]
D --> E[Kontextbezogene Antwort]
F[Trainingsdaten Bücher, Artikel, Web] --> B
```
### Wie KI-Modelle lernen (Die einfache Version)
KI-Modelle lernen durch das Studium riesiger Datensätze, die Texte aus Büchern, Artikeln und Gesprächen enthalten. Dabei erkennen sie Muster in:
- Wie Gedanken in schriftlicher Kommunikation strukturiert sind
- Welche Wörter häufig zusammen erscheinen
- Wie sich Gespräche typischerweise entwickeln
- Kontextuelle Unterschiede zwischen formeller und informeller Kommunikation
**Es ist ähnlich wie Archäologen, die alte Sprachen entziffern**: Sie analysieren Tausende von Beispielen, um Grammatik, Wortschatz und kulturellen Kontext zu verstehen und werden schließlich in der Lage, neue Texte mit den gelernten Mustern zu interpretieren.
### Warum GitHub Models?
Wir nutzen GitHub Models aus einem praktischen Grund – es gibt uns Zugang zu KI auf Enterprise-Niveau, ohne dass wir unsere eigene KI-Infrastruktur aufbauen müssen (was du mir glauben kannst, dass du gerade jetzt nicht machen willst!). Stell es dir vor wie die Nutzung einer Wetter-API, anstatt selbst Wetterstationen überall aufzustellen, um das Wetter vorherzusagen.
Es ist im Grunde „KI als Dienstleistung“, und das Beste daran? Du kannst kostenlos starten und experimentieren, ohne eine riesige Rechnung befürchten zu müssen.
```mermaid
graph LR
A[Frontend Chat-Benutzeroberfläche] --> B[Ihre Backend-API]
B --> C[GitHub Modelle API]
C --> D[KI Modellverarbeitung]
D --> C
C --> B
B --> A
```
Wir werden GitHub Models für unsere Backend-Integration verwenden, die professionell leistungsfähige KI-Funktionalitäten über eine Entwickler-freundliche Schnittstelle bereitstellt. Der [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) dient als Testumgebung, in der du mit verschiedenen KI-Modellen experimentieren und deren Fähigkeiten verstehen kannst, bevor du sie im Code einsetzt.
## 🧠 Ökosystem der KI-Anwendungsentwicklung
```mermaid
mindmap
root((KI Entwicklung))
Verständnis der KI
Generative Modelle
Mustererkennung
Inhaltserstellung
Kontextverständnis
Antwortsynthese
KI Parameter
Temperatursteuerung
Token Begrenzungen
Top-p Filterung
Systemaufforderungen
Backend Architektur
API Integration
GitHub Modelle
Authentifizierung
Anfrageverwaltung
Fehlerverwaltung
Python Infrastruktur
FastAPI Framework
Asynchrone Operationen
Umgebungsicherheit
CORS Konfiguration
Frontend Erfahrung
Chat Schnittstelle
Echtzeit-Updates
Nachrichtenverlauf
Nutzerfeedback
Ladezustände
Moderne Web-Technologien
ES6 Klassen
Async/Await
DOM Manipulation
Ereignisverwaltung
Professionelle Muster
Sicherheitsbestimmungen
Token Verwaltung
Eingabevalidierung
XSS Verhinderung
Fehlergrenzen
Produktionsbereitschaft
Leistungsoptimierung
Responsives Design
Barrierefreiheit
Teststrategien
```
**Kernprinzip**: Die Entwicklung von KI-Anwendungen kombiniert traditionelle Webentwicklungsfähigkeiten mit KI-Dienstintegrationen und erschafft intelligente Anwendungen, die sich natürlich und reaktionsfreudig für Nutzer anfühlen.
**Das macht den Playground so nützlich:**
- **Teste** verschiedene KI-Modelle wie GPT-4o-mini, Claude und andere (alles kostenlos!)
- **Prüfe** deine Ideen und Eingaben, bevor du Code schreibst
- **Erhalte** gebrauchsfertige Code-Schnipsel in deiner Lieblingsprogrammiersprache
- **Passe** Einstellungen wie Kreativitätsgrad und Antwortlänge an, um zu sehen, wie das die Ausgabe beeinflusst
Wenn du ein wenig gespielt hast, klick einfach auf den Reiter „Code“ und wähle deine Programmiersprache, um den Implementierungscode zu erhalten, den du brauchst.
## Einrichtung der Python-Backend-Integration
Jetzt implementieren wir die KI-Integration mit Python. Python ist exzellent für KI-Anwendungen wegen seiner einfachen Syntax und leistungsstarken Bibliotheken. Wir starten mit dem Code aus dem GitHub Models Playground und refaktorieren ihn dann zu einer wiederverwendbaren, produktionsreifen Funktion.
### Verständnis der Basisimplementierung
Wenn du den Python-Code aus dem Playground holst, bekommst du etwa Folgendes. Kein Stress, wenn das zuerst viel aussieht – wir gehen es Schritt für Schritt durch:
```python
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# Um sich mit dem Modell zu authentifizieren, müssen Sie ein persönliches Zugriffstoken (PAT) in Ihren GitHub-Einstellungen generieren.
# Erstellen Sie Ihr PAT-Token, indem Sie den Anweisungen hier folgen: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
response = client.chat.completions.create(
messages=[
{
"role": "system",
"content": "",
},
{
"role": "user",
"content": "What is the capital of France?",
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
print(response.choices[0].message.content)
```
**Das passiert in diesem Code:**
- **Importieren** wir die benötigten Werkzeuge: `os` zum Lesen von Umgebungsvariablen und `OpenAI` für die Kommunikation mit der KI
- **Richten** wir den OpenAI-Client so ein, dass er auf die GitHub-KI-Server statt direkt auf OpenAI zugreift
- **Authentifizieren** wir uns mit einem speziellen GitHub-Token (dazu gleich mehr!)
- **Strukturieren** wir unsere Unterhaltung mit verschiedenen „Rollen“ – vergleichbar mit der Szenerie bei einem Theaterstück
- **Senden** wir unsere Anfrage an die KI mit einigen Feinabstimmungsparametern
- **Extrahieren** wir den eigentlichen Antworttext aus allen zurückgegebenen Daten
### Verständnis der Nachrichtenrollen: Das KI-Gesprächsrahmenwerk
KI-Konversationen nutzen eine spezifische Struktur mit verschiedenen „Rollen“, die unterschiedliche Zwecke erfüllen:
```python
messages=[
{
"role": "system",
"content": "You are a helpful assistant who explains things simply."
},
{
"role": "user",
"content": "What is machine learning?"
}
]
```
**Stell dir das vor wie eine Regieanweisung für ein Theaterstück:**
- **System-Rolle**: Wie Regieanweisungen für einen Schauspieler – sie sagt der KI, wie sie sich verhalten, welche Persönlichkeit sie haben und wie sie antworten soll
- **User-Rolle**: Die eigentliche Frage oder Nachricht von der Person, die deine Anwendung benutzt
- **Assistant-Rolle**: Die Antwort der KI (diese schickst du nicht mit, aber sie erscheint im Gesprächsverlauf)
**Echtes Beispiel**: Stell dir vor, du stellst einem Freund auf einer Party jemandem vor:
- **System-Nachricht**: „Das ist meine Freundin Sarah, sie ist Ärztin und erklärt medizinische Konzepte besonders einfach“
- **User-Nachricht**: „Kannst du erklären, wie Impfstoffe funktionieren?“
- **Assistant-Antwort**: Sarah antwortet als freundliche Ärztin, nicht als Anwältin oder Köchin
### Verständnis der KI-Parameter: Feineinstellung des Antwortverhaltens
Die numerischen Parameter in KI-API-Aufrufen steuern, wie das Modell Antworten generiert. Diese Einstellungen ermöglichen es dir, das Verhalten der KI an verschiedene Anwendungsfälle anzupassen:
#### Temperatur (0,0 bis 2,0): Der Kreativitätsregler
**Was sie bewirkt**: Steuert, wie kreativ oder vorhersagbar die Antworten der KI sind.
**Denk daran wie beim Improvisieren eines Jazzmusikers:**
- **Temperatur = 0,1**: Immer dieselbe Melodie spielen (sehr vorhersehbar)
- **Temperatur = 0,7**: Einige geschmackvolle Variationen hinzufügen, aber erkennbar bleiben (ausgewogene Kreativität)
- **Temperatur = 1,5**: Voll experimenteller Jazz mit unerwarteten Wendungen (sehr unvorhersehbar)
```python
# Sehr vorhersehbare Antworten (gut für sachliche Fragen)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "What is 2+2?"}],
temperature=0.1 # Wird fast immer "4" sagen
)
# Kreative Antworten (gut für Brainstorming)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Write a creative story opening"}],
temperature=1.2 # Wird einzigartige, unerwartete Geschichten erzeugen
)
```
#### Max Tokens (1 bis 4096+): Der Antwortlängenregler
**Was sie bewirkt**: Legt eine Grenze fest, wie lang die Antwort der KI sein kann.
**Tokens sind grob vergleichbar mit Wörtern** (etwa 1 Token = 0,75 Wörter in Englisch):
- **max_tokens=50**: Kurz und knapp (wie eine SMS)
- **max_tokens=500**: Ein schöner Absatz oder zwei
- **max_tokens=2000**: Eine ausführliche Erklärung mit Beispielen
```python
# Kurze, prägnante Antworten
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=100 # Erzwingt eine kurze Erklärung
)
# Detaillierte, umfassende Antworten
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=1500 # Ermöglicht ausführliche Erklärungen mit Beispielen
)
```
#### Top_p (0,0 bis 1,0): Der Fokusparameter
**Was sie bewirkt**: Steuert, wie sehr die KI sich auf die wahrscheinlichsten Antworten konzentriert.
**Stell dir vor, die KI hat einen riesigen Wortschatz, sortiert nach Wahrscheinlichkeit:**
- **top_p=0,1**: Berücksichtigt nur die obersten 10 % der wahrscheinlichsten Wörter (sehr fokussiert)
- **top_p=0,9**: Berücksichtigt 90 % der möglichen Wörter (kreativer)
- **top_p=1,0**: Berücksichtigt alles (maximale Vielfalt)
**Zum Beispiel**: Wenn du fragst „Der Himmel ist meistens...”
- **Niedriges top_p**: Sagt fast immer „blau“
- **Hohes top_p**: Könnte sagen „blau“, „bewölkt“, „weit“, „wechselhaft“, „schön“ usw.
### Das Ganze zusammenfügen: Parameterkombinationen für verschiedene Anwendungsfälle
```python
# Für sachliche, konsistente Antworten (wie ein Dokumentations-Bot)
factual_params = {
"temperature": 0.2,
"max_tokens": 300,
"top_p": 0.3
}
# Für kreative Schreibunterstützung
creative_params = {
"temperature": 1.1,
"max_tokens": 1000,
"top_p": 0.9
}
# Für gesprächige, hilfreiche Antworten (ausgewogen)
conversational_params = {
"temperature": 0.7,
"max_tokens": 500,
"top_p": 0.8
}
```
```mermaid
quadrantChart
title KI-Parameter-Optimierungs-Matrix
x-axis Geringe Kreativität --> Hohe Kreativität
y-axis Kurze Antwort --> Lange Antwort
quadrant-1 Kreative Inhalte
quadrant-2 Detaillierte Analyse
quadrant-3 Schnelle Fakten
quadrant-4 Konversationelle KI
Documentation Bot: [0.2, 0.3]
Customer Service: [0.4, 0.4]
General Assistant: [0.7, 0.5]
Creative Writer: [0.9, 0.9]
Brainstorming Tool: [0.8, 0.8]
```
**Warum diese Parameter wichtig sind**: Verschiedene Anwendungen benötigen unterschiedliche Arten von Antworten. Ein Kundenservice-Bot sollte konsistent und sachlich sein (niedrige Temperatur), während ein kreativer Schreibassistent fantasievoll und vielfältig sein sollte (hohe Temperatur). Mit diesen Parametern steuerst du die Persönlichkeit und den Stil deiner KI-Antworten.
```
**Here's what's happening in this code:**
- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
- **We authenticate** using a special GitHub token (more on that in a minute!)
- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
- **We send** our request to the AI with some fine-tuning parameters
- **We extract** the actual response text from all the data that comes back
> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.
### Creating a Reusable AI Function
Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:
```python
import asyncio
from openai import AsyncOpenAI
# Use AsyncOpenAI for better performance
client = AsyncOpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
"""
Sends a prompt to the AI model asynchronously and returns the response.
Args:
prompt: The user's question or message
system_message: Instructions that define the AI's behavior and personality
Returns:
str: The AI's response to the prompt
"""
try:
response = await client.chat.completions.create(
messages=[
{
"role": "system",
"content": system_message,
},
{
"role": "user",
"content": prompt,
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
return response.choices[0].message.content
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return "I'm sorry, I'm having trouble processing your request right now."
# Backward compatibility function for synchronous calls
def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
"""Synchronous wrapper for async AI calls."""
return asyncio.run(call_llm_async(prompt, system_message))
```
**Diese verbesserte Funktion verstehen:**
- **Akzeptiert** zwei Parameter: das Eingabe-Prompt des Nutzers und eine optionale Systemnachricht
- **Bietet** eine Standard-Systemnachricht für allgemeines Assistentenverhalten
- **Verwendet** Python-Typangaben für bessere Code-Dokumentation
- **Enthält** einen detaillierten Docstring, der Zweck und Parameter erklärt
- **Gibt** nur den Antwortinhalt zurück, was die Nutzung in unserer Web-API erleichtert
- **Behält** dieselben Modellparameter für konsistentes KI-Verhalten bei
### Die Magie der System-Prompts: KI-Persönlichkeit programmieren
Wenn Parameter steuern, wie die KI denkt, dann steuern System-Prompts, wer die KI denkt, dass sie ist. Das ist ehrlich gesagt einer der coolsten Aspekte bei der Arbeit mit KI – du gibst der KI eine komplette Persönlichkeit, ein Expertenniveau und einen Kommunikationsstil vor.
**Denk an System-Prompts wie die Besetzung verschiedener Rollen für unterschiedliche Schauspieler:** Statt einen generischen Assistenten zu haben, kannst du Spezialisten für unterschiedliche Situationen schaffen. Brauchst du eine geduldige Lehrerin? Einen kreativen Brainstorming-Partner? Einen sachlichen Business-Berater? Einfach den System-Prompt ändern!
#### Warum System-Prompts so mächtig sind
Hier kommt das Faszinierende: KI-Modelle wurden mit unzähligen Gesprächen trainiert, in denen Menschen unterschiedliche Rollen und Expertenniveaus eingenommen haben. Wenn du der KI eine bestimmte Rolle zuweist, ist das wie das Umschalten eines Schalters, der all diese gelernten Muster aktiviert.
**Es ist wie Method Acting für KI**: Sag zu einem Schauspieler „du bist ein weiser alter Professor“ und beobachte, wie er automatisch Haltung, Wortwahl und Gestik anpasst. KI macht etwas ganz Ähnliches mit Sprachmustern.
#### Effektive System-Prompts gestalten: Kunst und Wissenschaft
**Der Aufbau eines großartigen System-Prompts:**
1. **Rolle/Identität**: Wer ist die KI?
2. **Expertise**: Was weiß sie?
3. **Kommunikationsstil**: Wie spricht sie?
4. **Spezifische Anweisungen**: Worauf soll sie achten?
```python
# ❌ Vager System-Befehl
"You are helpful."
# ✅ Detaillierter, effektiver System-Befehl
"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
```
#### Beispiele für System-Prompts mit Kontext
Lass uns ansehen, wie unterschiedliche System-Prompts komplett verschiedene KI-Persönlichkeiten erschaffen:
```python
# Beispiel 1: Der geduldige Lehrer
teacher_prompt = """
You are an experienced programming instructor who has taught thousands of students.
You break down complex concepts into simple steps, use analogies from everyday life,
and always check if the student understands before moving on. You're encouraging
and never make students feel bad for not knowing something.
"""
# Beispiel 2: Der kreative Mitarbeiter
creative_prompt = """
You are a creative writing partner who loves brainstorming wild ideas. You're
enthusiastic, imaginative, and always build on the user's ideas rather than
replacing them. You ask thought-provoking questions to spark creativity and
offer unexpected perspectives that make stories more interesting.
"""
# Beispiel 3: Der strategische Geschäftsberater
business_prompt = """
You are a strategic business consultant with an MBA and 20 years of experience
helping startups scale. You think in frameworks, provide structured advice,
and always consider both short-term tactics and long-term strategy. You ask
probing questions to understand the full business context before giving advice.
"""
```
#### System-Prompts in Aktion sehen
Lass uns dieselbe Frage mit verschiedenen System-Prompts testen, um die dramatischen Unterschiede zu sehen:
**Frage**: „Wie handhabe ich die Nutzer-Authentifizierung in meiner Web-App?“
```python
# Mit Lehrer-Aufforderung:
teacher_response = call_llm(
"How do I handle user authentication in my web app?",
teacher_prompt
)
# Typische Antwort: "Großartige Frage! Lassen Sie uns die Authentifizierung in einfache Schritte aufteilen.
# Stellen Sie sich das vor wie einen Türsteher im Nachtclub, der Ausweise überprüft..."
# Mit Geschäftliches-Aufforderung:
business_response = call_llm(
"How do I handle user authentication in my web app?",
business_prompt
)
# Typische Antwort: "Aus strategischer Sicht ist Authentifizierung entscheidend für das Vertrauen der Benutzer
# und die Einhaltung gesetzlicher Vorschriften. Lassen Sie mich einen Rahmen skizzieren, der Sicherheit,
# Benutzererfahrung und Skalierbarkeit berücksichtigt..."
```
#### Fortgeschrittene Techniken für System-Prompts
**1. Kontext setzen**: Gib der KI Hintergrundinformationen
```python
system_prompt = """
You are helping a junior developer who just started their first job at a startup.
They know basic HTML/CSS/JavaScript but are new to backend development and databases.
Be encouraging and explain things step-by-step without being condescending.
"""
```
**2. Ausgabeformatierung**: Anweisungen für die Strukturierung von Antworten an die KI
```python
system_prompt = """
You are a technical mentor. Always structure your responses as:
1. Quick Answer (1-2 sentences)
2. Detailed Explanation
3. Code Example
4. Common Pitfalls to Avoid
5. Next Steps for Learning
"""
```
**3. Einschränkungen festlegen**: Definieren, was die KI NICHT tun soll
```python
system_prompt = """
You are a coding tutor focused on teaching best practices. Never write complete
solutions for the user - instead, guide them with hints and questions so they
learn by doing. Always explain the 'why' behind coding decisions.
"""
```
#### Warum das für Ihren Chat-Assistenten wichtig ist
Das Verständnis von System-Prompts gibt Ihnen unglaubliche Macht, spezialisierte KI-Assistenten zu erstellen:
- **Kundendienst-Bot**: Hilfreich, geduldig, richtlinienbewusst
- **Lerntutor**: Ermutigend, schrittweise, überprüft das Verständnis
- **Kreativpartner**: Fantasievoll, baut auf Ideen auf, fragt „Was wäre wenn?“
- **Technischer Experte**: Präzise, detailliert, sicherheitsbewusst
**Der entscheidende Erkenntnis**: Sie rufen nicht nur eine KI-API auf – Sie kreieren eine individuelle KI-Persönlichkeit, die Ihren spezifischen Anwendungsfall bedient. Das macht moderne KI-Anwendungen maßgeschneidert und nützlich statt generisch.
### 🎯 Pädagogischer Check-in: KI-Persönlichkeitsprogrammierung
**Pause und Reflexion**: Sie haben gerade gelernt, KI-Persönlichkeiten durch System-Prompts zu programmieren. Das ist eine grundlegende Fähigkeit in der modernen KI-Entwicklung.
**Kurze Selbstbewertung**:
- Können Sie erklären, wie sich System-Prompts von regulären Benutzer-Nachrichten unterscheiden?
- Was ist der Unterschied zwischen Temperatur- und top_p-Parametern?
- Wie würden Sie einen System-Prompt für einen speziellen Anwendungsfall (z. B. einen Codetutor) erstellen?
**Verbindung zur Praxis**: Die von Ihnen gelernten System-Prompt-Techniken werden in jeder großen KI-Anwendung verwendet – von GitHub Copilots Code-Hilfe bis zur ChatGPT-Konversationsschnittstelle. Sie meistern dieselben Muster, die KI-Produktteams bei großen Tech-Unternehmen einsetzen.
**Herausforderungsfrage**: Wie könnten Sie verschiedene KI-Persönlichkeiten für unterschiedliche Benutzertypen (Anfänger vs. Experte) entwerfen? Überlegen Sie, wie dasselbe zugrundeliegende KI-Modell verschiedene Zielgruppen durch Prompt-Engineering bedienen könnte.
## Aufbau der Web-API mit FastAPI: Ihr Hochleistungs-KI-Kommunikations-Hub
Nun bauen wir das Backend, das Ihr Frontend mit den KI-Diensten verbindet. Wir verwenden FastAPI, ein modernes Python-Framework, das sich ideal zum Erstellen von APIs für KI-Anwendungen eignet.
FastAPI bietet mehrere Vorteile für dieses Projekt: integrierte asynchrone Unterstützung zur Bearbeitung paralleler Anfragen, automatische API-Dokumentationserstellung und hervorragende Performance. Ihr FastAPI-Server fungiert als Vermittler, der Anfragen vom Frontend empfängt, mit KI-Diensten kommuniziert und formatierte Antworten zurückgibt.
### Warum FastAPI für KI-Anwendungen?
Sie fragen sich vielleicht: „Kann ich die KI nicht direkt aus meinem Frontend-JavaScript aufrufen?“ oder „Warum FastAPI statt Flask oder Django?“ Tolle Fragen!
**Darum ist FastAPI perfekt für unser Vorhaben:**
- **Standardmäßig asynchron**: Kann mehrere KI-Anfragen gleichzeitig bearbeiten, ohne blockiert zu werden
- **Automatische Dokumentation**: Zugriff auf `/docs` für schöne, interaktive API-Dokumentationsseite kostenfrei
- **Integrierte Validierung**: Erfasst Fehler, bevor sie Probleme verursachen
- **Blitzschnell**: Eines der schnellsten Python-Frameworks überhaupt
- **Modernes Python**: Nutzt alle neuesten Python-Features
**Und deshalb brauchen wir überhaupt ein Backend:**
**Sicherheit**: Ihr KI-API-Schlüssel ist wie ein Passwort – wenn Sie ihn im Frontend-JavaScript speichern, kann jeder, der den Quellcode Ihrer Webseite anschaut, ihn stehlen und Ihre KI-Guthaben verbrauchen. Das Backend schützt sensible Zugangsdaten.
**Rate-Limiting & Kontrolle**: Das Backend erlaubt es Ihnen, zu steuern, wie oft Nutzer Anfragen stellen können, Benutzer-Authentifizierung umzusetzen und Nutzung zu protokollieren.
**Datenverarbeitung**: Sie möchten vielleicht Gespräche speichern, unangemessene Inhalte filtern oder mehrere KI-Dienste kombinieren. Das passiert im Backend.
**Die Architektur ähnelt einem Client-Server-Modell:**
- **Frontend**: Benutzerschnittstelle für Interaktion
- **Backend-API**: Schicht für Anfrageverarbeitung und -weiterleitung
- **KI-Dienst**: Externe Berechnung und Antwortgenerierung
- **Umgebungsvariablen**: Sichere Konfiguration und Zugangsdatenverwaltung
### Verständnis des Anfrage-Antwort-Ablaufs
Folgen wir dem Weg, wenn ein Nutzer eine Nachricht sendet:
```mermaid
sequenceDiagram
participant User as 👤 Benutzer
participant Frontend as 🌐 Frontend
participant API as 🔧 FastAPI Server
participant AI as 🤖 KI-Dienst
User->>Frontend: Tippt "Hallo KI!"
Frontend->>API: POST /hello {"message": "Hallo KI!"}
Note over API: Validiert Anfrage Fügt Systemaufforderung hinzu
API->>AI: Sendet formatierte Anfrage
AI->>API: Gibt KI-Antwort zurück
Note over API: Verarbeitet Antwort Protokolliert Gespräch
API->>Frontend: {"response": "Hallo! Wie kann ich helfen?"}
Frontend->>User: Zeigt KI-Nachricht an
```
**Jeder Schritt erklärt:**
1. **Benutzerinteraktion**: Person tippt in die Chatoberfläche
2. **Frontend-Verarbeitung**: JavaScript erfasst die Eingabe und formatiert sie als JSON
3. **API-Validierung**: FastAPI prüft die Anfrage automatisch mit Pydantic-Modellen
4. **KI-Integration**: Backend fügt Kontext (System-Prompt) hinzu und ruft den KI-Dienst auf
5. **Antwortbehandlung**: API empfängt KI-Antwort und kann sie bei Bedarf modifizieren
6. **Frontend-Anzeige**: JavaScript zeigt die Antwort im Chat an
### Verständnis der API-Architektur
```mermaid
sequenceDiagram
participant Frontend
participant FastAPI
participant AI Function
participant GitHub Models
Frontend->>FastAPI: POST /hello {"message": "Hallo KI!"}
FastAPI->>AI Function: call_llm(nachricht, system_aufforderung)
AI Function->>GitHub Models: API-Anfrage
GitHub Models->>AI Function: KI-Antwort
AI Function->>FastAPI: Antworttext
FastAPI->>Frontend: {"response": "Hallo! Wie kann ich helfen?"}
```
```mermaid
flowchart TD
A[Benutzereingabe] --> B[Frontend-Validierung]
B --> C[HTTP POST Anfrage]
C --> D[FastAPI Router]
D --> E[Pydantic Validierung]
E --> F[KI Funktionsaufruf]
F --> G[GitHub Modelle API]
G --> H[Antwortverarbeitung]
H --> I[JSON Antwort]
I --> J[Frontend Aktualisierung]
subgraph "Sicherheitsschicht"
K[CORS Middleware]
L[Umgebungsvariablen]
M[Fehlerbehandlung]
end
D --> K
F --> L
H --> M
```
### Erstellung der FastAPI-Anwendung
Wir bauen unsere API Schritt für Schritt auf. Erstellen Sie eine Datei namens `api.py` mit folgendem FastAPI-Code:
```python
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# Protokollierung konfigurieren
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# FastAPI-Anwendung erstellen
app = FastAPI(
title="AI Chat API",
description="A high-performance API for AI-powered chat applications",
version="1.0.0"
)
# CORS konfigurieren
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Für die Produktion entsprechend konfigurieren
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# Pydantic-Modelle für Anforderungs-/Antwortvalidierung
class ChatMessage(BaseModel):
message: str
class ChatResponse(BaseModel):
response: str
@app.get("/")
async def root():
"""Root endpoint providing API information."""
return {
"message": "Welcome to the AI Chat API",
"docs": "/docs",
"health": "/health"
}
@app.get("/health")
async def health_check():
"""Health check endpoint."""
return {"status": "healthy", "service": "ai-chat-api"}
@app.post("/hello", response_model=ChatResponse)
async def chat_endpoint(chat_message: ChatMessage):
"""Main chat endpoint that processes messages and returns AI responses."""
try:
# Nachricht extrahieren und validieren
message = chat_message.message.strip()
if not message:
raise HTTPException(status_code=400, detail="Message cannot be empty")
logger.info(f"Processing message: {message[:50]}...")
# KI-Dienst aufrufen (Hinweis: call_llm sollte asynchron gemacht werden für bessere Leistung)
ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
logger.info("AI response generated successfully")
return ChatResponse(response=ai_response)
except HTTPException:
raise
except Exception as e:
logger.error(f"Error processing chat message: {str(e)}")
raise HTTPException(status_code=500, detail="Internal server error")
if __name__ == "__main__":
import uvicorn
uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
```
**Verständnis der FastAPI-Implementierung:**
- **Importiert** FastAPI für moderne Web-Framework-Funktionalität und Pydantic für Datenvalidierung
- **Erstellt** automatische API-Dokumentation (unter `/docs`, wenn der Server läuft)
- **Aktiviert** CORS-Middleware, um Frontend-Anfragen von verschiedenen Ursprüngen zu erlauben
- **Definiert** Pydantic-Modelle für automatische Validierung und Dokumentation von Anfragen/Antworten
- **Verwendet** asynchrone Endpunkte für bessere Performance bei parallelen Anfragen
- **Implementiert** korrekte HTTP-Statuscodes und Fehlerbehandlung mit HTTPException
- **Beinhaltet** strukturiertes Logging zum Monitoring und Debuggen
- **Bietet** Health-Check-Endpunkt zur Überwachung des Dienststatus
**Wichtige FastAPI-Vorteile gegenüber traditionellen Frameworks:**
- **Automatische Validierung**: Pydantic-Modelle sichern Datenintegrität vor der Verarbeitung
- **Interaktive Dokus**: `/docs` bietet automatisch generierte und testbare API-Dokumentation
- **Typensicherheit**: Python-Typen verhindern Laufzeitfehler und verbessern Codequalität
- **Asynchrone Unterstützung**: Mehrere KI-Anfragen gleichzeitig ohne Blockieren bearbeiten
- **Performance**: Deutlich schnellere Anfrageverarbeitung für Echtzeitanwendungen
### Verständnis von CORS: Der Sicherheitswächter des Webs
CORS (Cross-Origin Resource Sharing) ist wie ein Sicherheitswächter an einem Gebäude, der prüft, ob Besucher eintreten dürfen. Verstehen wir, warum das wichtig ist und wie es Ihre Anwendung beeinflusst.
#### Was ist CORS und warum existiert es?
**Das Problem**: Stellen Sie sich vor, jede beliebige Webseite könnte ohne Ihre Zustimmung Anfragen an die Webseite Ihrer Bank stellen. Ein Sicherheitsalptraum! Browser verhindern dies standardmäßig mit der „Same-Origin Policy“.
**Same-Origin Policy**: Browser erlauben Webseiten nur, Anfragen an dieselbe Domain, denselben Port und dasselbe Protokoll zu senden, von denen sie geladen wurden.
**Analogie aus der Realität**: Es ist wie bei einem Wohnhaus-Sicherheitsdienst – nur Bewohner (gleiche Herkunft) dürfen das Gebäude betreten. Wenn Sie einem Freund (andere Herkunft) Besuch erlauben wollen, müssen Sie der Sicherheit explizit Bescheid geben.
#### CORS in Ihrer Entwicklungsumgebung
Während der Entwicklung laufen Frontend und Backend auf verschiedenen Ports:
- Frontend: `http://localhost:3000` (oder file://, wenn HTML direkt geöffnet)
- Backend: `http://localhost:5000`
Das werden als „verschiedene Ursprünge“ betrachtet, obwohl beide auf demselben Rechner sind!
```python
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # Dies teilt Browsern mit: "Es ist in Ordnung, dass andere Ursprünge Anfragen an diese API stellen."
```
**Was die CORS-Konfiguration praktisch macht:**
- **Fügt** spezielle HTTP-Header zu API-Antworten hinzu, die Browsern sagen „diese Cross-Origin-Anfrage ist erlaubt“
- **Behandelt** „Preflight“-Anfragen (Browser prüfen manchmal vorher Berechtigungen)
- **Verhindert** die gefürchtete Fehlermeldung „blocked by CORS policy“ in Ihrer Browser-Konsole
#### CORS-Sicherheit: Entwicklung vs. Produktion
```python
# 🚨 Entwicklung: Erlaubt ALLE Ursprünge (praktisch, aber unsicher)
CORS(app)
# ✅ Produktion: Nur deine spezifische Frontend-Domain erlauben
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
# 🔒 Fortgeschritten: Verschiedene Ursprünge für unterschiedliche Umgebungen
if app.debug: # Entwicklungsmodus
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else: # Produktionsmodus
CORS(app, origins=["https://yourdomain.com"])
```
**Warum das wichtig ist**: In der Entwicklung ist `CORS(app)` wie eine unverschlossene Haustür – praktisch, aber nicht sicher. In der Produktion sollten Sie genau festlegen, welche Webseiten Ihre API ansprechen dürfen.
#### Gängige CORS-Szenarien und Lösungen
| Szenario | Problem | Lösung |
|-----------------------|--------------------------------|-------------------------------------|
| **Lokale Entwicklung** | Frontend erreicht Backend nicht | CORSMiddleware zu FastAPI hinzufügen |
| **GitHub Pages + Heroku** | Bereitgestelltes Frontend erreicht API nicht | GitHub Pages URL zu CORS-Ursprüngen hinzufügen |
| **Eigene Domain** | CORS-Fehler in Produktion | CORS-Ursprünge an Ihre Domain anpassen |
| **Mobile App** | App erreicht Web-API nicht | Domain der App hinzufügen oder `*` vorsichtig verwenden |
**Profi-Tipp**: Prüfen Sie CORS-Header in den Entwickler-Tools Ihres Browsers im Netzwerk-Tab. Achten Sie auf Header wie `Access-Control-Allow-Origin` in der Antwort.
### Fehlerbehandlung und Validierung
Beachten Sie, wie unsere API eine korrekte Fehlerbehandlung enthält:
```python
# Überprüfen Sie, ob wir eine Nachricht erhalten haben
if not message:
return jsonify({"error": "Message field is required"}), 400
```
**Wichtige Validierungsprinzipien:**
- **Prüft** erforderliche Felder vor der Anfragenverarbeitung
- **Gibt** aussagekräftige Fehlermeldungen im JSON-Format zurück
- **Verwendet** passende HTTP-Statuscodes (400 bei fehlerhaften Anfragen)
- **Bietet** klare Rückmeldungen zur Unterstützung der Frontend-Entwickler bei der Fehlersuche
## Einrichtung und Start Ihres Backends
Jetzt, wo wir unsere KI-Integration und den FastAPI-Server fertig haben, starten wir alles. Der Einrichtungsprozess umfasst die Installation von Python-Abhängigkeiten, Konfiguration von Umgebungsvariablen und Starten des Entwicklungsservers.
### Python-Umgebung einrichten
Legen wir Ihre Python-Entwicklungsumgebung an. Virtuelle Umgebungen sind wie das Manhattan-Projekt mit separaten Bereichen – jedes Projekt bekommt seinen eigenen isolierten Bereich mit spezifischen Tools und Abhängigkeiten, um Konflikte mit anderen Projekten zu vermeiden.
```bash
# Navigiere zu deinem Backend-Verzeichnis
cd backend
# Erstelle eine virtuelle Umgebung (wie das Einrichten eines sterilen Raums für dein Projekt)
python -m venv venv
# Aktiviere sie (Linux/Mac)
source ./venv/bin/activate
# Unter Windows verwende:
# venv\Scripts\activate
# Installiere die guten Sachen
pip install openai fastapi uvicorn python-dotenv
```
**Was wir gerade gemacht haben:**
- **Eine eigene kleine Python-Blase geschaffen**, in der wir Pakete installieren können, ohne andernorts etwas zu beeinflussen
- **Aktiviert**, damit unser Terminal genau diese Umgebung verwendet
- **Installation der Essentials**: OpenAI für KI-Magie, FastAPI für die Web-API, Uvicorn zum Ausführen des Servers und python-dotenv für sichere Geheimnisverwaltung
**Wichtige Abhängigkeiten erklärt:**
- **FastAPI**: Modernes, schnelles Web-Framework mit automatischer API-Dokumentation
- **Uvicorn**: Blitzschneller ASGI-Server zum Ausführen von FastAPI-Anwendungen
- **OpenAI**: Offizielle Bibliothek für GitHub-Modelle und OpenAI-API-Integration
- **python-dotenv**: Sicheres Laden von Umgebungsvariablen aus .env-Dateien
### Umgebung konfigurieren: Geheimnisse sicher verwahren
Bevor wir die API starten, sprechen wir über eine der wichtigsten Lektionen der Webentwicklung: Wie Sie Ihre Geheimnisse tatsächlich geheim halten. Umgebungsvariablen sind wie ein sicherer Tresor, auf den nur Ihre Anwendung Zugriff hat.
#### Was sind Umgebungsvariablen?
**Denken Sie an Umgebungsvariablen wie an einen Bankschließfach** – Sie legen Wertvolles hinein und nur Sie (und Ihre App) besitzen den Schlüssel. Statt sensible Informationen direkt im Code zu speichern (wo sie jeder sehen kann), bewahren Sie sie sicher in der Umgebung auf.
**Hier der Unterschied:**
- **Der falsche Weg**: Ihr Passwort auf ein Post-it schreiben und an den Monitor kleben
- **Der richtige Weg**: Ihr Passwort in einem sicheren Passwortmanager aufbewahren, auf den nur Sie Zugriff haben
#### Warum Umgebungsvariablen wichtig sind
```python
# 🚨 MACHE DAS NIEMALS - API-Schlüssel für alle sichtbar
client = OpenAI(
api_key="ghp_1234567890abcdef...", # Jeder kann ihn stehlen!
base_url="https://models.github.ai/inference"
)
# ✅ MACH DAS - API-Schlüssel sicher gespeichert
client = OpenAI(
api_key=os.environ["GITHUB_TOKEN"], # Nur deine App kann darauf zugreifen
base_url="https://models.github.ai/inference"
)
```
**Was passiert, wenn Sie Geheimnisse hardcoden:**
1. **Offenlegung im Versionskontrollsystem**: Jeder mit Zugriff auf Ihr Git-Repository sieht Ihren API-Schlüssel
2. **Öffentliche Repositories**: Wenn Sie zu GitHub pushen, ist Ihr Schlüssel für das ganze Internet sichtbar
3. **Teamfreigabe**: Andere Entwickler erhalten Zugriff auf Ihren persönlichen API-Schlüssel
4. **Sicherheitsverletzungen**: Wenn jemand Ihren Schlüssel stiehlt, kann er Ihre KI-Guthaben verbrauchen
#### Erstellung der Umgebungsdatei
Erstellen Sie eine `.env`-Datei in Ihrem Backend-Verzeichnis. Darin speichern Sie Ihre Geheimnisse lokal:
```bash
# .env-Datei - Diese sollte NIEMALS in Git eingecheckt werden
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
```
**Wie die .env-Datei funktioniert:**
- **Ein Geheimnis pro Zeile** im Format `KEY=value`
- **Keine Leerzeichen** um das Gleichheitszeichen
- **Keine Anführungszeichen** um Werte (in der Regel)
- **Kommentare** beginnen mit `#`
#### Erstellen Ihres persönlichen GitHub-Zugriffstokens
Ihr GitHub-Token ist wie ein spezielles Passwort, das Ihrer Anwendung erlaubt, GitHub-KI-Dienste zu nutzen:
**Schritt-für-Schritt Token-Erstellung:**
1. **Gehen Sie zu GitHub-Einstellungen** → Entwickler-Einstellungen → Personal Access Tokens → Tokens (classic)
2. **Klicken Sie auf „Generate new token (classic)“**
3. **Legen Sie das Ablaufdatum fest** (30 Tage für Tests, länger für Produktion)
4. **Wählen Sie Berechtigungen aus**: Aktivieren Sie „repo“ und alle weiteren benötigten Rechte
5. **Token generieren** und sofort kopieren (Sie sehen ihn danach nicht mehr!)
6. **In Ihre .env-Datei einfügen**
```bash
# Beispiel dafür, wie Ihr Token aussieht (dies ist gefälscht!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
```
#### Laden von Umgebungsvariablen in Python
```python
import os
from dotenv import load_dotenv
# Lade Umgebungsvariablen aus der .env-Datei
load_dotenv()
# Nun kannst du sicher auf sie zugreifen
api_key = os.environ.get("GITHUB_TOKEN")
if not api_key:
raise ValueError("GITHUB_TOKEN not found in environment variables!")
client = OpenAI(
api_key=api_key,
base_url="https://models.github.ai/inference"
)
```
**Was dieser Code macht:**
- **Lädt** Ihre .env-Datei und macht Variablen in Python verfügbar
- **Prüft**, ob das benötigte Token vorhanden ist (gute Fehlerbehandlung!)
- **Löst** einen klaren Fehler aus, wenn der Token fehlt
- **Verwendet** den Token sicher, ohne ihn im Code offenzulegen
#### Git-Sicherheit: Die .gitignore-Datei
Ihre `.gitignore`-Datei sagt Git, welche Dateien nie verfolgt oder hochgeladen werden sollen:
```bash
# .gitignore - Füge diese Zeilen hinzu
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
```
**Warum das entscheidend ist**: Sobald Sie `.env` in `.gitignore` aufnehmen, ignoriert Git Ihre Umgebungsdatei und verhindert versehentliches Hochladen Ihrer Geheimnisse zu GitHub.
#### Verschiedene Umgebungen, verschiedene Geheimnisse
Professionelle Anwendungen nutzen unterschiedliche API-Schlüssel für unterschiedliche Umgebungen:
```bash
# .env.entwicklung
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.produktion
GITHUB_TOKEN=your_production_token
DEBUG=False
```
**Warum das wichtig ist**: Sie wollen nicht, dass Ihre Entwicklungs-Experimente Ihr Produktiv-KI-Kontingent belasten, und Sie möchten verschiedene Sicherheitslevel für unterschiedliche Umgebungen.
### Starten Ihres Entwicklungsservers: Ihr FastAPI zum Leben erwecken
Jetzt kommt der spannende Moment – starten Sie Ihren FastAPI-Entwicklungsserver und sehen Sie, wie Ihre KI-Integration zum Leben erwacht! FastAPI verwendet Uvicorn, einen blitzschnellen ASGI-Server, der speziell für asynchrone Python-Anwendungen entwickelt wurde.
#### Verständnis des FastAPI-Server-Startprozesses
```bash
# Methode 1: Direkte Python-Ausführung (inklusive automatischem Neuladen)
python api.py
# Methode 2: Direkte Nutzung von Uvicorn (mehr Kontrolle)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
```
Wenn Sie diesen Befehl ausführen, passiert Folgendes hinter den Kulissen:
**1. Python lädt Ihre FastAPI-Anwendung**:
- Importiert alle erforderlichen Bibliotheken (FastAPI, Pydantic, OpenAI usw.)
- Lädt Umgebungsvariablen aus Ihrer `.env`-Datei
- Erstellt die FastAPI-Anwendungsinstanz mit automatischer Dokumentation
**2. Uvicorn konfiguriert den ASGI-Server**:
- Bindet an Port 5000 mit asynchronen Anfragenverarbeitungsfähigkeiten
- Richtet die Anfragen-Routing mit automatischer Validierung ein
- Aktiviert Hot Reload für die Entwicklung (Neustart bei Dateiänderungen)
- Generiert interaktive API-Dokumentation
**3. Server beginnt zu lauschen**:
- Ihr Terminal zeigt: `INFO: Uvicorn running on http://0.0.0.0:5000`
- Der Server kann mehrere gleichzeitige KI-Anfragen bearbeiten
- Ihre API ist bereit mit automatischer Dokumentation unter `http://localhost:5000/docs`
#### Was Sie sehen sollten, wenn alles funktioniert
```bash
$ python api.py
INFO: Will watch for changes in these directories: ['/your/project/path']
INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
INFO: Started reloader process [12345] using WatchFiles
INFO: Started server process [12346]
INFO: Waiting for application startup.
INFO: Application startup complete.
```
**Verstehen der FastAPI-Ausgabe:**
- **Will watch for changes**: Auto-Reload für die Entwicklung aktiviert
- **Uvicorn running**: Leistungsstarker ASGI-Server ist aktiv
- **Started reloader process**: Dateibeobachter für automatische Neustarts
- **Application startup complete**: FastAPI-Anwendung erfolgreich initialisiert
- **Interactive docs available**: Besuchen Sie `/docs` für automatische API-Dokumentation
#### Testen Ihrer FastAPI: Mehrere leistungsstarke Ansätze
FastAPI bietet mehrere bequeme Möglichkeiten, Ihre API zu testen, einschließlich automatischer interaktiver Dokumentation:
**Methode 1: Interaktive API-Dokumentation (empfohlen)**
1. Öffnen Sie Ihren Browser und gehen Sie zu `http://localhost:5000/docs`
2. Sie sehen Swagger UI mit allen dokumentierten Endpunkten
3. Klicken Sie auf `/hello` → „Try it out“ → Geben Sie eine Testnachricht ein → „Execute“
4. Sehen Sie die Antwort direkt im Browser mit korrekter Formatierung
**Methode 2: Einfacher Browser-Test**
1. Gehen Sie zu `http://localhost:5000` für den Root-Endpunkt
2. Gehen Sie zu `http://localhost:5000/health`, um die Servergesundheit zu prüfen
3. Dies bestätigt, dass Ihr FastAPI-Server ordnungsgemäß läuft
**Methode 2: Kommandozeilen-Test (Fortgeschritten)**
```bash
# Test mit curl (falls verfügbar)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# Erwartete Antwort:
# {"response": "Hallo! Ich bin Ihr KI-Assistent. Wie kann ich Ihnen heute helfen?"}
```
**Methode 3: Python-Testskript**
```python
# test_api.py - Erstelle diese Datei, um deine API zu testen
import requests
import json
# Teste den API-Endpunkt
url = "http://localhost:5000/hello"
data = {"message": "Tell me a joke about programming"}
response = requests.post(url, json=data)
if response.status_code == 200:
result = response.json()
print("AI Response:", result['response'])
else:
print("Error:", response.status_code, response.text)
```
#### Fehlerbehebung bei häufigen Startproblemen
| Fehlermeldung | Bedeutung | Lösung |
|---------------|------------|------------|
| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI ist nicht installiert | Führen Sie `pip install fastapi uvicorn` in Ihrer virtuellen Umgebung aus |
| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI-Server ist nicht installiert | Führen Sie `pip install uvicorn` in Ihrer virtuellen Umgebung aus |
| `KeyError: 'GITHUB_TOKEN'` | Umgebungsvariable nicht gefunden | Überprüfen Sie Ihre `.env`-Datei und den Aufruf von `load_dotenv()` |
| `Address already in use` | Port 5000 ist belegt | Beenden Sie andere Prozesse, die Port 5000 verwenden, oder ändern Sie den Port |
| `ValidationError` | Anfragedaten stimmen nicht mit Pydantic-Modell überein | Prüfen Sie, ob Ihr Anfrageformat dem erwarteten Schema entspricht |
| `HTTPException 422` | Nicht verarbeitbare Entität | Anfragevalidierung fehlgeschlagen, prüfen Sie `/docs` auf korrekte Formatierung |
| `OpenAI API error` | KI-Dienst-Authentifizierung fehlgeschlagen | Vergewissern Sie sich, dass Ihr GitHub-Token korrekt und berechtigt ist |
#### Best Practices für die Entwicklung
**Hot Reloading**: FastAPI mit Uvicorn bietet automatisches Neuladen, wenn Sie Änderungen an Ihren Python-Dateien speichern. Das bedeutet, Sie können Ihren Code ändern und sofort testen, ohne manuell neu starten zu müssen.
```python
# Hot Reloading explizit aktivieren
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True aktiviert Hot Reload
```
**Logging für die Entwicklung**: Fügen Sie Logging hinzu, um zu verstehen, was passiert:
```python
import logging
# Logging einrichten
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
@app.route("/hello", methods=["POST"])
def hello():
data = request.get_json()
message = data.get("message", "")
logger.info(f"Received message: {message}")
if not message:
logger.warning("Empty message received")
return jsonify({"error": "Message field is required"}), 400
try:
response = call_llm(message, "You are a helpful and friendly assistant.")
logger.info(f"AI response generated successfully")
return jsonify({"response": response})
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return jsonify({"error": "AI service temporarily unavailable"}), 500
```
**Warum Logging hilft**: Während der Entwicklung können Sie genau sehen, welche Anfragen hereinkommen, wie die KI antwortet und wo Fehler auftreten. Dies beschleunigt die Fehlersuche erheblich.
### Einrichtung für GitHub Codespaces: Cloud-Entwicklung leicht gemacht
GitHub Codespaces ist wie ein leistungsfähiger Entwicklungscomputer in der Cloud, auf den Sie von jedem Browser aus zugreifen können. Wenn Sie in Codespaces arbeiten, gibt es ein paar zusätzliche Schritte, um Ihr Backend für Ihr Frontend zugänglich zu machen.
#### Verständnis der Codespaces-Netzwerkstruktur
In einer lokalen Entwicklungsumgebung läuft alles auf demselben Computer:
- Backend: `http://localhost:5000`
- Frontend: `http://localhost:3000` (oder file://)
In Codespaces läuft Ihre Entwicklungsumgebung auf den Servern von GitHub, daher hat „localhost“ eine andere Bedeutung. GitHub erstellt automatisch öffentliche URLs für Ihre Dienste, aber Sie müssen diese richtig konfigurieren.
#### Schritt-für-Schritt-Konfiguration für Codespaces
**1. Starten Sie Ihren Backend-Server**:
```bash
cd backend
python api.py
```
Sie sehen die bekannte FastAPI/Uvicorn-Startmeldung, aber beachten Sie, dass sie innerhalb der Codespace-Umgebung läuft.
**2. Konfigurieren Sie die Port-Sichtbarkeit**:
- Suchen Sie in VS Code im unteren Bereich die Registerkarte „Ports“
- Finden Sie Port 5000 in der Liste
- Rechtsklicken Sie auf Port 5000
- Wählen Sie „Port Visibility“ → „Public“ aus
**Warum öffentlich machen?** Standardmäßig sind Codespace-Ports privat (nur für Sie zugänglich). Öffentlich machen ermöglicht es Ihrem Frontend (das im Browser läuft), mit Ihrem Backend zu kommunizieren.
**3. Holen Sie sich Ihre öffentliche URL**:
Nach dem Öffentlichmachen sehen Sie eine URL wie:
```
https://your-codespace-name-5000.app.github.dev
```
**4. Aktualisieren Sie Ihre Frontend-Konfiguration**:
```javascript
// Aktualisiere in deiner Frontend-app.js die BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
```
#### Verständnis der Codespace-URLs
Codespace-URLs folgen einem vorhersehbaren Muster:
```
https://[codespace-name]-[port].app.github.dev
```
**Aufgeschlüsselt:**
- `codespace-name`: Ein eindeutiger Identifikator für Ihren Codespace (normalerweise mit Ihrem Benutzernamen)
- `port`: Die Portnummer, auf der Ihr Dienst läuft (5000 für unsere FastAPI-App)
- `app.github.dev`: Die GitHub-Domain für Codespace-Anwendungen
#### Testen Ihrer Codespace-Einrichtung
**1. Testen Sie das Backend direkt**:
Öffnen Sie Ihre öffentliche URL in einem neuen Browser-Tab. Sie sollten sehen:
```
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
```
**2. Testen Sie mit den Entwicklerwerkzeugen im Browser**:
```javascript
// Öffnen Sie die Browser-Konsole und testen Sie Ihre API
fetch('https://your-codespace-name-5000.app.github.dev/hello', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({message: 'Hello from Codespaces!'})
})
.then(response => response.json())
.then(data => console.log(data));
```
#### Codespaces vs. lokale Entwicklung
| Aspekt | Lokale Entwicklung | GitHub Codespaces |
|--------|--------------------|-------------------|
| **Setup-Zeit** | Länger (Installation von Python, Abhängigkeiten) | Sofort (vorkonfigurierte Umgebung) |
| **URL-Zugriff** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
| **Port-Konfiguration** | Automatisch | Manuell (Ports öffentlich machen) |
| **Dateipersistenz** | Lokaler Rechner | GitHub-Repository |
| **Zusammenarbeit** | Schwierige Freigabe der Umgebung | Einfaches Teilen des Codespace-Links |
| **Internetabhängigkeit** | Nur für KI-API-Aufrufe | Für alles erforderlich |
#### Tipps für die Entwicklung in Codespaces
**Umgebungsvariablen in Codespaces**:
Ihre `.env`-Datei funktioniert wie gewohnt in Codespaces, aber Sie können Umgebungsvariablen auch direkt in Codespaces setzen:
```bash
# Setze Umgebungsvariable für die aktuelle Sitzung
export GITHUB_TOKEN="your_token_here"
# Oder füge sie deiner .bashrc für die Persistenz hinzu
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
```
**Port-Management**:
- Codespaces erkennt automatisch, wenn Ihre Anwendung beginnt, auf einem Port zu lauschen
- Sie können mehrere Ports gleichzeitig weiterleiten (nützlich, wenn Sie später eine Datenbank hinzufügen)
- Die Ports bleiben zugänglich, solange Ihr Codespace läuft
**Entwicklungs-Workflow**:
1. Code-Änderungen in VS Code vornehmen
2. FastAPI lädt automatisch neu (dank Uvicorns Reload-Modus)
3. Änderungen sofort über die öffentliche URL testen
4. Änderungen committen und pushen, wenn bereit
> 💡 **Pro Tipp**: Legen Sie während der Entwicklung ein Lesezeichen für die Backend-URL Ihres Codespaces an. Da Codespace-Namen stabil sind, ändert sich die URL nicht, solange Sie denselben Codespace verwenden.
## Erstellung der Frontend-Chat-Oberfläche: Wo Menschen auf KI treffen
Jetzt bauen wir die Benutzeroberfläche – den Teil, der bestimmt, wie Menschen mit Ihrem KI-Assistenten interagieren. Wie beim Design der ursprünglichen iPhone-Oberfläche konzentrieren wir uns darauf, komplexe Technologie intuitiv und natürlich bedienbar zu machen.
### Verständnis moderner Frontend-Architektur
Unsere Chat-Oberfläche wird das sein, was man eine „Single Page Application“ oder SPA nennt. Statt des alten Ansatzes, bei dem jeder Klick eine neue Seite lädt, aktualisiert unsere App sanft und sofort:
**Alte Webseiten**: Wie das Lesen eines physischen Buchs – Sie blättern komplett neue Seiten um
**Unsere Chat-App**: Wie die Nutzung Ihres Telefons – alles fließt und aktualisiert sich nahtlos
```mermaid
graph TD
A[Benutzer gibt Nachricht ein] --> B[JavaScript erfasst Eingabe]
B --> C[Daten validieren & formatieren]
C --> D[An Backend-API senden]
D --> E[Ladezustand anzeigen]
E --> F[KI-Antwort erhalten]
F --> G[Chat-Oberfläche aktualisieren]
G --> H[Bereit für nächste Nachricht]
```
```mermaid
classDiagram
class ChatApp {
+nachrichten: HTMLElement
+formular: HTMLElement
+eingabe: HTMLElement
+sendeButton: HTMLElement
+BASIS_URL: string
+API_ENDPOINT: string
+konstruktor()
+initialisiereEreignisListener()
+behandleAbsenden(ereignis)
+rufeAPIAuf(nachricht)
+fuegeNachrichtHinzu(text, rolle)
+escapeHtml(text)
+rolleNachUnten()
+setzeLaden(istLadend)
}
ChatApp --> DOM : manipuliert
ChatApp --> FastAPI : sendet Anfragen
```
### Die drei Säulen der Frontend-Entwicklung
Jede Frontend-Anwendung – von einfachen Webseiten bis zu komplexen Apps wie Discord oder Slack – basiert auf drei Kerntechnologien. Man kann sie als Fundament all dessen sehen, was Sie im Web sehen und bedienen:
**HTML (Struktur)**: Das ist Ihr Fundament
- Bestimmt, welche Elemente existieren (Buttons, Textfelder, Container)
- Gibt dem Inhalt Bedeutung (das ist eine Überschrift, das ist ein Formular usw.)
- Schafft die Grundstruktur, auf der alles andere aufbaut
**CSS (Präsentation)**: Das ist Ihr Innenarchitekt
- Sorgt dafür, dass alles schön aussieht (Farben, Schriftarten, Layouts)
- Kümmert sich um unterschiedliche Bildschirmgrößen (Telefon vs. Laptop vs. Tablet)
- Erzeugt sanfte Animationen und visuelles Feedback
**JavaScript (Verhalten)**: Das ist Ihr Gehirn
- Reagiert auf Nutzeraktionen (Klicks, Tippen, Scrollen)
- Kommuniziert mit Ihrem Backend und aktualisiert die Seite
- Macht alles interaktiv und dynamisch
**Man kann es sich vorstellen wie architektonisches Design:**
- **HTML**: Der strukturelle Bauplan (Definieren von Räumen und Beziehungen)
- **CSS**: Das ästhetische und umweltbezogene Design (visueller Stil und Nutzererlebnis)
- **JavaScript**: Die mechanischen Systeme (Funktionalität und Interaktivität)
### Warum moderne JavaScript-Architektur wichtig ist
Unsere Chat-Anwendung wird moderne JavaScript-Muster verwenden, die Sie auch in professionellen Anwendungen sehen. Das Verständnis dieser Konzepte hilft Ihnen beim Wachsen als Entwickler:
**Klassenbasierte Architektur**: Wir organisieren unseren Code in Klassen, was wie das Erstellen von Bauplänen für Objekte ist
**Async/Await**: Moderner Weg, um längere Operationen (z. B. API-Aufrufe) zu handhaben
**Eventgesteuerte Programmierung**: Unsere App reagiert auf Nutzeraktionen (Klicks, Tastendruck) statt in einer Schleife zu laufen
**DOM-Manipulation**: Dynamisches Aktualisieren des Webseiteninhalts basierend auf Nutzerinteraktionen und API-Antworten
### Projektstruktur-Einrichtung
Erstellen Sie ein Frontend-Verzeichnis mit dieser organisierten Struktur:
```text
frontend/
├── index.html # Main HTML structure
├── app.js # JavaScript functionality
└── styles.css # Visual styling
```
**Verständnis der Architektur:**
- **Trennt** die Verantwortlichkeiten zwischen Struktur (HTML), Verhalten (JavaScript) und Präsentation (CSS)
- **Bewahrt** eine einfache Dateistruktur, die leicht zu navigieren und zu ändern ist
- **Folgt** den Best Practices der Webentwicklung für Organisation und Wartbarkeit
### Aufbau des HTML-Fundaments: Semantische Struktur für Barrierefreiheit
Beginnen wir mit der HTML-Struktur. Moderne Webentwicklung legt Wert auf „semantisches HTML“ – die Verwendung von HTML-Elementen, die ihren Zweck klar beschreiben und nicht nur ihr Aussehen. Dies macht Ihre Anwendung zugänglich für Bildschirmleser, Suchmaschinen und andere Tools.
**Warum semantisches HTML wichtig ist**: Stellen Sie sich vor, Sie beschreiben Ihre Chat-App jemandem am Telefon. Sie würden sagen: „Es gibt einen Header mit dem Titel, einen Hauptbereich, in dem Gespräche stattfinden, und ein Formular unten für die Eingabe von Nachrichten.“ Semantisches HTML verwendet Elemente, die dieser natürlichen Beschreibung entsprechen.
Erstellen Sie `index.html` mit diesem durchdachten Markup:
```html
AI Chat Assistant
AI Chat Assistant
Ask me anything!
```
**Verstehen Sie jedes HTML-Element und seinen Zweck:**
#### Dokumentstruktur
- **``**: Teilt dem Browser mit, dass es sich um modernes HTML5 handelt
- **``**: Gibt die Sprache der Seite für Bildschirmleser und Übersetzungstools an
- **``**: Stellt die richtige Zeichenkodierung für internationalen Text sicher
- **``**: Macht die Seite mobil-responsive durch Kontrolle von Zoom und Skalierung
#### Semantische Elemente
- **``**: Identifiziert klar den oberen Bereich mit Titel und Beschreibung
- **``**: Bezeichnet den Hauptinhalt (wo die Unterhaltungen stattfinden)
- **`