> ## 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 o APIMart com o Cline no VSCode
> Um guia detalhado sobre como configurar o serviço de API do APIMart usando a extensão Cline no Visual Studio Code. Este guia ajudará você a usar os modelos de IA do APIMart através do Cline para desenvolvimento, depuração e otimização de código no VSCode.
## Introdução
Cline (anteriormente Claude Dev) é uma poderosa extensão do VSCode que permite aos desenvolvedores interagir com assistentes de IA diretamente no editor, realizando tarefas como escrita, depuração e refatoração de código. Ao configurar a API do APIMart, você pode usar vários modelos avançados de IA no Cline.
## Pré-requisitos
Antes de começar, certifique-se de:
1. **Visual Studio Code instalado**\
Baixe e instale o VSCode no [site oficial](https://code.visualstudio.com/)
2. **Extensão Cline instalada**\
Pesquise por "Cline" no marketplace de extensões do VSCode e instale-a
3. **Chave de API do APIMart obtida**\
Acesse o [Console do APIMart](https://apimart.ai/keys) para obter sua chave de API (começa com `sk-`)
**Dica:** Se você ainda não tem uma conta no APIMart, registre-se primeiro em [APIMart](https://apimart.ai) e obtenha uma chave de API.
## Etapa 1: Instalar a extensão Cline
### 1.1 Abrir o marketplace de extensões
No VSCode:
1. Clique no ícone de **Extensões** na barra de atividades à esquerda (ou pressione `Ctrl+Shift+X` / `Cmd+Shift+X`)
2. Digite **Cline** na caixa de pesquisa
3. Encontre a extensão Cline (do Cline)
4. Clique no botão **Install**
### 1.2 Verificar a instalação
Após a instalação:
1. O ícone **Cline** (cabeça de robô) aparecerá na barra de atividades à esquerda
2. Clique no ícone para abrir a barra lateral do Cline
3. Na primeira abertura, você verá a mensagem de boas-vindas "Hi, I'm Cline"
4. Duas opções são exibidas:
* **Get Started for Free** - Use o teste gratuito oficial
* **Use your own API key** - Use sua própria chave de API
*Pesquise e instale o Cline no marketplace de extensões do VSCode*
## Etapa 2: Configurar a API do APIMart
### 2.1 Escolher usar sua própria chave de API
Na tela de boas-vindas do Cline:
1. Clique no botão **Use your own API key**
2. Isso abrirá a interface de configuração da API
*Tela de boas-vindas do Cline, selecione "Use your own API key" para usar o APIMart*
**Dica:** Se você já configurou antes, pode clicar nas **Settings** (ícone de engrenagem) no topo da barra lateral do Cline para acessar a configuração.
### 2.2 Configurar o provedor de API
Na interface de Configurações:
1. Expanda a seção **API Configuration**
2. Selecione **OpenAI Compatible** no menu suspenso **API Provider**
3. Isso exibirá opções de configuração compatíveis com OpenAI
**Importante:** O APIMart é totalmente compatível com o formato da API OpenAI, portanto, selecionar "OpenAI Compatible" é apropriado.
### 2.3 Preencher a configuração da API
Preencha as seguintes informações de configuração:
| Configuração | Valor | Descrição |
| ----------------------------- | --------------------------------------- | --------------------------------- |
| **API Provider** | `OpenAI Compatible` | Selecione no menu suspenso |
| **Base URL** | `https://api.apimart.ai/v1` | URL base da API do APIMart |
| **OpenAI Compatible API Key** | `sk-xxxxxxxxxxxx` | Sua chave de API do APIMart |
| **Model ID** | `gpt-5` ou `claude-sonnet-4-5-20250929` | Insira o ID do modelo a ser usado |
*Configure API Provider, Base URL, API Key e Model ID na interface de Configurações*
**Notas de configuração:**
* **API Key**: Deve ser a chave começando com `sk-` obtida no [Console do APIMart](https://apimart.ai/keys)
* **Base URL**: Fixada como `https://api.apimart.ai/v1`, observe o sufixo `/v1`
* **Model ID**: Insira o ID do modelo diretamente, como `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929`, etc.
* A interface de configuração exibirá as capacidades do modelo abaixo (por exemplo, suporte a imagens, uso de navegador)
### 2.4 Salvar a configuração
Após a configuração:
1. Clique no botão **Done** no canto superior direito
2. A configuração é salva automaticamente
3. O Cline se conectará imediatamente ao APIMart usando a nova configuração
4. Retorne à interface principal do Cline, mostrando "What can I do for you?"
## Etapa 3: Escolher o modelo certo
### Modelos recomendados
Escolha o modelo apropriado com base nos diferentes cenários de desenvolvimento:
**Geração de texto e desenvolvimento de código:**
* **gpt-5** ⭐ Modelo mais recente, maior qualidade de geração de código
* Adequado para: Algoritmos complexos, design de arquitetura, refatoração de código
* Recursos: Forte compreensão, alta qualidade de código
* **gpt-4o** Modelo de alto desempenho
* Adequado para: Desenvolvimento diário, revisão de código, correção de bugs
* Recursos: Rápido, qualidade estável
* **gpt-4o-mini** 💰 Custo-benefício
* Adequado para: Geração de código simples, redação de comentários, documentação
* Recursos: Ótimo custo-benefício, resposta rápida
**Série Claude (Forte raciocínio):**
* **claude-sonnet-4-5-20250929**
* Adequado para: Raciocínio lógico complexo, otimização de algoritmos
* Recursos: Excelente raciocínio, ótimo para problemas complexos
* **claude-haiku-4-5-20251001**
* Adequado para: Autocompletar código rápido, perguntas e respostas simples
* Recursos: Extremamente rápido, baixo custo
**Dicas de seleção de modelos:**
* 🚀 **Projetos complexos, recursos importantes:** `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929`
* 💼 **Desenvolvimento diário, tarefas rotineiras:** `gpt-4o`, `gpt-4o-mini`
* 💰 **Sensível a custos, uso de alta frequência:** `gpt-4o-mini`, `claude-haiku-4-5-20251001`
### Trocando modelos
Na parte inferior da interface principal do Cline:
1. Encontre o botão de modelo abaixo da caixa de entrada (mostra o modelo atual, por exemplo, `openai-compatible:clau...`)
2. Clique neste botão para trocar de modelos
3. Ou modifique o campo **Model ID** nas configurações
4. As alterações entram em vigor imediatamente, sem necessidade de reiniciar o VSCode
**Dica:** O modelo atual é mostrado no botão abaixo da caixa de entrada; clique para trocar rapidamente.
## Etapa 4: Começar a usar o Cline
### 4.1 Conversa básica
Após a configuração, converse com o assistente de IA:
1. A interface principal do Cline mostrará "**What can I do for you?**"
2. Digite sua solicitação na caixa de entrada na parte inferior (mostra "Type your task here...")
3. Por exemplo: "Create a function to calculate the Fibonacci sequence"
4. Pressione `Enter` para enviar
5. A IA analisará sua solicitação, gerará código e poderá aplicá-lo diretamente ao seu projeto
6. O progresso de cada etapa é exibido na barra lateral
### 4.2 Geração de código
Deixe a IA gerar código:
**Exemplo 1: Criar uma função**
```
Please create a JavaScript function to validate email address format
```
**Exemplo 2: Implementar um recurso**
```
Help me implement a user login form with email and password inputs using React Hooks
```
**Exemplo 3: Escrever testes**
```
Write unit tests for the calculateTotal function using Jest
```
*Converse com a IA no Cline para gerar código*
### 4.3 Explicação e melhoria de código
Analise e otimize código existente:
**Atalhos do menu de clique com botão direito:**
1. Selecione o código que deseja processar no editor
2. Clique com o botão direito para ver as opções do Cline:
* **Explain with Cline** - Explica a funcionalidade e lógica do código
* **Improve with Cline** - Otimiza e melhora o código
3. Selecione a ação correspondente
4. O Cline exibirá os resultados da análise e sugestões de melhoria na barra lateral
**Através da conversa:**
Você também pode digitar diretamente na barra lateral do Cline:
```
Refactor this code to improve readability and performance
```
*Clique com o botão direito para usar "Explain with Cline" ou "Improve with Cline" para processamento rápido de código*
### 4.4 Depuração de bugs
Encontre e corrija erros:
1. Envie mensagens de erro ou código problemático para o Cline
2. Por exemplo: "This code throws an error: TypeError: Cannot read property 'name' of undefined"
3. A IA analisará o problema e fornecerá soluções
4. Você pode aplicar a correção diretamente
### 4.5 Explicação de código
Entenda código complexo:
1. Selecione um trecho de código difícil de entender
2. Digite no Cline: "Explain what this code does"
3. A IA fornecerá uma explicação detalhada e como funciona
### 4.6 Geração de documentação
Gere documentação de código automaticamente:
**Gerar comentários de função:**
```
Add JSDoc comments to this function
```
**Gerar README:**
```
Generate a README.md file for this project
```
## Recursos avançados
### Operações multi-arquivo
O Cline pode lidar com vários arquivos simultaneamente:
1. **Criar múltiplos arquivos**:
```
Create a complete Express.js API with routes, controllers, and model files
```
2. **Modificações em lote**:
```
Replace all var with const or let in the project
```
3. **Refatoração de projeto**:
```
Migrate this project from JavaScript to TypeScript
```
*O Cline pode criar e modificar vários arquivos simultaneamente*
### Execução de comandos do terminal
O Cline pode ajudar a executar comandos do terminal:
1. **Instalar dependências**:
```
Install axios and dotenv packages
```
2. **Executar scripts**:
```
Run npm test
```
3. **Operações Git**:
```
Create a Git commit with the message "feat: add user authentication"
```
**Fluxo de execução de comandos:**
1. O Cline exibirá "**Cline wants to execute this command:**" na barra lateral
2. Mostra o comando específico (por exemplo, `gcc fibonacci.c -o fibonacci.exe`)
3. Dois botões aparecem na parte inferior:
* **Run Command** - Executar o comando
* **Reject** - Recusar a execução
4. Após clicar em "Run Command", o comando é executado no terminal integrado
5. Os resultados são exibidos tanto no terminal quanto na barra lateral do Cline
**Nota de segurança:** O Cline requer sua confirmação explícita antes de executar comandos do terminal. Verifique cuidadosamente o conteúdo do comando, especialmente para operações sensíveis envolvendo exclusão de arquivos ou configuração do sistema, antes de clicar em "Run Command".
### Gerenciamento de contexto
O Cline gerencia automaticamente o contexto da conversa:
* **Contexto do arquivo atual**: Inclui automaticamente o arquivo que está sendo editado
* **Contexto do código selecionado**: Inclui automaticamente trechos de código que você selecionou
* **Contexto da estrutura do projeto**: Entende a estrutura do seu projeto
* **Contexto de mensagens de erro**: Captura automaticamente mensagens de erro do terminal
### Prompts personalizados
Crie modelos de prompts personalizados:
1. Encontre **Custom Instructions** nas configurações do Cline
2. Adicione suas preferências, por exemplo:
```
- Use TypeScript instead of JavaScript
- Follow Airbnb code style
- Use arrow function syntax
- Prefer functional programming style
```
3. A IA seguirá essas instruções em todas as interações
## FAQ
### Q1: O Cline diz que a chave de API é inválida?
**Soluções:**
1. **Verifique o formato da API Key**:
* Confirme que a API Key começa com `sk-`
* Certifique-se de que foi copiada completamente, sem espaços extras
2. **Verifique a Base URL**:
* Deve ser `https://api.apimart.ai/v1`
* Observe o sufixo `/v1`
3. **Verifique a validade da chave**:
* Verifique o status da chave no [Console do APIMart](https://apimart.ai/keys)
* Confirme saldo suficiente na conta
4. **Reconfigure**:
* Exclua a configuração existente
* Insira novamente API Key e Base URL
### Q2: O Cline responde lentamente?
**Soluções:**
1. **Mude para um modelo mais rápido**:
* Use `gpt-4o-mini` ou `claude-haiku-4-5-20251001`
* Esses modelos respondem mais rápido
2. **Reduza o comprimento do contexto**:
* Evite enviar código muito longo de uma vez
* Divida tarefas grandes em menores
3. **Verifique a conexão de rede**:
* Garanta uma rede estável
* Considere usar um servidor proxy
4. **Otimize o conteúdo da requisição**:
* Faça perguntas mais específicas
* Evite perguntas vagas ou muito amplas
### Q3: O Cline gera código de baixa qualidade?
**Soluções:**
1. **Use modelos de maior qualidade**:
* Mude para `gpt-5` ou `claude-sonnet-4-5-20250929`
* Esses modelos produzem código de maior qualidade
2. **Forneça requisitos mais detalhados**:
* Declare claramente a implementação esperada
* Forneça código de exemplo ou referências
* Especifique stack tecnológico e versões de framework
3. **Use instruções personalizadas**:
* Adicione padrões de código nas configurações
* Especifique estilo de codificação e melhores práticas
4. **Otimização iterativa**:
* Tenha várias rodadas de conversa com a IA
* Melhore gradualmente a qualidade do código
### Q4: Como gerenciar os custos de uso da API?
**Soluções:**
1. **Escolha modelos apropriados**:
* Use `gpt-4o-mini` para desenvolvimento diário
* Use `gpt-5` para tarefas complexas
2. **Otimize a abordagem das perguntas**:
* Seja o mais específico possível
* Evite repetir as mesmas perguntas
3. **Use seleção de código**:
* Selecione apenas a parte do código que precisa de processamento
* Evite enviar contexto de arquivo inteiro
4. **Monitore o uso**:
* Verifique regularmente o [Console do APIMart](https://apimart.ai/overview)
* Entenda a frequência de chamadas de API e os custos
### Q5: O Cline não consegue acessar certos arquivos?
**Soluções:**
1. **Verifique as permissões de arquivo**:
* Certifique-se de que os arquivos têm permissões de leitura/gravação
* Especialmente em sistemas Linux/macOS
2. **Verifique o .gitignore**:
* O Cline ignora arquivos no .gitignore por padrão
* Você pode ajustar esse comportamento nas configurações
3. **Configurações da área de trabalho**:
* Certifique-se de que os arquivos estão dentro da área de trabalho do VSCode
* Verifique as configurações de confiança da área de trabalho
4. **Recarregue o VSCode**:
* Use `Ctrl+Shift+P` / `Cmd+Shift+P`
* Execute o comando "Reload Window"
## Dicas de uso
### 1. Aproveite o contexto ao máximo
**Forneça informações completas:**
```
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. Desenvolvimento incremental
**Comece simples, 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. Assistente de revisão de código
**Deixe a IA revisar seu código:**
```
Please review this code, checking for:
1. Potential security issues
2. Performance optimization opportunities
3. Code style issues
4. Possible bugs
```
### 4. Aprenda novas tecnologias
**Use o 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. Prototipagem rápida
**Valide ideias rapidamente:**
```
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. Programação em par
**Colabore com a 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...
}
```
## Destaques de recursos
Com Cline + APIMart, você pode:
* 💻 **Geração inteligente de código** - Gere código de alta qualidade a partir de descrições em linguagem natural
* 🔧 **Refatoração de código** - Otimize automaticamente a estrutura e o desempenho do código
* 🐛 **Assistência na depuração de bugs** - Localize e corrija rapidamente problemas de código
* 📝 **Geração de documentação** - Gere comentários, README, documentação de API
* 🧪 **Escrita de casos de teste** - Gere automaticamente testes unitários e de integração
* 🔄 **Migração de código** - Conversão de linguagem, migração de framework
* 💡 **Explicação de código** - Entenda lógica de código complexa
* 🎯 **Sugestões de melhores práticas** - Forneça padrões de código e conselhos de otimização
* 🚀 **Prototipagem rápida** - Valide ideias e conceitos rapidamente
* 🤖 **Execução de comandos do terminal** - Execute automaticamente comandos de desenvolvimento
## Atalhos de teclado
Atalhos comuns do Cline:
| Atalho | Função | Descrição |
| ------------------------------ | -------------------------- | ---------------------------------- |
| `Ctrl+Shift+P` / `Cmd+Shift+P` | Paleta de comandos | Acessar todos os comandos do Cline |
| `Ctrl+Shift+X` / `Cmd+Shift+X` | Marketplace de extensões | Instalar e gerenciar extensões |
| Clicar no ícone do Cline | Abrir/Fechar barra lateral | Acesso rápido ao Cline |
| `Ctrl+K Ctrl+I` | Sugestões inline | Obter sugestões de IA no editor |
**Dica:** Você pode personalizar os atalhos do Cline nas configurações de atalhos de teclado do VSCode.
## Melhores práticas
### 1. Descrição clara da tarefa
❌ **Pergunta ruim:**
```
Write a login feature
```
✅ **Pergunta boa:**
```
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. Forneça informações de contexto
**Inclua informações relacionadas ao projeto:**
* Stack tecnológico e frameworks usados
* Estrutura de arquivos relevante
* Convenções de código existentes
* Dependências de bibliotecas de terceiros
### 3. Melhoria iterativa
**Não espere perfeição na primeira tentativa:**
1. Gere a funcionalidade básica primeiro
2. Teste e valide
3. Forneça feedback de melhoria
4. Refine gradualmente
### 4. Revisão de código
**Sempre revise o código gerado:**
* Verifique a corretude lógica
* Verifique a segurança
* Teste casos extremos
* Garanta conformidade com os padrões do projeto
### 5. Mantenha a continuidade da conversa
**Aproveite a continuidade do contexto:**
```
Rodada 1: Create user model
Rodada 2: Based on the model just created, create CRUD endpoints
Rodada 3: Add permission validation to these endpoints
```
## Suporte e ajuda
Se você encontrar algum problema:
* 📚 [Documentação do APIMart](https://docs.apimart.ai)
* 📚 [Documentação oficial do Cline](https://github.com/clinebot/cline)
* 💬 [Comunidade do Discord](https://discord.gg/V8zqssyZ5c)
* 🐦 [Twitter @APIMart\_](https://x.com/APIMart_)
* 📧 Suporte técnico: [zhihong@apimart.ai](mailto:zhihong@apimart.ai)
## Tutoriais em vídeo
**Em breve:** Estamos criando tutoriais em vídeo detalhados cobrindo vários casos de uso e melhores práticas para Cline + APIMart.
***
Registre-se no APIMart agora, obtenha sua chave de API e experimente o desenvolvimento assistido por IA no VSCode!