> ## 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.

# Mengintegrasikan APIMart dengan Cline di VSCode

> Panduan terperinci untuk mengonfigurasi layanan API APIMart menggunakan ekstensi Cline di Visual Studio Code. Panduan ini membantu Anda memakai model AI APIMart melalui Cline untuk pengembangan, debugging, dan optimasi kode di VSCode.

## Pendahuluan

Cline (sebelumnya Claude Dev) adalah ekstensi VSCode yang kuat dan memungkinkan developer berinteraksi langsung dengan asisten AI di editor untuk tugas seperti penulisan kode, debugging, dan refactoring. Dengan mengonfigurasi API APIMart, Anda dapat menggunakan berbagai model AI canggih di Cline.

## Prasyarat

Sebelum memulai, pastikan:

1. **Visual Studio Code sudah terinstal**\
   Unduh dan instal VSCode dari [situs resmi](https://code.visualstudio.com/)

2. **Ekstensi Cline sudah terinstal**\
   Cari "Cline" di marketplace ekstensi VSCode lalu instal

3. **API key APIMart sudah diperoleh**\
   Masuk ke [Konsol APIMart](https://apimart.ai/keys) untuk mendapatkan API key Anda (diawali dengan `sk-`)

<Note>
  **Tips:** Jika Anda belum memiliki akun APIMart, daftar terlebih dahulu di [APIMart](https://apimart.ai) dan dapatkan API key.
</Note>

## Langkah 1: Instal Ekstensi Cline

### 1.1 Buka Marketplace Ekstensi

Di VSCode:

1. Klik ikon **Extensions** di bilah aktivitas kiri (atau tekan `Ctrl+Shift+X` / `Cmd+Shift+X`)
2. Ketik **Cline** di kotak pencarian
3. Temukan ekstensi Cline (oleh Cline)
4. Klik tombol **Install**

### 1.2 Verifikasi Instalasi

Setelah instalasi:

1. Ikon **Cline** (kepala robot) akan muncul di bilah aktivitas kiri
2. Klik ikon tersebut untuk membuka sidebar Cline
3. Saat pertama dibuka, Anda akan melihat pesan sambutan "Hi, I'm Cline"
4. Dua opsi akan ditampilkan:
   * **Get Started for Free** - Gunakan uji coba gratis resmi
   * **Use your own API key** - Gunakan API key Anda sendiri

<Frame>
  <img src="https://mintcdn.com/apicore/0c3FfTpBvR13Ca4x/images/integrations/cline/extension-install.png?fit=max&auto=format&n=0c3FfTpBvR13Ca4x&q=85&s=d547318458a38f26e5cb5eab0207cceb" alt="Cline Extension Instalasi" width="1510" height="1010" data-path="images/integrations/cline/extension-install.png" />
</Frame>

<caption>*Cari dan instal Cline di marketplace ekstensi VSCode*</caption>

## Langkah 2: Konfigurasikan API APIMart

### 2.1 Pilih untuk Menggunakan API Key Sendiri

Di layar sambutan Cline:

1. Klik tombol **Use your own API key**
2. Tindakan ini akan membuka antarmuka konfigurasi API

<Frame>
  <img src="https://mintcdn.com/apicore/0c3FfTpBvR13Ca4x/images/integrations/cline/sidebar-settings.png?fit=max&auto=format&n=0c3FfTpBvR13Ca4x&q=85&s=2822806d4fde5ba8b48a19900a9865fc" alt="Cline Welcome Screen" width="1919" height="1031" data-path="images/integrations/cline/sidebar-settings.png" />
</Frame>

<caption>*Layar sambutan Cline, pilih "Use your own API key" untuk menggunakan APIMart*</caption>

<Note>
  **Tips:** Jika sebelumnya sudah dikonfigurasi, klik **Settings** (ikon roda gigi) di bagian atas sidebar Cline untuk membuka konfigurasi.
</Note>

### 2.2 Konfigurasikan Penyedia API

Di antarmuka Settings:

1. Perluas bagian **Konfigurasi API**
2. Pilih **OpenAI Compatible** dari dropdown **API Provider**
3. Opsi konfigurasi kompatibel OpenAI akan ditampilkan

<Note>
  **Penting:** APIMart sepenuhnya kompatibel dengan format API OpenAI, sehingga memilih "OpenAI Compatible" sudah tepat.
</Note>

### 2.3 Isi Konfigurasi API

Isi informasi konfigurasi berikut:

| Pengaturan                    | Nilai                                     | Deskripsi                             |
| ----------------------------- | ----------------------------------------- | ------------------------------------- |
| **API Provider**              | `OpenAI Compatible`                       | Pilih dari dropdown                   |
| **Base URL**                  | `https://api.apimart.ai/v1`               | Base URL API APIMart                  |
| **OpenAI Compatible API Key** | `sk-xxxxxxxxxxxx`                         | API key APIMart Anda                  |
| **Model ID**                  | `gpt-5` atau `claude-sonnet-4-5-20250929` | Masukkan ID model yang akan digunakan |

<Frame>
  <img src="https://mintcdn.com/apicore/0c3FfTpBvR13Ca4x/images/integrations/cline/api-config.png?fit=max&auto=format&n=0c3FfTpBvR13Ca4x&q=85&s=a12d36a260af9e0cbb1eeb94a220cd4e" alt="Configure APIMart API" width="1920" height="1031" data-path="images/integrations/cline/api-config.png" />
</Frame>

<caption>*Konfigurasikan API Provider, Base URL, API Key, dan Model ID di antarmuka Settings*</caption>

<Note>
  **Catatan Konfigurasi:**

  * **API Key**: Harus berupa key yang diawali `sk-` dan diperoleh dari [Konsol APIMart](https://apimart.ai/keys)
  * **Base URL**: Tetap `https://api.apimart.ai/v1`; perhatikan sufiks `/v1`
  * **Model ID**: Masukkan ID model langsung, seperti `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929`, dll.
  * Antarmuka konfigurasi akan menampilkan kemampuan model di bawahnya (misalnya dukungan gambar, penggunaan browser)
</Note>

### 2.4 Simpan Konfigurasi

Setelah konfigurasi:

1. Klik tombol **Done** di sudut kanan atas
2. Konfigurasi disimpan secara otomatis
3. Cline akan langsung terhubung ke APIMart menggunakan konfigurasi baru
4. Kembali ke antarmuka utama Cline yang menampilkan "What can I do for you?"

## Langkah 3: Pilih Model yang Tepat

### Model yang Direkomendasikan

Pilih model yang sesuai berdasarkan skenario pengembangan yang berbeda:

**Pembuatan Teks & Pengembangan Kode:**

* **gpt-5** ⭐ Model terbaru, kualitas pembuatan kode tertinggi
  * Cocok untuk: Algoritma kompleks, desain arsitektur, refactoring kode
  * Fitur: Pemahaman kuat, kualitas kode tinggi

* **gpt-4o** Model berperforma tinggi
  * Cocok untuk: Pengembangan harian, review kode, perbaikan bug
  * Fitur: Cepat, kualitas stabil

* **gpt-4o-mini** 💰 Hemat biaya
  * Cocok untuk: Pembuatan kode sederhana, penulisan komentar, dokumentasi
  * Fitur: Nilai bagus, respons cepat

**Seri Claude (Penalaran Kuat):**

* **claude-sonnet-4-5-20250929**
  * Cocok untuk: Penalaran logika kompleks, optimasi algoritma
  * Fitur: Penalaran sangat baik, bagus untuk masalah kompleks

* **claude-haiku-4-5-20251001**
  * Cocok untuk: Penyelesaian kode cepat, tanya jawab sederhana
  * Fitur: Sangat cepat, biaya rendah

<Tip>
  **Tips Pemilihan Model:**

  * 🚀 **Proyek kompleks, fitur penting:** `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929`
  * 💼 **Pengembangan harian, tugas rutin:** `gpt-4o`, `gpt-4o-mini`
  * 💰 **Sensitif biaya, penggunaan tinggi:** `gpt-4o-mini`, `claude-haiku-4-5-20251001`
</Tip>

### Beralih Model

Di bagian bawah antarmuka utama Cline:

1. Temukan tombol model di bawah kotak input (menampilkan model saat ini, misalnya `openai-compatible:clau...`)
2. Klik tombol ini untuk beralih model
3. Atau ubah kolom **Model ID** di pengaturan
4. Perubahan langsung berlaku, tidak perlu memulai ulang VSCode

<Note>
  **Tips:** Model saat ini ditampilkan pada tombol di bawah kotak input; klik untuk beralih cepat.
</Note>

## Langkah 4: Mulai Menggunakan Cline

### 4.1 Percakapan Dasar

Setelah konfigurasi, mulailah chat dengan asisten AI:

1. Antarmuka utama Cline akan menampilkan "**What can I do for you?**"
2. Masukkan permintaan Anda di kotak input bawah (menampilkan "Type your task here...")
3. Contoh: "Buat fungsi untuk menghitung deret Fibonacci"
4. Tekan `Enter` untuk mengirim
5. AI akan menganalisis permintaan Anda, menghasilkan kode, dan dapat menerapkannya langsung ke proyek
6. Progres setiap langkah ditampilkan di sidebar

### 4.2 Pembuatan Kode

Biarkan AI menghasilkan kode:

**Contoh 1: Buat fungsi**

```
Please create a JavaScript function to validate email address format
```

**Contoh 2: Implementasi fitur**

```
Help me implement a user login form with email and password inputs using React Hooks
```

**Contoh 3: Tulis test**

```
Write unit tests for the calculateTotal function using Jest
```

<Frame>
  <img src="https://mintcdn.com/apicore/0c3FfTpBvR13Ca4x/images/integrations/cline/chat-interface.png?fit=max&auto=format&n=0c3FfTpBvR13Ca4x&q=85&s=d8715c4d1f2ddb3f1dd1d2ba6f3083b3" alt="Cline Chat Interface" width="1920" height="1031" data-path="images/integrations/cline/chat-interface.png" />
</Frame>

<caption>*Chat dengan AI di Cline untuk menghasilkan kode*</caption>

### 4.3 Penjelasan dan Perbaikan Kode

Analisis dan optimalkan kode yang sudah ada:

**Shortcut menu klik kanan:**

1. Pilih kode yang ingin diproses di editor
2. Klik kanan untuk melihat opsi Cline:
   * **Explain with Cline** - Menjelaskan fungsi dan logika kode
   * **Improve with Cline** - Mengoptimalkan dan memperbaiki kode
3. Pilih tindakan yang sesuai
4. Cline akan menampilkan hasil analisis dan saran perbaikan di sidebar

**Melalui percakapan:**

Anda juga dapat mengetik langsung di sidebar Cline:

```
Refactor this code to improve readability and performance
```

<Frame>
  <img src="https://mintcdn.com/apicore/0c3FfTpBvR13Ca4x/images/integrations/cline/code-refactor.png?fit=max&auto=format&n=0c3FfTpBvR13Ca4x&q=85&s=cd87e44abe8d99e590cbf65cc25434d3" alt="Penjelasan dan Perbaikan Kode" width="1920" height="1031" data-path="images/integrations/cline/code-refactor.png" />
</Frame>

<caption>*Klik kanan untuk menggunakan "Explain with Cline" atau "Improve with Cline" agar pemrosesan kode lebih cepat*</caption>

### 4.4 Debugging Bug

Temukan dan perbaiki error:

1. Kirim pesan error atau kode bermasalah ke Cline
2. Contoh: "Kode ini memunculkan error: TypeError: Cannot read property 'name' of undefined"
3. AI akan menganalisis masalah dan memberikan solusi
4. Anda dapat menerapkan perbaikan secara langsung

### 4.5 Penjelasan Kode

Memahami kode kompleks:

1. Pilih cuplikan kode yang sulit dipahami
2. Ketik di Cline: "Jelaskan apa yang dilakukan kode ini"
3. AI akan memberikan penjelasan terperinci dan cara kerjanya

### 4.6 Pembuatan Dokumentasi

Hasilkan dokumentasi kode secara otomatis:

**Hasilkan komentar fungsi:**

```
Add JSDoc comments to this function
```

**Hasilkan README:**

```
Generate a README.md file for this project
```

## Fitur Lanjutan

### Operasi Multi-file

Cline dapat menangani beberapa file secara bersamaan:

1. **Buat beberapa file**:
   ```
   Create a complete Express.js API with routes, controllers, and model files
   ```

2. **Modifikasi batch**:
   ```
   Replace all var with const or let in the project
   ```

3. **Refactoring proyek**:
   ```
   Migrate this project from JavaScript to TypeScript
   ```

<caption>*Cline dapat membuat dan mengubah beberapa file sekaligus*</caption>

### Eksekusi Perintah Terminal

Cline dapat membantu mengeksekusi perintah terminal:

1. **Instal dependensi**:
   ```
   Install axios and dotenv packages
   ```

2. **Jalankan skrip**:
   ```
   Run npm test
   ```

3. **Operasi Git**:
   ```
   Create a Git commit with the message "feat: add user authentication"
   ```

**Alur eksekusi perintah:**

1. Cline akan menampilkan "**Cline wants to execute this command:**" di sidebar
2. Menampilkan perintah spesifik (misalnya `gcc fibonacci.c -o fibonacci.exe`)
3. Dua tombol muncul di bagian bawah:
   * **Run Command** - Menjalankan perintah
   * **Reject** - Menolak eksekusi
4. Setelah mengeklik "Run Command", perintah berjalan di terminal terintegrasi
5. Hasil ditampilkan di terminal dan sidebar Cline

<Warning>
  **Catatan Keamanan:** Cline memerlukan konfirmasi eksplisit Anda sebelum menjalankan perintah terminal. Periksa isi perintah dengan cermat, terutama untuk operasi sensitif seperti penghapusan file atau konfigurasi sistem, sebelum mengeklik "Run Command".
</Warning>

### Manajemen Konteks

Cline secara otomatis mengelola konteks percakapan:

* **Konteks file saat ini**: Otomatis menyertakan file yang sedang diedit
* **Konteks kode terpilih**: Otomatis menyertakan cuplikan kode yang Anda pilih
* **Konteks struktur proyek**: Memahami struktur proyek Anda
* **Konteks pesan error**: Otomatis menangkap pesan error terminal

### Prompt Kustom

Buat templat prompt kustom:

1. Temukan **Custom Instructions** di pengaturan Cline
2. Tambahkan preferensi Anda, misalnya:
   ```
   - Use TypeScript instead of JavaScript
   - Follow Airbnb code style
   - Use arrow function syntax
   - Prefer functional programming style
   ```
3. AI akan mengikuti instruksi ini dalam semua interaksi

## FAQ

### Q1: Cline mengatakan API key tidak valid?

**Solusi:**

1. **Periksa format API Key**:
   * Pastikan API Key diawali dengan `sk-`
   * Pastikan disalin lengkap tanpa spasi tambahan

2. **Periksa Base URL**:
   * Harus `https://api.apimart.ai/v1`
   * Perhatikan sufiks `/v1`

3. **Verifikasi validitas key**:
   * Periksa status key di [Konsol APIMart](https://apimart.ai/keys)
   * Pastikan saldo akun mencukupi

4. **Konfigurasi ulang**:
   * Hapus konfigurasi yang ada
   * Masukkan ulang API Key dan Base URL

### Q2: Cline merespons lambat?

**Solusi:**

1. **Beralih ke model yang lebih cepat**:
   * Gunakan `gpt-4o-mini` atau `claude-haiku-4-5-20251001`
   * Model ini merespons lebih cepat

2. **Kurangi panjang konteks**:
   * Hindari mengirim kode yang sangat panjang sekaligus
   * Pecah tugas besar menjadi yang lebih kecil

3. **Periksa koneksi jaringan**:
   * Pastikan jaringan stabil
   * Pertimbangkan menggunakan server proxy

4. **Optimalkan konten permintaan**:
   * Ajukan pertanyaan yang lebih spesifik
   * Hindari pertanyaan yang samar atau terlalu luas

### Q3: Cline menghasilkan kode berkualitas rendah?

**Solusi:**

1. **Gunakan model berkualitas lebih tinggi**:
   * Beralih ke `gpt-5` atau `claude-sonnet-4-5-20250929`
   * Model ini menghasilkan kode berkualitas lebih tinggi

2. **Berikan persyaratan yang lebih detail**:
   * Sampaikan implementasi yang diharapkan dengan jelas
   * Berikan kode contoh atau referensi
   * Tentukan tech stack dan versi framework

3. **Gunakan instruksi kustom**:
   * Tambahkan standar kode di pengaturan
   * Tentukan gaya coding dan praktik terbaik

4. **Optimasi iteratif**:
   * Lakukan beberapa putaran percakapan dengan AI
   * Tingkatkan kualitas kode secara bertahap

### Q4: Bagaimana mengelola biaya penggunaan API?

**Solusi:**

1. **Pilih model yang sesuai**:
   * Gunakan `gpt-4o-mini` untuk pengembangan harian
   * Gunakan `gpt-5` untuk tugas kompleks

2. **Optimalkan pendekatan pertanyaan**:
   * Sespesifik mungkin
   * Hindari mengulang pertanyaan yang sama

3. **Gunakan pemilihan kode**:
   * Pilih hanya bagian kode yang perlu diproses
   * Hindari mengirim konteks file utuh

4. **Pantau penggunaan**:
   * Periksa secara berkala [Konsol APIMart](https://apimart.ai/overview)
   * Pahami frekuensi dan biaya panggilan API

### Q5: Cline tidak dapat mengakses file tertentu?

**Solusi:**

1. **Periksa izin file**:
   * Pastikan file memiliki izin baca/tulis
   * Terutama di sistem Linux/macOS

2. **Periksa .gitignore**:
   * Cline mengabaikan file di .gitignore secara default
   * Anda dapat menyesuaikan perilaku ini di pengaturan

3. **Pengaturan workspace**:
   * Pastikan file berada di dalam workspace VSCode
   * Periksa pengaturan kepercayaan workspace

4. **Muat ulang VSCode**:
   * Gunakan `Ctrl+Shift+P` / `Cmd+Shift+P`
   * Jalankan perintah "Reload Window"

## Tips Penggunaan

### 1. Manfaatkan Konteks Sepenuhnya

**Berikan informasi lengkap:**

```
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. Pengembangan Bertahap

**Mulai sederhana, perbaiki bertahap:**

```
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. Asisten Review Kode

**Biarkan AI mereview kode Anda:**

```
Please review this code, checking for:
1. Potential security issues
2. Performance optimization opportunities
3. Code style issues
4. Possible bugs
```

### 4. Pelajari Teknologi Baru

**Gunakan Cline untuk belajar:**

```
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. Prototyping Cepat

**Validasi ide dengan cepat:**

```
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

**Berkolaborasi dengan AI:**

```
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...
}
```

## Sorotan Fitur

Dengan Cline + APIMart, Anda dapat:

* 💻 **Pembuatan Kode Cerdas** - Hasilkan kode berkualitas tinggi dari deskripsi bahasa alami
* 🔧 **Refactoring Kode** - Optimalkan struktur dan performa kode secara otomatis
* 🐛 **Bantuan Debugging Bug** - Temukan dan perbaiki masalah kode dengan cepat
* 📝 **Pembuatan Dokumentasi** - Hasilkan komentar, README, dokumentasi API
* 🧪 **Penulisan Test Case** - Hasilkan tes unit dan integrasi secara otomatis
* 🔄 **Migrasi Kode** - Konversi bahasa, migrasi framework
* 💡 **Penjelasan Kode** - Memahami logika kode kompleks
* 🎯 **Saran Praktik Terbaik** - Berikan standar kode dan saran optimasi
* 🚀 **Prototyping Cepat** - Validasi ide dan konsep dengan cepat
* 🤖 **Eksekusi Perintah Terminal** - Jalankan perintah pengembangan secara otomatis

## Pintasan Keyboard

Pintasan Cline yang umum:

| Pintasan                       | Fungsi               | Deskripsi                   |
| ------------------------------ | -------------------- | --------------------------- |
| `Ctrl+Shift+P` / `Cmd+Shift+P` | Command Palette      | Akses semua perintah Cline  |
| `Ctrl+Shift+X` / `Cmd+Shift+X` | Marketplace Ekstensi | Instal dan kelola ekstensi  |
| Klik ikon Cline                | Buka/Tutup sidebar   | Akses cepat ke Cline        |
| `Ctrl+K Ctrl+I`                | Saran inline         | Dapatkan saran AI di editor |

<Tip>
  **Tips:** Anda dapat menyesuaikan pintasan Cline di pengaturan pintasan keyboard VSCode.
</Tip>

## Praktik Terbaik

### 1. Deskripsi Tugas yang Jelas

❌ **Pertanyaan buruk:**

```
Write a login feature
```

✅ **Pertanyaan baik:**

```
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. Berikan Informasi Konteks

**Sertakan informasi terkait proyek:**

* Tech stack dan framework yang digunakan
* Struktur file yang relevan
* Konvensi kode yang ada
* Dependensi pustaka pihak ketiga

### 3. Peningkatan Iteratif

**Jangan berharap sempurna sejak awal:**

1. Hasilkan fungsionalitas dasar terlebih dahulu
2. Uji dan validasi
3. Berikan umpan balik perbaikan
4. Perbaiki secara bertahap

### 4. Review Kode

**Selalu review kode yang dihasilkan:**

* Periksa kebenaran logika
* Verifikasi keamanan
* Uji edge case
* Pastikan sesuai standar proyek

### 5. Pertahankan Kontinuitas Percakapan

**Manfaatkan kontinuitas konteks:**

```
Round 1: Create user model
Round 2: Based on the model just created, create CRUD endpoints
Round 3: Add permission validation to these endpoints
```

## Dukungan & Bantuan

Jika Anda mengalami masalah:

* 📚 [Dokumentasi APIMart](https://docs.apimart.ai)
* 📚 [Dokumentasi Resmi Cline](https://github.com/clinebot/cline)
* 💬 [Komunitas Discord](https://discord.gg/V8zqssyZ5c)
* 🐦 [Twitter @APIMart\_](https://x.com/APIMart_)
* 📧 Dukungan teknis: [zhihong@apimart.ai](mailto:zhihong@apimart.ai)

## Tutorial Video

<Note>
  **Segera Hadir:** Kami sedang membuat tutorial video terperinci yang mencakup berbagai kasus penggunaan dan praktik terbaik untuk Cline + APIMart.
</Note>

***

<Card title="Mulai dengan APIMart" icon="rocket" href="https://apimart.ai">
  Daftar APIMart sekarang, dapatkan API key Anda, dan rasakan pengembangan berbantuan AI di VSCode!
</Card>