> ## 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.
# Intégrer APIMart avec Cline dans VSCode
> Guide détaillé sur la façon de configurer le service API APIMart à l'aide de l'extension Cline dans Visual Studio Code. Ce guide vous aidera à utiliser les modèles d'IA d'APIMart via Cline pour le développement, le débogage et l'optimisation de code dans VSCode.
## Introduction
Cline (anciennement Claude Dev) est une puissante extension VSCode qui permet aux développeurs d'interagir avec des assistants IA directement dans l'éditeur, en effectuant des tâches telles que l'écriture de code, le débogage et le refactoring. En configurant l'API APIMart, vous pouvez utiliser divers modèles d'IA avancés dans Cline.
## Prérequis
Avant de commencer, assurez-vous que :
1. **Visual Studio Code est installé**\
Téléchargez et installez VSCode depuis le [site officiel](https://code.visualstudio.com/)
2. **L'extension Cline est installée**\
Recherchez "Cline" dans le marketplace d'extensions VSCode et installez-la
3. **Clé API APIMart obtenue**\
Connectez-vous à la [console APIMart](https://apimart.ai/keys) pour obtenir votre clé API (commence par `sk-`)
**Astuce :** si vous n'avez pas encore de compte APIMart, inscrivez-vous d'abord sur [APIMart](https://apimart.ai) et obtenez une clé API.
## Étape 1 : Installer l'extension Cline
### 1.1 Ouvrir le marketplace d'extensions
Dans VSCode :
1. Cliquez sur l'icône **Extensions** dans la barre d'activité gauche (ou appuyez sur `Ctrl+Shift+X` / `Cmd+Shift+X`)
2. Tapez **Cline** dans la zone de recherche
3. Trouvez l'extension Cline (par Cline)
4. Cliquez sur le bouton **Install**
### 1.2 Vérifier l'installation
Après installation :
1. L'icône **Cline** (tête de robot) apparaîtra dans la barre d'activité gauche
2. Cliquez sur l'icône pour ouvrir la barre latérale de Cline
3. À la première ouverture, vous verrez le message de bienvenue "Hi, I'm Cline"
4. Deux options s'affichent :
* **Get Started for Free** — utiliser l'essai gratuit officiel
* **Use your own API key** — utiliser votre propre clé API
*Rechercher et installer Cline dans le marketplace d'extensions VSCode*
## Étape 2 : Configurer l'API APIMart
### 2.1 Choisir d'utiliser votre propre clé API
Sur l'écran de bienvenue de Cline :
1. Cliquez sur le bouton **Use your own API key**
2. Cela ouvrira l'interface de configuration de l'API
*Écran de bienvenue de Cline, sélectionnez "Use your own API key" pour utiliser APIMart*
**Astuce :** si vous avez déjà configuré, vous pouvez cliquer sur **Settings** (icône d'engrenage) en haut de la barre latérale Cline pour accéder à la configuration.
### 2.2 Configurer le fournisseur API
Dans l'interface des paramètres :
1. Développez la section **API Configuration**
2. Sélectionnez **OpenAI Compatible** dans le menu déroulant **API Provider**
3. Cela affichera les options de configuration compatibles OpenAI
**Important :** APIMart est entièrement compatible avec le format de l'API OpenAI, donc sélectionner "OpenAI Compatible" est approprié.
### 2.3 Remplir la configuration API
Remplissez les informations de configuration suivantes :
| Paramètre | Valeur | Description |
| ----------------------------- | --------------------------------------- | ----------------------------------- |
| **API Provider** | `OpenAI Compatible` | Sélectionner dans le menu déroulant |
| **Base URL** | `https://api.apimart.ai/v1` | URL de base de l'API APIMart |
| **OpenAI Compatible API Key** | `sk-xxxxxxxxxxxx` | Votre clé API APIMart |
| **Model ID** | `gpt-5` ou `claude-sonnet-4-5-20250929` | Saisissez l'ID du modèle à utiliser |
*Configurer API Provider, Base URL, API Key et Model ID dans l'interface des paramètres*
**Notes de configuration :**
* **API Key** : doit être la clé commençant par `sk-` obtenue depuis la [console APIMart](https://apimart.ai/keys)
* **Base URL** : fixée à `https://api.apimart.ai/v1`, notez le suffixe `/v1`
* **Model ID** : saisissez directement l'ID du modèle, comme `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929`, etc.
* L'interface de configuration affichera les capacités du modèle en dessous (par ex. prise en charge des images, utilisation du navigateur)
### 2.4 Sauvegarder la configuration
Après la configuration :
1. Cliquez sur le bouton **Done** dans le coin supérieur droit
2. La configuration est sauvegardée automatiquement
3. Cline se connectera immédiatement à APIMart avec la nouvelle configuration
4. Revenez à l'interface principale de Cline, affichant "What can I do for you?"
## Étape 3 : Choisir le bon modèle
### Modèles recommandés
Choisissez le modèle approprié selon les différents scénarios de développement :
**Génération de texte et développement de code :**
* **gpt-5** ⭐ Dernier modèle, qualité de génération de code la plus élevée
* Adapté à : algorithmes complexes, conception d'architecture, refactoring
* Caractéristiques : forte compréhension, haute qualité de code
* **gpt-4o** Modèle haute performance
* Adapté à : développement quotidien, revue de code, correction de bugs
* Caractéristiques : rapide, qualité stable
* **gpt-4o-mini** 💰 Économique
* Adapté à : génération de code simple, écriture de commentaires, documentation
* Caractéristiques : excellent rapport qualité/prix, réponse rapide
**Série Claude (raisonnement fort) :**
* **claude-sonnet-4-5-20250929**
* Adapté à : raisonnement logique complexe, optimisation d'algorithmes
* Caractéristiques : excellent raisonnement, idéal pour problèmes complexes
* **claude-haiku-4-5-20251001**
* Adapté à : complétion de code rapide, Q\&R simples
* Caractéristiques : extrêmement rapide, faible coût
**Conseils de sélection de modèle :**
* 🚀 **Projets complexes, fonctionnalités importantes :** `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929`
* 💼 **Développement quotidien, tâches routinières :** `gpt-4o`, `gpt-4o-mini`
* 💰 **Sensible aux coûts, utilisation fréquente :** `gpt-4o-mini`, `claude-haiku-4-5-20251001`
### Changer de modèle
En bas de l'interface principale Cline :
1. Trouvez le bouton de modèle sous la zone de saisie (affiche le modèle actuel, par ex. `openai-compatible:clau...`)
2. Cliquez sur ce bouton pour changer de modèle
3. Ou modifiez le champ **Model ID** dans les paramètres
4. Les changements prennent effet immédiatement, aucun redémarrage de VSCode nécessaire
**Astuce :** le modèle actuel est affiché sur le bouton sous la zone de saisie ; cliquez pour changer rapidement.
## Étape 4 : Commencer à utiliser Cline
### 4.1 Conversation de base
Après la configuration, discutez avec l'assistant IA :
1. L'interface principale de Cline affichera "**What can I do for you?**"
2. Saisissez votre demande dans la zone de saisie en bas (affiche "Type your task here...")
3. Par exemple : "Create a function to calculate the Fibonacci sequence"
4. Appuyez sur `Entrée` pour envoyer
5. L'IA analysera votre demande, générera du code et pourra l'appliquer directement à votre projet
6. La progression de chaque étape est affichée dans la barre latérale
### 4.2 Génération de code
Laissez l'IA générer du code :
**Exemple 1 : créer une fonction**
```
Please create a JavaScript function to validate email address format
```
**Exemple 2 : implémenter une fonctionnalité**
```
Help me implement a user login form with email and password inputs using React Hooks
```
**Exemple 3 : écrire des tests**
```
Write unit tests for the calculateTotal function using Jest
```
*Discuter avec l'IA dans Cline pour générer du code*
### 4.3 Explication et amélioration du code
Analyser et optimiser le code existant :
**Raccourcis du menu contextuel :**
1. Sélectionnez le code que vous voulez traiter dans l'éditeur
2. Clic droit pour voir les options de Cline :
* **Explain with Cline** — expliquer la fonctionnalité et la logique du code
* **Improve with Cline** — optimiser et améliorer le code
3. Sélectionnez l'action correspondante
4. Cline affichera les résultats d'analyse et suggestions d'amélioration dans la barre latérale
**Par conversation :**
Vous pouvez aussi taper directement dans la barre latérale Cline :
```
Refactor this code to improve readability and performance
```
*Clic droit pour utiliser "Explain with Cline" ou "Improve with Cline" pour un traitement rapide du code*
### 4.4 Débogage de bugs
Trouver et corriger les erreurs :
1. Envoyez les messages d'erreur ou le code problématique à Cline
2. Par exemple : "This code throws an error: TypeError: Cannot read property 'name' of undefined"
3. L'IA analysera le problème et fournira des solutions
4. Vous pouvez appliquer la correction directement
### 4.5 Explication de code
Comprendre du code complexe :
1. Sélectionnez un extrait de code difficile à comprendre
2. Tapez dans Cline : "Explain what this code does"
3. L'IA fournira une explication détaillée et son fonctionnement
### 4.6 Génération de documentation
Générer automatiquement la documentation du code :
**Générer des commentaires de fonction :**
```
Add JSDoc comments to this function
```
**Générer un README :**
```
Generate a README.md file for this project
```
## Fonctionnalités avancées
### Opérations multi-fichiers
Cline peut gérer plusieurs fichiers simultanément :
1. **Créer plusieurs fichiers** :
```
Create a complete Express.js API with routes, controllers, and model files
```
2. **Modifications par lot** :
```
Replace all var with const or let in the project
```
3. **Refactoring de projet** :
```
Migrate this project from JavaScript to TypeScript
```
*Cline peut créer et modifier plusieurs fichiers simultanément*
### Exécution de commandes terminal
Cline peut aider à exécuter des commandes terminal :
1. **Installer des dépendances** :
```
Install axios and dotenv packages
```
2. **Exécuter des scripts** :
```
Run npm test
```
3. **Opérations Git** :
```
Create a Git commit with the message "feat: add user authentication"
```
**Flux d'exécution de commande :**
1. Cline affichera "**Cline wants to execute this command:**" dans la barre latérale
2. Affiche la commande spécifique (par ex. `gcc fibonacci.c -o fibonacci.exe`)
3. Deux boutons apparaissent en bas :
* **Run Command** — exécuter la commande
* **Reject** — refuser d'exécuter
4. Après avoir cliqué sur "Run Command", la commande s'exécute dans le terminal intégré
5. Les résultats sont affichés à la fois dans le terminal et la barre latérale Cline
**Note de sécurité :** Cline exige votre confirmation explicite avant d'exécuter des commandes terminal. Veuillez vérifier attentivement le contenu de la commande, surtout pour les opérations sensibles impliquant suppression de fichiers ou configuration système, avant de cliquer sur "Run Command".
### Gestion du contexte
Cline gère automatiquement le contexte de conversation :
* **Contexte du fichier actuel** : inclut automatiquement le fichier en cours d'édition
* **Contexte du code sélectionné** : inclut automatiquement les extraits de code que vous sélectionnez
* **Contexte de la structure du projet** : comprend votre structure de projet
* **Contexte des messages d'erreur** : capture automatiquement les messages d'erreur du terminal
### Prompts personnalisés
Créer des modèles de prompts personnalisés :
1. Trouvez **Custom Instructions** dans les paramètres Cline
2. Ajoutez vos préférences, par ex. :
```
- Use TypeScript instead of JavaScript
- Follow Airbnb code style
- Use arrow function syntax
- Prefer functional programming style
```
3. L'IA suivra ces instructions dans toutes les interactions
## FAQ
### Q1 : Cline dit que la clé API est invalide ?
**Solutions :**
1. **Vérifier le format de la clé API** :
* Confirmez que la clé API commence par `sk-`
* Assurez-vous qu'elle est copiée complètement sans espaces supplémentaires
2. **Vérifier la Base URL** :
* Doit être `https://api.apimart.ai/v1`
* Notez le suffixe `/v1`
3. **Vérifier la validité de la clé** :
* Vérifiez le statut de la clé dans la [console APIMart](https://apimart.ai/keys)
* Confirmez un solde de compte suffisant
4. **Reconfigurer** :
* Supprimez la configuration existante
* Ressaisissez la clé API et la Base URL
### Q2 : Cline répond lentement ?
**Solutions :**
1. **Passer à un modèle plus rapide** :
* Utilisez `gpt-4o-mini` ou `claude-haiku-4-5-20251001`
* Ces modèles répondent plus rapidement
2. **Réduire la longueur du contexte** :
* Évitez d'envoyer un code très long d'un coup
* Divisez les grandes tâches en plus petites
3. **Vérifier la connexion réseau** :
* Assurez-vous d'un réseau stable
* Envisagez d'utiliser un serveur proxy
4. **Optimiser le contenu de la requête** :
* Posez des questions plus spécifiques
* Évitez les questions vagues ou trop larges
### Q3 : Cline génère du code de faible qualité ?
**Solutions :**
1. **Utiliser des modèles de meilleure qualité** :
* Passez à `gpt-5` ou `claude-sonnet-4-5-20250929`
* Ces modèles produisent du code de meilleure qualité
2. **Fournir des exigences plus détaillées** :
* Énoncez clairement l'implémentation attendue
* Fournissez du code d'exemple ou des références
* Spécifiez la pile technique et les versions des frameworks
3. **Utiliser des instructions personnalisées** :
* Ajoutez des standards de code dans les paramètres
* Spécifiez le style de codage et les bonnes pratiques
4. **Optimisation itérative** :
* Menez plusieurs tours de conversation avec l'IA
* Améliorez progressivement la qualité du code
### Q4 : Comment gérer les coûts d'utilisation de l'API ?
**Solutions :**
1. **Choisir des modèles appropriés** :
* Utilisez `gpt-4o-mini` pour le développement quotidien
* Utilisez `gpt-5` pour les tâches complexes
2. **Optimiser l'approche des questions** :
* Soyez aussi spécifique que possible
* Évitez de répéter les mêmes questions
3. **Utiliser la sélection de code** :
* Sélectionnez uniquement la partie du code à traiter
* Évitez d'envoyer le contexte de fichier entier
4. **Surveiller l'utilisation** :
* Vérifiez régulièrement la [console APIMart](https://apimart.ai/overview)
* Comprenez la fréquence des appels API et les coûts
### Q5 : Cline ne peut pas accéder à certains fichiers ?
**Solutions :**
1. **Vérifier les permissions de fichiers** :
* Assurez-vous que les fichiers ont des permissions de lecture/écriture
* Surtout sur les systèmes Linux/macOS
2. **Vérifier .gitignore** :
* Cline ignore par défaut les fichiers dans .gitignore
* Vous pouvez ajuster ce comportement dans les paramètres
3. **Paramètres du workspace** :
* Assurez-vous que les fichiers sont dans le workspace VSCode
* Vérifiez les paramètres de confiance du workspace
4. **Recharger VSCode** :
* Utilisez `Ctrl+Shift+P` / `Cmd+Shift+P`
* Exécutez la commande "Reload Window"
## Conseils d'utilisation
### 1. Utiliser pleinement le contexte
**Fournir des informations complètes :**
```
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. Développement incrémental
**Commencer simple, affiner progressivement :**
```
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. Assistant de revue de code
**Laissez l'IA examiner votre code :**
```
Please review this code, checking for:
1. Potential security issues
2. Performance optimization opportunities
3. Code style issues
4. Possible bugs
```
### 4. Apprendre de nouvelles technologies
**Utilisez Cline pour apprendre :**
```
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. Prototypage rapide
**Valider rapidement les idées :**
```
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. Programmation en binôme
**Collaborer avec l'IA :**
```
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...
}
```
## Points forts des fonctionnalités
Avec Cline + APIMart, vous pouvez :
* 💻 **Génération de code intelligente** — générer du code de haute qualité à partir de descriptions en langage naturel
* 🔧 **Refactoring de code** — optimiser automatiquement la structure et les performances du code
* 🐛 **Aide au débogage de bugs** — localiser et corriger rapidement les problèmes de code
* 📝 **Génération de documentation** — générer commentaires, README, documentation API
* 🧪 **Écriture de cas de test** — générer automatiquement des tests unitaires et d'intégration
* 🔄 **Migration de code** — conversion de langage, migration de framework
* 💡 **Explication de code** — comprendre la logique de code complexe
* 🎯 **Suggestions de bonnes pratiques** — fournir des standards de code et conseils d'optimisation
* 🚀 **Prototypage rapide** — valider rapidement les idées et concepts
* 🤖 **Exécution de commandes terminal** — exécuter automatiquement les commandes de développement
## Raccourcis clavier
Raccourcis courants de Cline :
| Raccourci | Fonction | Description |
| ------------------------------ | ------------------------------- | ----------------------------------------- |
| `Ctrl+Shift+P` / `Cmd+Shift+P` | Palette de commandes | Accéder à toutes les commandes Cline |
| `Ctrl+Shift+X` / `Cmd+Shift+X` | Marketplace d'extensions | Installer et gérer les extensions |
| Clic sur l'icône Cline | Ouvrir/fermer la barre latérale | Accès rapide à Cline |
| `Ctrl+K Ctrl+I` | Suggestions inline | Obtenir des suggestions IA dans l'éditeur |
**Astuce :** vous pouvez personnaliser les raccourcis de Cline dans les paramètres des raccourcis clavier de VSCode.
## Bonnes pratiques
### 1. Description claire de la tâche
❌ **Mauvaise question :**
```
Write a login feature
```
✅ **Bonne question :**
```
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. Fournir des informations contextuelles
**Inclure les informations relatives au projet :**
* Pile technique et frameworks utilisés
* Structure de fichiers pertinente
* Conventions de code existantes
* Dépendances de bibliothèques tierces
### 3. Amélioration itérative
**Ne vous attendez pas à la perfection du premier coup :**
1. Générez d'abord la fonctionnalité de base
2. Testez et validez
3. Donnez des retours d'amélioration
4. Affinez progressivement
### 4. Revue de code
**Toujours examiner le code généré :**
* Vérifiez l'exactitude logique
* Vérifiez la sécurité
* Testez les cas limites
* Assurez la conformité aux standards du projet
### 5. Maintenir la continuité de la conversation
**Exploitez la continuité contextuelle :**
```
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 et aide
Si vous rencontrez des problèmes :
* 📚 [Documentation APIMart](https://docs.apimart.ai)
* 📚 [Documentation officielle Cline](https://github.com/clinebot/cline)
* 💬 [Communauté Discord](https://discord.gg/V8zqssyZ5c)
* 🐦 [Twitter @APIMart\_](https://x.com/APIMart_)
* 📧 Support technique : [zhihong@apimart.ai](mailto:zhihong@apimart.ai)
## Tutoriels vidéo
**Bientôt disponible :** nous créons des tutoriels vidéo détaillés couvrant divers cas d'utilisation et bonnes pratiques pour Cline + APIMart.
***
Inscrivez-vous à APIMart maintenant, obtenez votre clé API et expérimentez le développement assisté par IA dans VSCode !