> ## Documentation Index > Fetch the complete documentation index at: https://docs.apimart.ai/llms.txt > Use this file to discover all available pages before exploring further. # APIMart mit Cline in VSCode integrieren > Eine ausführliche Anleitung zur Konfiguration des APIMart-API-Dienstes mit der Cline-Erweiterung in Visual Studio Code. Diese Anleitung hilft Ihnen, die KI-Modelle von APIMart über Cline für Code-Entwicklung, Debugging und Optimierung in VSCode zu nutzen. ## Einführung Cline (vormals Claude Dev) ist eine leistungsstarke VSCode-Erweiterung, mit der Entwickler direkt im Editor mit KI-Assistenten interagieren und Aufgaben wie Code-Schreiben, Debugging und Refactoring ausführen können. Durch die Konfiguration der APIMart-API können Sie in Cline verschiedene fortschrittliche KI-Modelle nutzen. ## Voraussetzungen Bevor Sie beginnen, stellen Sie sicher: 1. **Visual Studio Code ist installiert**\ Laden Sie VSCode von der [offiziellen Website](https://code.visualstudio.com/) herunter und installieren Sie es 2. **Die Cline-Erweiterung ist installiert**\ Suchen Sie "Cline" im VSCode-Erweiterungsmarktplatz und installieren Sie sie 3. **APIMart-API-Schlüssel vorhanden**\ Melden Sie sich in der [APIMart-Konsole](https://apimart.ai/keys) an, um Ihren API-Schlüssel zu erhalten (beginnt mit `sk-`) **Tipp:** Wenn Sie noch kein APIMart-Konto haben, registrieren Sie sich zuerst bei [APIMart](https://apimart.ai) und holen Sie sich einen API-Schlüssel. ## Schritt 1: Cline-Erweiterung installieren ### 1.1 Erweiterungsmarktplatz öffnen In VSCode: 1. Klicken Sie auf das **Extensions**-Symbol in der linken Aktivitätsleiste (oder drücken Sie `Ctrl+Shift+X` / `Cmd+Shift+X`) 2. Geben Sie im Suchfeld **Cline** ein 3. Finden Sie die Cline-Erweiterung (von Cline) 4. Klicken Sie auf **Install** ### 1.2 Installation überprüfen Nach der Installation: 1. Das **Cline**-Symbol (Roboterkopf) erscheint in der linken Aktivitätsleiste 2. Klicken Sie auf das Symbol, um die Cline-Seitenleiste zu öffnen 3. Beim ersten Öffnen sehen Sie die Willkommensnachricht "Hi, I'm Cline" 4. Zwei Optionen werden angezeigt: * **Get Started for Free** – die offizielle kostenlose Testversion nutzen * **Use your own API key** – Ihren eigenen API-Schlüssel verwenden Cline Extension Installation *Cline im VSCode-Erweiterungsmarktplatz suchen und installieren* ## Schritt 2: APIMart-API konfigurieren ### 2.1 Eigenen API-Schlüssel verwenden wählen Auf dem Cline-Willkommensbildschirm: 1. Klicken Sie auf die Schaltfläche **Use your own API key** 2. Dies öffnet die API-Konfigurationsoberfläche Cline Welcome Screen *Cline-Willkommensbildschirm, wählen Sie "Use your own API key" für APIMart* **Tipp:** Wenn Sie bereits konfiguriert haben, können Sie oben in der Cline-Seitenleiste auf **Settings** (Zahnrad-Symbol) klicken, um zur Konfiguration zu gelangen. ### 2.2 API-Anbieter konfigurieren In der Einstellungsoberfläche: 1. Erweitern Sie den Abschnitt **API Configuration** 2. Wählen Sie **OpenAI Compatible** aus dem Dropdown **API Provider** 3. Dies zeigt OpenAI-kompatible Konfigurationsoptionen an **Wichtig:** APIMart ist vollständig mit dem OpenAI-API-Format kompatibel, daher ist die Wahl von "OpenAI Compatible" angemessen. ### 2.3 API-Konfiguration ausfüllen Geben Sie die folgenden Konfigurationsinformationen ein: | Einstellung | Wert | Beschreibung | | ----------------------------- | ----------------------------------------- | ------------------------------------------ | | **API Provider** | `OpenAI Compatible` | Aus Dropdown wählen | | **Base URL** | `https://api.apimart.ai/v1` | APIMart-API-Base-URL | | **OpenAI Compatible API Key** | `sk-xxxxxxxxxxxx` | Ihr APIMart-API-Schlüssel | | **Model ID** | `gpt-5` oder `claude-sonnet-4-5-20250929` | Geben Sie die zu verwendende Modell-ID ein | Configure APIMart API *Konfigurieren Sie API Provider, Base URL, API Key und Model ID in der Einstellungsoberfläche* **Konfigurationshinweise:** * **API Key**: muss der mit `sk-` beginnende Schlüssel aus der [APIMart-Konsole](https://apimart.ai/keys) sein * **Base URL**: festgelegt als `https://api.apimart.ai/v1`, beachten Sie das `/v1`-Suffix * **Model ID**: Geben Sie die Modell-ID direkt ein, z. B. `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929` usw. * Die Konfigurationsoberfläche zeigt die Fähigkeiten des Modells unten an (z. B. Bildunterstützung, Browser-Nutzung) ### 2.4 Konfiguration speichern Nach der Konfiguration: 1. Klicken Sie auf **Done** in der oberen rechten Ecke 2. Die Konfiguration wird automatisch gespeichert 3. Cline verbindet sich sofort mit APIMart über die neue Konfiguration 4. Kehren Sie zur Cline-Hauptoberfläche zurück, die "What can I do for you?" anzeigt ## Schritt 3: Das richtige Modell wählen ### Empfohlene Modelle Wählen Sie das passende Modell je nach Entwicklungsszenario: **Textgenerierung & Code-Entwicklung:** * **gpt-5** ⭐ Neuestes Modell, höchste Code-Generierungsqualität * Geeignet für: komplexe Algorithmen, Architekturdesign, Code-Refactoring * Eigenschaften: starkes Verständnis, hohe Code-Qualität * **gpt-4o** Hochleistungsmodell * Geeignet für: tägliche Entwicklung, Code Review, Bug-Fixing * Eigenschaften: schnell, stabile Qualität * **gpt-4o-mini** 💰 Kosteneffizient * Geeignet für: einfache Codegenerierung, Kommentare schreiben, Dokumentation * Eigenschaften: gutes Preis-Leistungs-Verhältnis, schnelle Antwort **Claude-Serie (starkes Reasoning):** * **claude-sonnet-4-5-20250929** * Geeignet für: komplexes logisches Reasoning, Algorithmus-Optimierung * Eigenschaften: hervorragendes Reasoning, ideal für komplexe Probleme * **claude-haiku-4-5-20251001** * Geeignet für: schnelle Codevervollständigung, einfache Q\&A * Eigenschaften: extrem schnell, geringe Kosten **Tipps zur Modellauswahl:** * 🚀 **Komplexe Projekte, wichtige Features:** `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929` * 💼 **Tägliche Entwicklung, Routineaufgaben:** `gpt-4o`, `gpt-4o-mini` * 💰 **Kostensensitiv, häufige Nutzung:** `gpt-4o-mini`, `claude-haiku-4-5-20251001` ### Modelle wechseln Unten in der Cline-Hauptoberfläche: 1. Suchen Sie die Modellschaltfläche unter dem Eingabefeld (zeigt aktuelles Modell, z. B. `openai-compatible:clau...`) 2. Klicken Sie auf diese Schaltfläche, um Modelle zu wechseln 3. Oder ändern Sie das Feld **Model ID** in den Einstellungen 4. Änderungen wirken sofort, kein VSCode-Neustart erforderlich **Tipp:** Das aktuelle Modell wird auf der Schaltfläche unter dem Eingabefeld angezeigt; Klick für schnellen Wechsel. ## Schritt 4: Cline verwenden ### 4.1 Grundlegende Konversation Nach der Konfiguration mit dem KI-Assistenten chatten: 1. Die Cline-Hauptoberfläche zeigt "**What can I do for you?**" 2. Geben Sie Ihre Anfrage im Eingabefeld unten ein (zeigt "Type your task here...") 3. Zum Beispiel: "Create a function to calculate the Fibonacci sequence" 4. Drücken Sie `Enter`, um zu senden 5. Die KI analysiert Ihre Anfrage, generiert Code und kann ihn direkt auf Ihr Projekt anwenden 6. Der Fortschritt jedes Schritts wird in der Seitenleiste angezeigt ### 4.2 Codegenerierung Lassen Sie die KI Code generieren: **Beispiel 1: eine Funktion erstellen** ``` Please create a JavaScript function to validate email address format ``` **Beispiel 2: ein Feature implementieren** ``` Help me implement a user login form with email and password inputs using React Hooks ``` **Beispiel 3: Tests schreiben** ``` Write unit tests for the calculateTotal function using Jest ``` Cline Chat Interface *Mit der KI in Cline chatten, um Code zu generieren* ### 4.3 Code erklären und verbessern Bestehenden Code analysieren und optimieren: **Tastenkürzel im Kontextmenü:** 1. Wählen Sie im Editor den Code aus, den Sie bearbeiten möchten 2. Rechtsklick, um Cline-Optionen anzuzeigen: * **Explain with Cline** – die Funktionalität und Logik des Codes erklären * **Improve with Cline** – den Code optimieren und verbessern 3. Wählen Sie die entsprechende Aktion 4. Cline zeigt Analyseergebnisse und Verbesserungsvorschläge in der Seitenleiste an **Über Konversation:** Sie können auch direkt in der Cline-Seitenleiste eingeben: ``` Refactor this code to improve readability and performance ``` Code Explanation and Improvement *Rechtsklick für "Explain with Cline" oder "Improve with Cline" zur schnellen Code-Bearbeitung* ### 4.4 Bug-Debugging Fehler finden und beheben: 1. Senden Sie Fehlermeldungen oder problematischen Code an Cline 2. Zum Beispiel: "This code throws an error: TypeError: Cannot read property 'name' of undefined" 3. Die KI analysiert das Problem und liefert Lösungen 4. Sie können die Korrektur direkt anwenden ### 4.5 Code-Erklärung Komplexen Code verstehen: 1. Wählen Sie einen schwer verständlichen Code-Ausschnitt aus 2. Geben Sie in Cline ein: "Explain what this code does" 3. Die KI liefert eine detaillierte Erklärung und Funktionsweise ### 4.6 Dokumentation generieren Automatisch Code-Dokumentation generieren: **Funktionskommentare generieren:** ``` Add JSDoc comments to this function ``` **README generieren:** ``` Generate a README.md file for this project ``` ## Erweiterte Funktionen ### Operationen über mehrere Dateien Cline kann mehrere Dateien gleichzeitig bearbeiten: 1. **Mehrere Dateien erstellen**: ``` Create a complete Express.js API with routes, controllers, and model files ``` 2. **Stapeländerungen**: ``` Replace all var with const or let in the project ``` 3. **Projekt-Refactoring**: ``` Migrate this project from JavaScript to TypeScript ``` *Cline kann mehrere Dateien gleichzeitig erstellen und ändern* ### Terminal-Befehle ausführen Cline kann beim Ausführen von Terminal-Befehlen helfen: 1. **Abhängigkeiten installieren**: ``` Install axios and dotenv packages ``` 2. **Skripte ausführen**: ``` Run npm test ``` 3. **Git-Operationen**: ``` Create a Git commit with the message "feat: add user authentication" ``` **Befehlsausführungsablauf:** 1. Cline zeigt in der Seitenleiste "**Cline wants to execute this command:**" an 2. Zeigt den konkreten Befehl (z. B. `gcc fibonacci.c -o fibonacci.exe`) 3. Unten erscheinen zwei Schaltflächen: * **Run Command** – Befehl ausführen * **Reject** – Ausführung ablehnen 4. Nach Klick auf "Run Command" wird der Befehl im integrierten Terminal ausgeführt 5. Ergebnisse werden sowohl im Terminal als auch in der Cline-Seitenleiste angezeigt **Sicherheitshinweis:** Cline erfordert Ihre ausdrückliche Bestätigung vor der Ausführung von Terminal-Befehlen. Bitte prüfen Sie den Befehlsinhalt sorgfältig, insbesondere bei sensiblen Operationen wie Dateilöschung oder Systemkonfiguration, bevor Sie "Run Command" klicken. ### Kontextverwaltung Cline verwaltet den Konversationskontext automatisch: * **Kontext der aktuellen Datei**: schließt die bearbeitete Datei automatisch ein * **Kontext des ausgewählten Codes**: schließt von Ihnen ausgewählte Code-Abschnitte automatisch ein * **Kontext der Projektstruktur**: versteht Ihre Projektstruktur * **Kontext von Fehlermeldungen**: erfasst Terminal-Fehlermeldungen automatisch ### Benutzerdefinierte Prompts Benutzerdefinierte Prompt-Vorlagen erstellen: 1. Suchen Sie **Custom Instructions** in den Cline-Einstellungen 2. Fügen Sie Ihre Präferenzen hinzu, z. B.: ``` - Use TypeScript instead of JavaScript - Follow Airbnb code style - Use arrow function syntax - Prefer functional programming style ``` 3. Die KI folgt diesen Anweisungen in allen Interaktionen ## FAQ ### Q1: Cline sagt, der API-Schlüssel sei ungültig? **Lösungen:** 1. **API-Key-Format prüfen**: * Bestätigen Sie, dass der API Key mit `sk-` beginnt * Stellen Sie sicher, dass er vollständig ohne zusätzliche Leerzeichen kopiert wurde 2. **Base URL prüfen**: * Muss `https://api.apimart.ai/v1` sein * Beachten Sie das `/v1`-Suffix 3. **Schlüsselgültigkeit überprüfen**: * Schlüsselstatus in der [APIMart-Konsole](https://apimart.ai/keys) prüfen * Ausreichendes Kontoguthaben sicherstellen 4. **Neu konfigurieren**: * Bestehende Konfiguration löschen * API Key und Base URL erneut eingeben ### Q2: Cline antwortet langsam? **Lösungen:** 1. **Zu einem schnelleren Modell wechseln**: * `gpt-4o-mini` oder `claude-haiku-4-5-20251001` verwenden * Diese Modelle antworten schneller 2. **Kontextlänge reduzieren**: * Vermeiden Sie, sehr langen Code auf einmal zu senden * Große Aufgaben in kleinere zerlegen 3. **Netzwerkverbindung prüfen**: * Stabile Verbindung sicherstellen * Proxy-Server in Erwägung ziehen 4. **Anfrageinhalt optimieren**: * Konkretere Fragen stellen * Vage oder zu breite Fragen vermeiden ### Q3: Cline generiert Code von geringer Qualität? **Lösungen:** 1. **Hochwertigere Modelle verwenden**: * Zu `gpt-5` oder `claude-sonnet-4-5-20250929` wechseln * Diese Modelle produzieren Code höherer Qualität 2. **Detailliertere Anforderungen angeben**: * Erwartete Implementierung klar formulieren * Beispielcode oder Referenzen bereitstellen * Tech-Stack und Framework-Versionen angeben 3. **Benutzerdefinierte Anweisungen verwenden**: * Code-Standards in den Einstellungen hinzufügen * Coding-Stil und Best Practices angeben 4. **Iterative Optimierung**: * Mehrere Konversationsrunden mit der KI führen * Code-Qualität schrittweise verbessern ### Q4: Wie verwalte ich die API-Nutzungskosten? **Lösungen:** 1. **Passende Modelle wählen**: * `gpt-4o-mini` für tägliche Entwicklung * `gpt-5` für komplexe Aufgaben 2. **Frageansatz optimieren**: * So konkret wie möglich sein * Wiederholung derselben Fragen vermeiden 3. **Code-Auswahl nutzen**: * Nur den zu bearbeitenden Code-Teil auswählen * Versand des gesamten Dateikontexts vermeiden 4. **Nutzung überwachen**: * Regelmäßig die [APIMart-Konsole](https://apimart.ai/overview) prüfen * API-Aufruffrequenz und Kosten verstehen ### Q5: Cline kann auf bestimmte Dateien nicht zugreifen? **Lösungen:** 1. **Dateiberechtigungen prüfen**: * Sicherstellen, dass Dateien Lese-/Schreibberechtigungen haben * Besonders auf Linux/macOS-Systemen 2. **.gitignore prüfen**: * Cline ignoriert standardmäßig Dateien in .gitignore * Dieses Verhalten kann in den Einstellungen angepasst werden 3. **Workspace-Einstellungen**: * Stellen Sie sicher, dass Dateien innerhalb des VSCode-Workspaces sind * Workspace-Trust-Einstellungen prüfen 4. **VSCode neu laden**: * `Ctrl+Shift+P` / `Cmd+Shift+P` verwenden * Den Befehl "Reload Window" ausführen ## Nutzungstipps ### 1. Kontext voll ausnutzen **Vollständige Informationen bereitstellen:** ``` I have an Express.js project using MongoDB database. Please help me create a user authentication system including registration, login, and JWT token verification. Project structure is: - src/models/ - src/controllers/ - src/routes/ - src/middleware/ ``` ### 2. Inkrementelle Entwicklung **Einfach starten, schrittweise verfeinern:** ``` Step 1: Create the basic user model Step 2: Add password encryption Step 3: Implement registration and login endpoints Step 4: Add JWT token verification ``` ### 3. Code-Review-Assistent **Lassen Sie die KI Ihren Code überprüfen:** ``` Please review this code, checking for: 1. Potential security issues 2. Performance optimization opportunities 3. Code style issues 4. Possible bugs ``` ### 4. Neue Technologien lernen **Cline zum Lernen nutzen:** ``` I want to learn React Hooks. Please create a sample project demonstrating useState, useEffect, useContext usage, and add detailed comments explaining how each Hook works. ``` ### 5. Rapid Prototyping **Ideen schnell validieren:** ``` Create a simple todo app with requirements: - Use React and LocalStorage - Can add, delete, mark as complete - Simple CSS styling - Complete in a single HTML file ``` ### 6. Pair Programming **Mit der KI zusammenarbeiten:** ``` I'm implementing a sorting algorithm, I wrote the first half, please help me complete the rest: function quickSort(arr) { if (arr.length <= 1) return arr; const pivot = arr[0]; // Please continue implementation... } ``` ## Feature-Highlights Mit Cline + APIMart können Sie: * 💻 **Intelligente Codegenerierung** – qualitativ hochwertigen Code aus natürlichsprachlichen Beschreibungen generieren * 🔧 **Code-Refactoring** – Code-Struktur und Leistung automatisch optimieren * 🐛 **Hilfe beim Bug-Debugging** – Code-Probleme schnell lokalisieren und beheben * 📝 **Dokumentation generieren** – Kommentare, README, API-Dokumentation generieren * 🧪 **Testfälle schreiben** – automatisch Unit- und Integrationstests generieren * 🔄 **Code-Migration** – Sprachkonvertierung, Framework-Migration * 💡 **Code-Erklärung** – komplexe Code-Logik verstehen * 🎯 **Best-Practice-Vorschläge** – Code-Standards und Optimierungsempfehlungen * 🚀 **Rapid Prototyping** – Ideen und Konzepte schnell validieren * 🤖 **Terminal-Befehlsausführung** – Entwicklungsbefehle automatisch ausführen ## Tastaturkürzel Häufige Cline-Tastenkürzel: | Tastenkürzel | Funktion | Beschreibung | | ------------------------------ | ----------------------------- | ---------------------------------------- | | `Ctrl+Shift+P` / `Cmd+Shift+P` | Befehlspalette | Zugriff auf alle Cline-Befehle | | `Ctrl+Shift+X` / `Cmd+Shift+X` | Erweiterungsmarktplatz | Erweiterungen installieren und verwalten | | Klick auf Cline-Symbol | Seitenleiste öffnen/schließen | Schneller Zugriff auf Cline | | `Ctrl+K Ctrl+I` | Inline-Vorschläge | KI-Vorschläge im Editor erhalten | **Tipp:** Sie können die Tastenkürzel von Cline in den VSCode-Tastenkürzeleinstellungen anpassen. ## Best Practices ### 1. Klare Aufgabenbeschreibung ❌ **Schlechte Frage:** ``` Write a login feature ``` ✅ **Gute Frage:** ``` Create a user login feature with requirements: - Use React and TypeScript - Form validation (email format, password length) - Use axios to call API - Store JWT token to localStorage on successful login - Error handling and user feedback ``` ### 2. Kontextinformationen bereitstellen **Projektrelevante Informationen einbeziehen:** * Verwendeter Tech-Stack und Frameworks * Relevante Dateistruktur * Bestehende Code-Konventionen * Abhängigkeiten von Drittanbieter-Bibliotheken ### 3. Iterative Verbesserung **Beim ersten Mal keine Perfektion erwarten:** 1. Zuerst Grundfunktionalität generieren 2. Testen und validieren 3. Verbesserungs-Feedback geben 4. Schrittweise verfeinern ### 4. Code-Review **Generierten Code immer überprüfen:** * Logische Korrektheit prüfen * Sicherheit verifizieren * Edge Cases testen * Konformität mit Projektstandards sicherstellen ### 5. Konversationskontinuität wahren **Kontextkontinuität nutzen:** ``` Round 1: Create user model Round 2: Based on the model just created, create CRUD endpoints Round 3: Add permission validation to these endpoints ``` ## Support & Hilfe Wenn Sie auf Probleme stoßen: * 📚 [APIMart-Dokumentation](https://docs.apimart.ai) * 📚 [Offizielle Cline-Dokumentation](https://github.com/clinebot/cline) * 💬 [Discord-Community](https://discord.gg/V8zqssyZ5c) * 🐦 [Twitter @APIMart\_](https://x.com/APIMart_) * 📧 Technischer Support: [zhihong@apimart.ai](mailto:zhihong@apimart.ai) ## Video-Tutorials **Demnächst:** Wir erstellen detaillierte Video-Tutorials, die verschiedene Anwendungsfälle und Best Practices für Cline + APIMart abdecken. *** Registrieren Sie sich jetzt bei APIMart, holen Sie sich Ihren API-Schlüssel und erleben Sie KI-unterstützte Entwicklung in VSCode!