# Claude Code: Einsteiger-Grundlagen > Umfassender Leitfaden zur Arbeit mit Claude Code von Anthropic: CLI-Installation, Authentifizierung, Berechtigungsverwaltung, Tastenkürzel und schrittweise Entwicklung des ersten Projekts. Claude Code ist das offizielle Command-Line-Interface von Anthropic. Es kann Quellcode lesen, Änderungen vornehmen, Befehle ausführen und direkt im Terminal mit Git interagieren – alles über einen natürlichen Sprachdialog. Es handelt sich dabei nicht um ein separates Webchat-Fenster, aus dem man Code manuell kopieren muss, sondern um einen vollwertigen autonomen Agenten, der unmittelbar innerhalb Ihres Projekts operiert. Dieses Handbuch ist Ihr Startpunkt für den schnellen Einstieg in Claude Code. Das Material ist in drei logische Blöcke unterteilt: - **Modul 1 – Installation und Basiskonfiguration:** Deployment des CLI, Authentifizierung via API oder OAuth, erster Start und Überblick über die Konfigurationsdateien. - **Modul 2 – Arbeitssitzung und Interaktion:** Kontextmanagement, Hotkeys, Slash-Befehle, Non-Interactive-Modus und Speicheroptimierung (`/compact`). - **Modul 3 – Sicherheit und Berechtigungsmodell:** Einrichtung der `settings.json`-Dateien, Erstellung von Allow- und Deny-Listen für Bash-Befehle. Jedes Modul wird durch eine praktische Übung abgerundet, bei der Sie eine reale Next.js-Webkomponente erstellen, verfeinern und finalisieren. --- ## 1. Was ist Claude Code und Systemanforderungen ### 1.1. Was ist Claude Code und seine Unterschiede zum Webchat Claude Code integriert sich als Terminal-Assistent in Ihren täglichen Entwickler-Stack. Im Gegensatz zu einem traditionellen Webchat verfügt der Agent über einen Satz Tools: - **Lesen und Suchen:** Inspektion einzelner Dateien, Suche nach Vorkommen über reguläre Ausdrücke (`grep`) und Orientierung in der Projektstruktur (`glob`). - **Code-Modifikation:** Generierung punktueller Dateiänderungen über den Patch/Diff-Mechanismus, wodurch das vollständige Überschreiben großer Dateien vermieden wird. - **Ausführung von Systembefehlen:** Starten von Tests, Compilern, Lintern und Git-Befehlen mit der Möglichkeit, Exit-Codes und Kompilierungsfehler zu analysieren. ### 1.2. Systemanforderungen und Umgebungsvorbereitung Stellen Sie vor der Installation sicher, dass die folgenden Komponenten vorhanden sind: - **Betriebssystem:** macOS, eine aktuelle Linux-Distribution oder Windows über das Subsystem WSL2. - **Laufzeitumgebung:** Node.js Version 18.0 oder neuer (überprüfen Sie dies mit `node -v`). - **Versionskontrollsystem:** Git Version 2.20+ (überprüfen Sie dies mit `git --version`). - **Zugang zu Anthropic-Modellen:** Ein aktiver API-Key der Anthropic Console oder ein Konto mit einem Claude Max Plan. --- ## 2. Installation und Authentifizierung ### 2.1. Installation des CLI über npm und Paketmanager Claude Code wird als globales Paket im npm-Registry verteilt. Führen Sie den Installationsbefehl im Terminal aus: ```bash npm install -g @anthropic-ai/claude-code ``` Überprüfen Sie die korrekte Installation der Binary-Datei: ```bash claude --version ``` Wenn das Terminal einen Fehler `command not found` zurückgibt, fehlt der Pfad zu den globalen npm-Paketen in der Umgebungsvariable `PATH`. Eine detaillierte Lösung finden Sie im Diagnoseblock unten. ### 2.2. Authentifizierung und Verknüpfung des Anthropic-Kontos Es werden zwei Autorisierungsmethoden unterstützt: **Variante 1 – Anthropic API-Key:** Geben Sie das Token über eine Umgebungsvariable an: ```bash export ANTHROPIC_API_KEY="sk-ant-ваш-ключ-api" ``` Damit der Key zwischen Neustarts des Terminals erhalten bleibt, fügen Sie den Befehl zur Konfigurationsdatei Ihrer Shell hinzu: ```bash echo 'export ANTHROPIC_API_KEY="sk-ant-ваш-ключ-api"' >> ~/.zshrc source ~/.zshrc ``` **Variante 2 – Claude Max Abonnement (OAuth):** Wenn Sie ein Claude Max Abonnement ($100 oder $200/Monat) nutzen, melden Sie sich ohne separaten API-Key an: ```bash claude login ``` Der Befehl öffnet standardmäßig eine Sitzung in Ihrem Browser zur Bestätigung des Zugriffs. --- ## 3. Erster Start und Basiskonfiguration ### 3.1. Erster Start im Projekt und Umgebungsdverifizierung Wechseln Sie in das Verzeichnis eines beliebigen Code-Projekts und initialisieren Sie Claude Code: ```bash cd ~/my-project claude ``` Nach dem Start befinden Sie sich in einer interaktiven Kommando-Umgebung. Versuchen Sie, eine grundlegende Testanfrage zu senden: ```text Summarize the structure of this project and list the main technologies used. ``` Claude überprüft automatisch die `package.json`, Build-Konfigurationen und die Verzeichnisstruktur und erstellt anschließend eine kurze Einführungsübersicht. ### 3.2. Basiskonfiguration und Fehlerbehebung (Troubleshooting) Die Konfigurationsdateien befinden sich im Verzeichnis `~/.claude/`: - `~/.claude/settings.json` – Globale Berechtigungen und Einschränkungen für den Tool-Zugriff. - `~/.claude/CLAUDE.md` – Persönliche Systemanweisungen des Benutzers. - `.claude/settings.json` – Projekteinstellungen (werden im Versionskontrollsystem fixiert). - `CLAUDE.md` – Anweisungen auf Repository-Ebene (Architektur, Linting-Regeln). | Problem beim Start | Ursache | Ingenieurslösung | | :--- | :--- | :--- | | `claude: command not found` | npm bin-Verzeichnis nicht in `PATH` hinzugefügt | Pfad zur Shell hinzufügen: `export PATH="$(npm config get prefix)/bin:$PATH"` | | Autorisierungsfehler `401 Unauthorized` | Ungültiger oder abgelaufener API-Key | Führen Sie `claude logout` aus, überprüfen Sie den Wert von `ANTHROPIC_API_KEY` und wiederholen Sie `claude login` | | Langsame Sitzungsinitialisierung | Indexierung eines großen Repositories | Der erste Start erfordert die Analyse des Dateibaums; folgende Iterationen nutzen den Cache | --- ## 4. Praxis: Erstellung der ersten Anwendung ### 4.1. Schritt-für-Schritt-Algorithmus für das Prototyp-Deployment Das Ziel der ersten Übung ist es, praktisch einen minimalen Client-Komponenten für Next.js / React mit Claude Code zu erstellen: 1. Bitten Sie Claude, eine neue Seiten-Datei `app/practice/page.tsx` zu erstellen. 2. Beauftragen Sie ihn, einen einfachen Ladezustand und einen Button zum Aufrufen eines Test-Endpunkts zu beschreiben. 3. Überprüfen Sie die Funktionsfähigkeit der Oberfläche unter `http://localhost:3000/practice`. ### 4.2. Startvorlage der Komponente und lokale Überprüfung Der Basiscode des Prototyps: ```tsx // app/practice/page.tsx 'use client'; import { useState } from 'react'; export default function PracticePage() { const [result, setResult] = useState(''); const [loading, setLoading] = useState(false); async function runTest() { setLoading(true); try { const response = await fetch('/api/test'); const data = await response.json(); setResult(data.message || 'Запит виконано успішно'); } catch { setResult('Помилка виконання тестового запиту'); } finally { setLoading(false); } } return (

Практична вправа 1: Прототип

{result && (
{result}
)}
); } ``` --- ## 5. Arbeitssitzung und Dialogzyklus ### 5.1. Start einer interaktiven REPL-Sitzung Für die tägliche Entwicklung wechseln Sie in das Arbeitsverzeichnis und aktivieren den interaktiven Read-Eval-Print-Loop (REPL): ```bash cd ~/my-project claude ``` Claude behält den Gesprächskontext während der Sitzung bei, erinnert sich an geänderte Dateien und erkannte Fehler. Die Kommunikation erfolgt in natürlicher Sprache ohne formalisierte Syntax. ### 5.2. Dialogzyklus: Planung, Tools und Ausführung Die Arbeit des Agenten folgt einem fünfphasigen Zyklus: ```mermaid flowchart TD A["Користувач ставить завдання природною мовою"] --> B["Claude аналізує кодову базу та формує план"] B --> C["Агент запитує дозвіл на модифікацію файлів/команд"] C --> D["Виконання затверджених дій та валідація дифу"] D --> E["Користувач перевіряє результат та надає фідбек"] ``` Ein typisches Interaktionsfragment: - **Anfrage:** `Füge einen Ladeindikator auf der Dashboard-Seite hinzu.` - **Analyse:** Claude liest `app/dashboard/page.tsx` und erkennt das Fehlen einer Datenwartungsverarbeitung. - **Vorschlag:** Erstellung einer `loading.tsx`-Komponente und Umschließen des Blocks mit `Suspense`. - **Zusammenfassung:** Der Agent zeigt einen punktgenauen Diff an und wartet auf Ihre Genehmigung. --- ## 6. Hotkeys, Befehle und Arbeitsmodi ### 6.1. Hotkeys und Slash-Befehle zur Kontextsteuerung Effiziente Navigation im Terminal basiert auf systemischen Abkürzungen: | Kombination | Zweck | | :--- | :--- | | `Enter` | Senden der aktuellen Nachricht an den Agenten | | `Escape` | Sofortiges Abbrechen der aktiven Generierung oder Tool-Ausführung | | `Ctrl+C` | Sauberes Beenden der Claude Code-Sitzung | | `Up` / `Down` | Durchsuchen der vorherigen Anfragehistorie | | `Shift+Tab` | Umschalten zwischen einzeiliger und mehrzeiliger Eingabe | Spezielle eingebaute Slash-Befehle zur Steuerung der Umgebung: - `/help` – Liste der verfügbaren Direktiven. - `/clear` – Zurücksetzen der aktuellen Nachrichtenhistorie. - `/compact` – Komprimierung des Kontextfensters zur Token-Einsparung ohne Verlust des Wesentlichen. - `/model` – Schneller Wechsel des aktuellen Modells (z. B. Umschalten zwischen Sonnet und Opus). - `/permissions` – Überprüfung der aktiven Berechtigungen für den Aufruf von Systemutilities. ### 6.2. Non-Interactive-Modus und Tipps für effizientes Arbeiten Verwenden Sie den Flag `-p` (`print`), wenn Sie Claude Code in Automatisierungsskripten oder für einmalige Operationen einsetzen möchten: ```bash # Отримання швидкої довідки про проєкт claude -p "Яку базу даних використовує цей проєкт?" # Передача логів для аналізу через пайплайн cat error.log | claude -p "Знайди першопричину збою та запропонуй рішення" ``` > 💡 **Empfehlungen für stabiles Arbeiten:** > - Formulieren Sie Anforderungen konkret: Statt „korrigiere das Formular“ schreiben Sie „füge Debounce zum Klick-Handler des Submit-Buttons des Formulars hinzu“. > - Führen Sie regelmäßig `/compact` aus, wenn die Länge des Dialogs 30–40 Schritte überschreitet. --- ## 7. Praxis: Verfeinerung der Anwendung ### 7.1. Refactoring und Verbesserung der Codebasis durch Claude Im zweiten praktischen Teil erweitern wir den erstellten Prototyp, indem wir Claude beauftragen, die Behandlung von Edge Cases und die Typisierung zu verbessern. Senden Sie dem Agenten folgende Anweisung: ```text Відкрий app/practice/page.tsx. Додай коректну строгу типізацію TypeScript, блок перехоплення помилок try/catch з відображенням тексту помилки на червоному тлі, та додай анімований CSS-спінер під час завантаження. ``` ### 7.2. Erweiterung der Funktionalität: Styling, Fehlerbehandlung und Animation Der aktualisierte Seiten-Code: ```tsx // app/practice/page.tsx - Доопрацьована версія 'use client'; import { useState } from 'react'; export default function PracticePage() { const [result, setResult] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); async function runTest() { setLoading(true); setError(null); try { const response = await fetch('/api/test'); if (!response.ok) throw new Error(`Помилка сервера: код ${response.status}`); const data = await response.json(); setResult(data.message || 'Операцію успішно завершено'); } catch (err: unknown) { setError(err instanceof Error ? err.message : 'Сталася непередбачена помилка'); } finally { setLoading(false); } } return (

Практична вправа 2: Доопрацювання

Тестування обробки винятків та динамічних станів.

{error && (
{error}
)} {result && (
{result}
)}
); } ``` --- ## 8. Berechtigungsmodell und Sicherheit ### 8.1. Architektur des Berechtigungsmodells und Risikostufen der Tools Das Sicherheitssystem von Claude Code teilt alle verfügbaren Operationen in zwei fundamentale Kategorien basierend auf dem potenziellen Risiko ein: | Zugriffslevel | Verfügbare Operationen | Ausführungsmechanismus | | :--- | :--- | :--- | | **Sicher (Read-only)** | `Read`, `Grep`, `Glob`, Verzeichnislisting | Werden automatisch ohne Benutzerabfragen ausgeführt | | **Potenziell gefährlich** | `Edit`, `Write`, `Bash`, Löschen von Dateien, `git push` | Erfordern eine explizite Bestätigung vor der Ausführung | ### 8.2. Mechanik der Genehmigung und Ablehnung potenziell gefährlicher Aktionen Vor der Ausführung einer riskanten Aktion stoppt Claude die Ausführung und zeigt eine Abfrage an: ```text Claude wants to run: npm install express Allow? (y/n/always) ``` Verfügbare Auswahlmöglichkeiten: - `y` (`yes`) – Genehmigt den spezifischen einmaligen Aufruf. - `n` (`no`) – Lehnt die Aktion ab und gibt den Grund für die Ablehnung an. - `always` (oder `a`) – Gewährt die Erlaubnis für den Aufruf dieses Tools bis zum Ende der aktuellen Arbeitssitzung. --- ## 9. Einstellungsdateien und Rechteverwaltung ### 9.1. Globale und projektbezogene Einstellungsdateien (settings.json) Um permanente Regeln festzulegen, erstellen oder bearbeiten Sie die globale Datei `~/.claude/settings.json`: ```json { "permissions": { "allow": [ "Read", "Glob", "Grep", "Edit", "Write", "Bash(npm run *)", "Bash(git status)" ], "deny": [ "Bash(rm -rf *)", "Bash(sudo *)" ] } } ``` ### 9.2. Muster für Bash-Befehle und Überprüfung über /permissions Der Abschnitt `permissions.allow` unterstützt flexible Suchmasken (Glob Patterns): - `Bash(npm test *)` – Erlaubt das Ausführen von Testpaketen ohne Bestätigungen. - `Bash(git commit *)` – Erlaubt das Committen von Änderungen. - `Bash(rm -rf *)` in der `deny`-Liste – Garantiert die absolute Blockierung von Massenlöschoperationen. Um die gültigen Regeln jederzeit in der Sitzung einzusehen, führen Sie den Befehl `/permissions` aus. --- ## 10. Best Practices für Sicherheit und Arbeit ### 10.1. Strategie der Zugriffskontrolle: Prinzip der geringsten Privilegien - **Schrittweise Rechteerweiterung:** Beginnen Sie die Arbeit mit voller manueller Moderation. Fügen Sie Befehle nur dann zur `allow`-Liste hinzu, wenn Sie sich von der Stabilität des Agentenverhaltens überzeugt haben. - **Verbot von Wildcards für Bash:** Geben Sie niemals `"Bash(*)"` in den erlaubten Tools an – dies hebt die schützende Sandbox vollständig auf. - **Aktive Nutzung von deny:** Blockieren Sie destruktive Utilities (`sudo`, `mkfs`, `dd`) explizit, um versehentliche Systemschäden zu verhindern. ### 10.2. Schutz von Umgebungssecrets und sorgfältiger Audit von Diffs - **Token-Isolation:** Claude Code hat Zugriff auf die Umgebungsvariablen der aktuellen Shell. Halten Sie keine kritischen Keys für Production-Datenbanken in der Arbeitssitzung bereit. - **Diff-Prüfung vor Genehmigung:** Analysieren Sie immer den vorgeschlagenen Diff der Dateiänderung, um rechtzeitig versehentliches Löschen angrenzender Module zu bemerken. --- ## 11. Praxis: Finale Version der Anwendung ### 11.1. Gesicherter Workflow und Integration von Checks Im letzten praktischen Block erstellen wir eine vollwertige production-ready Monitoring-Dashboard-Komponente: 1. Fixieren Sie die Sicherheitsregeln in `.claude/settings.json`.