> ## 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.
# Integrar APIMart con Cline en VSCode
> Guía detallada sobre cómo configurar el servicio de API de APIMart usando la extensión Cline en Visual Studio Code. Esta guía le ayudará a usar los modelos de IA de APIMart a través de Cline para el desarrollo, depuración y optimización de código en VSCode.
## Introducción
Cline (anteriormente Claude Dev) es una potente extensión para VSCode que permite a los desarrolladores interactuar con asistentes de IA directamente en el editor, realizando tareas como escritura de código, depuración y refactorización. Al configurar la API de APIMart, puede usar varios modelos avanzados de IA en Cline.
## Requisitos previos
Antes de comenzar, asegúrese de:
1. **Tener Visual Studio Code instalado**\
Descargue e instale VSCode desde el [sitio web oficial](https://code.visualstudio.com/)
2. **Tener la extensión Cline instalada**\
Busque "Cline" en el marketplace de extensiones de VSCode e instálela
3. **Haber obtenido una clave de API de APIMart**\
Acceda a la [Consola de APIMart](https://apimart.ai/keys) para obtener su clave de API (comienza con `sk-`)
**Consejo:** Si aún no tiene una cuenta en APIMart, regístrese primero en [APIMart](https://apimart.ai) y obtenga una clave de API.
## Paso 1: Instalar la extensión Cline
### 1.1 Abrir el marketplace de extensiones
En VSCode:
1. Haga clic en el icono **Extensions** en la barra de actividad izquierda (o pulse `Ctrl+Shift+X` / `Cmd+Shift+X`)
2. Escriba **Cline** en el cuadro de búsqueda
3. Encuentre la extensión Cline (de Cline)
4. Haga clic en el botón **Install**
### 1.2 Verificar la instalación
Tras la instalación:
1. El icono de **Cline** (cabeza de robot) aparecerá en la barra de actividad izquierda
2. Haga clic en el icono para abrir la barra lateral de Cline
3. La primera vez que se abra, verá el mensaje de bienvenida "Hi, I'm Cline"
4. Se muestran dos opciones:
* **Get Started for Free**: usar la prueba gratuita oficial
* **Use your own API key**: usar su propia clave de API
*Busque e instale Cline en el marketplace de extensiones de VSCode*
## Paso 2: Configurar la API de APIMart
### 2.1 Elegir usar su propia API Key
En la pantalla de bienvenida de Cline:
1. Haga clic en el botón **Use your own API key**
2. Esto abrirá la interfaz de configuración de la API
*Pantalla de bienvenida de Cline, seleccione "Use your own API key" para usar APIMart*
**Consejo:** Si lo ha configurado anteriormente, puede hacer clic en **Settings** (icono de engranaje) en la parte superior de la barra lateral de Cline para acceder a la configuración.
### 2.2 Configurar el proveedor de API
En la interfaz de configuración:
1. Expanda la sección **API Configuration**
2. Seleccione **OpenAI Compatible** en el menú desplegable **API Provider**
3. Esto mostrará las opciones de configuración compatibles con OpenAI
**Importante:** APIMart es totalmente compatible con el formato de la API de OpenAI, por lo que seleccionar "OpenAI Compatible" es apropiado.
### 2.3 Completar la configuración de la API
Complete la siguiente información de configuración:
| Ajuste | Valor | Descripción |
| ----------------------------- | -------------------------------------- | ---------------------------------- |
| **API Provider** | `OpenAI Compatible` | Seleccionar del menú desplegable |
| **Base URL** | `https://api.apimart.ai/v1` | URL base de la API de APIMart |
| **OpenAI Compatible API Key** | `sk-xxxxxxxxxxxx` | Su clave de API de APIMart |
| **Model ID** | `gpt-5` o `claude-sonnet-4-5-20250929` | Introduzca el ID del modelo a usar |
*Configure el API Provider, Base URL, API Key y Model ID en la interfaz de configuración*
**Notas de configuración:**
* **API Key**: Debe ser la clave que comienza con `sk-` obtenida desde la [Consola de APIMart](https://apimart.ai/keys)
* **Base URL**: Fija como `https://api.apimart.ai/v1`, observe el sufijo `/v1`
* **Model ID**: Introduzca el ID del modelo directamente, como `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929`, etc.
* La interfaz de configuración mostrará las capacidades del modelo a continuación (p. ej., soporte de imágenes, uso del navegador)
### 2.4 Guardar la configuración
Tras la configuración:
1. Haga clic en el botón **Done** en la esquina superior derecha
2. La configuración se guarda automáticamente
3. Cline se conectará inmediatamente a APIMart usando la nueva configuración
4. Regrese a la interfaz principal de Cline, que muestra "What can I do for you?"
## Paso 3: Elegir el modelo adecuado
### Modelos recomendados
Elija el modelo adecuado según los diferentes escenarios de desarrollo:
**Generación de texto y desarrollo de código:**
* **gpt-5** ⭐ Modelo más reciente, mayor calidad de generación de código
* Adecuado para: algoritmos complejos, diseño de arquitectura, refactorización de código
* Características: gran comprensión, código de alta calidad
* **gpt-4o** Modelo de alto rendimiento
* Adecuado para: desarrollo diario, revisión de código, corrección de errores
* Características: rápido, calidad estable
* **gpt-4o-mini** 💰 Económico
* Adecuado para: generación de código simple, escritura de comentarios, documentación
* Características: gran valor, respuesta rápida
**Serie Claude (razonamiento potente):**
* **claude-sonnet-4-5-20250929**
* Adecuado para: razonamiento lógico complejo, optimización de algoritmos
* Características: excelente razonamiento, ideal para problemas complejos
* **claude-haiku-4-5-20251001**
* Adecuado para: finalización rápida de código, preguntas y respuestas simples
* Características: extremadamente rápido, bajo costo
**Consejos para elegir un modelo:**
* 🚀 **Proyectos complejos, funciones importantes:** `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929`
* 💼 **Desarrollo diario, tareas rutinarias:** `gpt-4o`, `gpt-4o-mini`
* 💰 **Sensibles al costo, uso de alta frecuencia:** `gpt-4o-mini`, `claude-haiku-4-5-20251001`
### Cambiar de modelo
En la parte inferior de la interfaz principal de Cline:
1. Busque el botón de modelo debajo del cuadro de entrada (muestra el modelo actual, p. ej., `openai-compatible:clau...`)
2. Haga clic en este botón para cambiar de modelo
3. O modifique el campo **Model ID** en la configuración
4. Los cambios se aplican inmediatamente, no es necesario reiniciar VSCode
**Consejo:** El modelo actual se muestra en el botón debajo del cuadro de entrada; haga clic para cambiar rápidamente.
## Paso 4: Comenzar a usar Cline
### 4.1 Conversación básica
Tras la configuración, chatee con el asistente de IA:
1. La interfaz principal de Cline mostrará "**What can I do for you?**"
2. Introduzca su solicitud en el cuadro de entrada en la parte inferior (muestra "Type your task here...")
3. Por ejemplo: "Crea una función para calcular la secuencia de Fibonacci"
4. Pulse `Enter` para enviar
5. La IA analizará su solicitud, generará código y podrá aplicarlo directamente a su proyecto
6. El progreso de cada paso se muestra en la barra lateral
### 4.2 Generación de código
Deje que la IA genere código:
**Ejemplo 1: Crear una función**
```
Please create a JavaScript function to validate email address format
```
**Ejemplo 2: Implementar una función**
```
Help me implement a user login form with email and password inputs using React Hooks
```
**Ejemplo 3: Escribir pruebas**
```
Write unit tests for the calculateTotal function using Jest
```
*Chatee con la IA en Cline para generar código*
### 4.3 Explicación y mejora de código
Analice y optimice código existente:
**Atajos del menú contextual:**
1. Seleccione el código que desea procesar en el editor
2. Haga clic derecho para ver las opciones de Cline:
* **Explain with Cline**: explicar la funcionalidad y lógica del código
* **Improve with Cline**: optimizar y mejorar el código
3. Seleccione la acción correspondiente
4. Cline mostrará los resultados del análisis y las sugerencias de mejora en la barra lateral
**A través de la conversación:**
También puede escribir directamente en la barra lateral de Cline:
```
Refactor this code to improve readability and performance
```
*Haga clic derecho para usar "Explain with Cline" o "Improve with Cline" para procesar código rápidamente*
### 4.4 Depuración de errores
Encuentre y corrija errores:
1. Envíe mensajes de error o código problemático a Cline
2. Por ejemplo: "Este código lanza un error: TypeError: Cannot read property 'name' of undefined"
3. La IA analizará el problema y proporcionará soluciones
4. Puede aplicar la corrección directamente
### 4.5 Explicación de código
Comprenda código complejo:
1. Seleccione un fragmento de código difícil de entender
2. Escriba en Cline: "Explica qué hace este código"
3. La IA proporcionará una explicación detallada y de cómo funciona
### 4.6 Generación de documentación
Genere documentación de código automáticamente:
**Generar comentarios de función:**
```
Add JSDoc comments to this function
```
**Generar README:**
```
Generate a README.md file for this project
```
## Características avanzadas
### Operaciones en varios archivos
Cline puede manejar varios archivos simultáneamente:
1. **Crear varios archivos**:
```
Create a complete Express.js API with routes, controllers, and model files
```
2. **Modificaciones por lotes**:
```
Replace all var with const or let in the project
```
3. **Refactorización del proyecto**:
```
Migrate this project from JavaScript to TypeScript
```
*Cline puede crear y modificar varios archivos simultáneamente*
### Ejecución de comandos en terminal
Cline puede ayudar a ejecutar comandos de terminal:
1. **Instalar dependencias**:
```
Install axios and dotenv packages
```
2. **Ejecutar scripts**:
```
Run npm test
```
3. **Operaciones de Git**:
```
Create a Git commit with the message "feat: add user authentication"
```
**Flujo de ejecución de comandos:**
1. Cline mostrará "**Cline wants to execute this command:**" en la barra lateral
2. Muestra el comando específico (p. ej., `gcc fibonacci.c -o fibonacci.exe`)
3. Aparecen dos botones en la parte inferior:
* **Run Command**: ejecutar el comando
* **Reject**: rechazar la ejecución
4. Tras hacer clic en "Run Command", el comando se ejecuta en el terminal integrado
5. Los resultados se muestran tanto en el terminal como en la barra lateral de Cline
**Nota de seguridad:** Cline requiere su confirmación explícita antes de ejecutar comandos de terminal. Verifique cuidadosamente el contenido del comando, especialmente para operaciones sensibles que impliquen eliminación de archivos o configuración del sistema, antes de hacer clic en "Run Command".
### Gestión de contexto
Cline gestiona automáticamente el contexto de la conversación:
* **Contexto del archivo actual**: incluye automáticamente el archivo que se está editando
* **Contexto del código seleccionado**: incluye automáticamente los fragmentos de código que selecciona
* **Contexto de la estructura del proyecto**: entiende la estructura de su proyecto
* **Contexto de mensajes de error**: captura automáticamente los mensajes de error del terminal
### Prompts personalizados
Cree plantillas de prompts personalizadas:
1. Busque **Custom Instructions** en la configuración de Cline
2. Añada sus preferencias, por ejemplo:
```
- Use TypeScript instead of JavaScript
- Follow Airbnb code style
- Use arrow function syntax
- Prefer functional programming style
```
3. La IA seguirá estas instrucciones en todas las interacciones
## Preguntas frecuentes
### Q1: ¿Cline dice que la API Key es inválida?
**Soluciones:**
1. **Verifique el formato de la API Key**:
* Confirme que la API Key comience con `sk-`
* Asegúrese de que se haya copiado completamente sin espacios adicionales
2. **Verifique la Base URL**:
* Debe ser `https://api.apimart.ai/v1`
* Observe el sufijo `/v1`
3. **Verifique la validez de la clave**:
* Compruebe el estado de la clave en la [Consola de APIMart](https://apimart.ai/keys)
* Confirme que el saldo de la cuenta sea suficiente
4. **Vuelva a configurar**:
* Elimine la configuración existente
* Vuelva a introducir la API Key y la Base URL
### Q2: ¿Cline responde lentamente?
**Soluciones:**
1. **Cambie a un modelo más rápido**:
* Use `gpt-4o-mini` o `claude-haiku-4-5-20251001`
* Estos modelos responden más rápido
2. **Reduzca la longitud del contexto**:
* Evite enviar código muy largo de una vez
* Divida las tareas grandes en otras más pequeñas
3. **Verifique la conexión de red**:
* Asegure una red estable
* Considere usar un servidor proxy
4. **Optimice el contenido de la solicitud**:
* Haga preguntas más específicas
* Evite preguntas vagas o demasiado amplias
### Q3: ¿Cline genera código de baja calidad?
**Soluciones:**
1. **Use modelos de mayor calidad**:
* Cambie a `gpt-5` o `claude-sonnet-4-5-20250929`
* Estos modelos producen código de mayor calidad
2. **Proporcione requisitos más detallados**:
* Indique claramente la implementación esperada
* Proporcione código de ejemplo o referencias
* Especifique versiones de stack tecnológico y framework
3. **Use instrucciones personalizadas**:
* Añada estándares de código en la configuración
* Especifique el estilo de codificación y las mejores prácticas
4. **Optimización iterativa**:
* Mantenga varias rondas de conversación con la IA
* Mejore gradualmente la calidad del código
### Q4: ¿Cómo gestionar los costos de uso de la API?
**Soluciones:**
1. **Elija los modelos adecuados**:
* Use `gpt-4o-mini` para el desarrollo diario
* Use `gpt-5` para tareas complejas
2. **Optimice el enfoque de las preguntas**:
* Sea lo más específico posible
* Evite repetir las mismas preguntas
3. **Use la selección de código**:
* Seleccione solo la parte del código que necesita procesamiento
* Evite enviar todo el contexto del archivo
4. **Supervise el uso**:
* Verifique regularmente la [Consola de APIMart](https://apimart.ai/overview)
* Entienda la frecuencia y los costos de las llamadas a la API
### Q5: ¿Cline no puede acceder a ciertos archivos?
**Soluciones:**
1. **Verifique los permisos de los archivos**:
* Asegúrese de que los archivos tengan permisos de lectura/escritura
* Especialmente en sistemas Linux/macOS
2. **Verifique .gitignore**:
* Cline ignora los archivos en .gitignore por defecto
* Puede ajustar este comportamiento en la configuración
3. **Configuración del espacio de trabajo**:
* Asegúrese de que los archivos estén dentro del espacio de trabajo de VSCode
* Verifique la configuración de confianza del espacio de trabajo
4. **Recargue VSCode**:
* Use `Ctrl+Shift+P` / `Cmd+Shift+P`
* Ejecute el comando "Reload Window"
## Consejos de uso
### 1. Aproveche el contexto al máximo
**Proporcione información completa:**
```
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. Desarrollo incremental
**Comience simple, refine gradualmente:**
```
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. Asistente de revisión de código
**Deje que la IA revise su código:**
```
Please review this code, checking for:
1. Potential security issues
2. Performance optimization opportunities
3. Code style issues
4. Possible bugs
```
### 4. Aprender nuevas tecnologías
**Use Cline para aprender:**
```
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. Prototipado rápido
**Valide rápidamente ideas:**
```
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. Programación en pareja
**Colabore con la 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...
}
```
## Características destacadas
Con Cline + APIMart, puede:
* 💻 **Generación inteligente de código** - Generar código de alta calidad a partir de descripciones en lenguaje natural
* 🔧 **Refactorización de código** - Optimizar automáticamente la estructura y el rendimiento del código
* 🐛 **Ayuda con la depuración de errores** - Localizar y corregir rápidamente problemas de código
* 📝 **Generación de documentación** - Generar comentarios, README, documentación de API
* 🧪 **Escritura de casos de prueba** - Generar automáticamente pruebas unitarias y de integración
* 🔄 **Migración de código** - Conversión de lenguajes, migración de frameworks
* 💡 **Explicación de código** - Comprender lógica de código compleja
* 🎯 **Sugerencias de mejores prácticas** - Proporcionar estándares de código y consejos de optimización
* 🚀 **Prototipado rápido** - Validar rápidamente ideas y conceptos
* 🤖 **Ejecución de comandos de terminal** - Ejecutar automáticamente comandos de desarrollo
## Atajos de teclado
Atajos comunes de Cline:
| Atajo | Función | Descripción |
| ------------------------------ | ----------------------------- | -------------------------------------- |
| `Ctrl+Shift+P` / `Cmd+Shift+P` | Paleta de comandos | Acceder a todos los comandos de Cline |
| `Ctrl+Shift+X` / `Cmd+Shift+X` | Marketplace de extensiones | Instalar y gestionar extensiones |
| Clic en el icono de Cline | Abrir/cerrar la barra lateral | Acceso rápido a Cline |
| `Ctrl+K Ctrl+I` | Sugerencias en línea | Obtener sugerencias de IA en el editor |
**Consejo:** Puede personalizar los atajos de Cline en la configuración de atajos de teclado de VSCode.
## Mejores prácticas
### 1. Descripción clara de la tarea
❌ **Pregunta deficiente:**
```
Write a login feature
```
✅ **Buena pregunta:**
```
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. Proporcione información de contexto
**Incluya información relacionada con el proyecto:**
* Stack tecnológico y frameworks utilizados
* Estructura de archivos relevante
* Convenciones de código existentes
* Dependencias de bibliotecas de terceros
### 3. Mejora iterativa
**No espere la perfección la primera vez:**
1. Genere primero la funcionalidad básica
2. Pruebe y valide
3. Proporcione comentarios de mejora
4. Refine gradualmente
### 4. Revisión de código
**Siempre revise el código generado:**
* Verifique la corrección lógica
* Verifique la seguridad
* Pruebe los casos extremos
* Asegúrese del cumplimiento con los estándares del proyecto
### 5. Mantenga la continuidad de la conversación
**Aproveche la continuidad del contexto:**
```
Round 1: Create user model
Round 2: Based on the model just created, create CRUD endpoints
Round 3: Add permission validation to these endpoints
```
## Soporte y ayuda
Si encuentra algún problema:
* 📚 [Documentación de APIMart](https://docs.apimart.ai)
* 📚 [Documentación oficial de Cline](https://github.com/clinebot/cline)
* 💬 [Comunidad de Discord](https://discord.gg/V8zqssyZ5c)
* 🐦 [Twitter @APIMart\_](https://x.com/APIMart_)
* 📧 Soporte técnico: [zhihong@apimart.ai](mailto:zhihong@apimart.ai)
## Tutoriales en video
**Próximamente:** Estamos creando tutoriales en video detallados que cubren varios casos de uso y mejores prácticas para Cline + APIMart.
***
¡Regístrese en APIMart ahora, obtenga su clave de API y experimente el desarrollo asistido por IA en VSCode!