Apa Itu Mintlify Docs dan Cara Menggunakannya: Panduan Pemula

Apakah Anda kesulitan membuat dokumentasi yang rapi, mudah digunakan, dan tidak terasa seperti beban? Sambutlah Mintlify, platform berbasis AI yang membuat pembuatan dokumen yang menakjubkan semudah menulis posting blog. Dengan 28 ribu+ bintang GitHub dan klien seperti Stripe, Mintlify menawarkan fitur interaktif, alat AI, dan integrasi tanpa hambatan untuk meningkatkan permainan dokumentasi Anda. Dalam panduan pemula ini, saya akan memandu Anda melalui instalasi Mintlify, pengaturan domain kustom, pemanfaatan penyerapan AI, integrasi server MCP, penambahan terjemahan, dan penggunaan OpenAPI untuk dokumen API. Baik Anda seorang developer atau pemimpin tim, Anda akan segera menghasilkan dokumen tingkat profesional. Siap membuat dokumentasi menjadi menyenangkan? Mari kita mulai!

💡

Sebelum kita mulai, jika Anda ingin merampingkan pengembangan API Anda, Apidog menawarkan platform lengkap untuk mendesain, menguji, dan mendokumentasikan API. Dengan antarmuka yang intuitif dan fitur yang tangguh, ini sempurna untuk pemula maupun developer berpengalaman. Yang terbaik, Anda bisa memulai secara gratis! (apidog)

button

Apa Itu Mintlify? Kekuatan Super Dokumen Anda

Mintlify adalah platform dokumentasi modern yang membantu developer membuat dokumen yang indah, interaktif, dan ramah SEO dengan sedikit kerepotan. Dibangun untuk tim dan proyek sumber terbuka, platform ini merender file Markdown dan MDX menjadi halaman responsif, mendukung integrasi GitHub, dan memiliki fitur berbasis AI seperti pembuatan kode dan terjemahan. Keunggulan utama meliputi:

Editor WYSIWYG: Edit dokumen di antarmuka berbasis browser.
Komponen Interaktif: Tambahkan tab, cuplikan kode, dan playground API.
Optimasi AI: Tingkatkan pencarian dan aksesibilitas dengan penyerapan AI.
Dapat Disesuaikan: Sesuaikan tema, font, dan navigasi melalui file docs.json.

Dengan alur kerja seret dan lepas serta tingkat konversi pengguna 40% lebih tinggi, Mintlify sempurna untuk startup atau proyek publik. Mari kita siapkan

Menginstal dan Menyiapkan Mintlify

Memulai dengan Mintlify sangat mudah, dan Anda akan memerlukan Node.js, CLI Mintlify, dan akun GitHub. Berikut cara memulainya, berdasarkan panduan resmi.

1. Instal Prasyarat:

Node.js: Unduh versi 16.6 atau lebih tinggi dari https://nodejs.org/. Verifikasi dengan node -v.
Akun GitHub: Daftar di github.com jika Anda belum punya.
VS Code: Opsional tetapi direkomendasikan untuk mengedit. Dapatkan dari code.visualstudio.com.

2. Kloning Starter Kit:

Di terminal Anda, kloning Starter Kit Mintlify:

git clone https://github.com/mintlify/starter-kit
cd starter-kit

Ini membuat proyek dengan folder docs yang berisi file MDX dan file docs.json untuk pengaturan.

3. Instal Mintlify CLI:

Instal CLI secara global:

npm install -g mintlify-cli

Verifikasi dengan mintlify-cli --version (misalnya, mintlify-cli version 3.1.25).

4. Jalankan Pratinjau Lokal:

Di folder starter, mulai server pengembangan:

mintlify-cli dev

Ini membuka pratinjau di http://127.0.0.1:3000. Jika port 3000 sibuk, ia mencoba 3001 atau gunakan --port 3333 untuk menyesuaikan (misalnya, mintlify-cli dev --port=3333).

5. Edit Dokumen Anda:

Buka proyek di VS Code (code .).
Navigasi ke docs/introduction.mdx dan ubah bidang "title" menjadi "Selamat Datang di Dokumen Saya!". Simpan, dan pratinjau akan langsung diperbarui.
Jelajahi docs.json untuk menyesuaikan font, warna, atau mengaktifkan mode gelap. Contoh:

{
  "name": "Dokumen Saya",
  "theme": "prism",
  "colors": { "primary": "#3498db" }
}

Periksa https://mintlify.com/docs untuk pengaturan global seperti ikon atau logo.

Saya menyiapkan ini dalam waktu kurang dari 10 menit dan memiliki situs langsung dengan penyesuaian saya—sangat lancar!

Menyiapkan Domain Kustom untuk Mintlify

Ingin dokumen Anda berada di docs.yourcompany.com alih-alih subdomain mintlify.app? Mintlify memudahkan domain kustom.

1. Akses Pengaturan:

Masuk ke Dashboard Mintlify Anda di mintlify.com.
Buka Settings > Custom Domain.

2. Tambahkan Domain Anda:

Masukkan domain Anda (misalnya, docs.yourcompany.com).
Ikuti instruksi DNS untuk penyedia Anda (misalnya, Namecheap, GoDaddy):
Tambahkan catatan CNAME: docs → cname.vercel-dns.com.
Untuk Cloudflare, aktifkan keamanan HTTPS "full strict".
Jika menggunakan Vercel, tambahkan catatan verifikasi TXT (ditampilkan di dashboard).

3. Tunggu Propagasi:

Perubahan DNS membutuhkan waktu hingga 48 jam tetapi seringkali lebih cepat. Periksa domain Anda di browser untuk konfirmasi.

Saya menyiapkan domain kustom untuk situs uji, dan itu aktif dalam beberapa jam—nuansa profesional sepenuhnya!

Memanfaatkan Penyerapan AI dengan Mintlify

Penyerapan AI Mintlify membuat dokumen Anda lebih pintar dan lebih mudah diakses, memungkinkan pengguna mencari konten melalui kueri bertenaga AI.

1. Aktifkan Penyerapan AI:

Di Dashboard Mintlify, buka Products > AI Chat.
Aktifkan penyerapan AI. Ini mengindeks dokumen Anda untuk pencarian AI tanpa pengaturan tambahan.
Mintlify secara otomatis menghasilkan sitemap /llms.txt untuk LLM mengindeks konten Anda secara efisien.

2. Uji Pencarian AI:

Di dokumen live Anda, gunakan bilah pencarian atau Obrolan AI (jika diaktifkan melalui docs.json).
Tanya: "Bagaimana cara mengautentikasi dengan API?" AI menarik bagian yang relevan, seperti halaman autentikasi Anda.

3. Tingkatkan dengan Perbaikan AI:

Di editor web, AI menyarankan perbaikan sintaks untuk kesalahan MDX (misalnya, komponen yang salah format). Aktifkan ini di Settings > Editor.

Saya mencoba pencarian AI di situs sampel, dan itu menemukan dokumen API saya secara instan—jauh lebih cepat daripada penjelajahan manual!

Mengintegrasikan Server MCP dengan Mintlify

Model Context Protocol (MCP) memungkinkan aplikasi AI berinteraksi dengan dokumen atau API Anda. Mintlify menghasilkan server MCP untuk menjembatani konten Anda dengan LLM.

1. Instal MCP CLI:

Jalankan:

npm i @mintlify/mcp

Di Dashboard Mintlify, buka Products > MCP Server untuk mendapatkan perintah instal unik Anda.

2. Konfigurasi Server MCP:

Temukan External Admin Key dan Chat API Key Anda di Settings > API Keys.
Jalankan perintah CLI dari dashboard, masukkan kunci saat diminta.
Aktifkan OpenAPI Access untuk menyertakan endpoint API (memerlukan spesifikasi OpenAPI).

3. Gunakan Server MCP:

CLI mengeluarkan perintah untuk memulai server Anda (misalnya, npm --prefix ~/.mcp/mintlify start).
Uji dengan klien MCP seperti Windsurf, kueri: "Cari dokumen saya untuk autentikasi API." Server mengembalikan hasil terstruktur.

Menginstal Server MCP Mintlify Secara Lokal

Untuk menjalankan server MCP Mintlify di mesin Anda:

Jalankan:

npx @mintlify/mcp add mintlify

Lewati prompt token bearer dengan menekan Enter.
Pilih klien MCP Anda (misalnya, Claude Desktop, Windsurf) yang diinstal secara lokal.
Server menginstal dan mengonfigurasi untuk klien pilihan Anda.

Contoh: Saya menggunakan Windsurf, dan terminal memberi saya:

node C:\User\Me.mcp\mintlify\src\index.js

Jalankan perintah ini, klik ikon alat di klien Anda, dan verifikasi bahwa server tersedia.
Atau, di Dashboard Mintlify, buka MCP Server untuk menemukan perintah untuk menambahkan server ke klien MCP Anda (misalnya, Apple DB).

Contoh Prompt (di Windsurf):

Tulis dokumen bantuan tentang fitur ini berdasarkan PRD ini, dengan gaya dan nada dokumen AppleDB.

Atau, untuk format yang kompatibel dengan Mintlify:

Tulis ini dalam markdown menggunakan komponen Mintlify seperti anchor.

Salin output dari klien mcp Anda (misalnya windsurf atau claude desktop), tempelkan ke editor web Mintlify, beralih ke mode visual, dan pratinjau!

Saya menyiapkan server MCP, dan itu memungkinkan asisten AI saya mengueri dokumen saya seperti profesional—hal futuristik!

Menambahkan Terjemahan ke Dokumen Mintlify

Ingin dokumen Anda dalam berbagai bahasa? Terjemahan bertenaga AI Mintlify membuat lokalisasi menjadi mudah.

1. Aktifkan Terjemahan:

Di Dashboard Mintlify, buka Settings > Translations.
Tambahkan lokal (misalnya, es untuk Spanyol) dan pilih versi yang akan diterjemahkan.
Mintlify secara otomatis menerjemahkan dokumen Anda, menyinkronkan pembaruan dengan versi utama.

2. Sesuaikan Terjemahan:

Edit file MDX yang diterjemahkan di folder lokal repo Anda (misalnya, docs/es/).
Konten tetap seperti "Apakah halaman ini membantu?" beradaptasi dengan lokal secara otomatis.

3. Uji Terjemahan:

Di dokumen live Anda, beralih lokal melalui dropdown versi (dikonfigurasi di docs.json).

Periksa apakah judul dan konten mencerminkan bahasa target (misalnya, "¡Bienvenidos!" untuk Spanyol).

Saya menambahkan terjemahan Spanyol, dan dokumen saya siap global dalam hitungan menit—kemenangan besar untuk aksesibilitas!

Menggunakan Mintlify dengan VS Code

Mendokumentasikan kode di VS Code? Ekstensi Mintlify membuatnya mudah!

1. Instal Ekstensi Mintlify:

Buka Marketplace Ekstensi VS Code.
Cari "Mintlify" dan klik Install.

2. Hasilkan Dokumentasi:

Sorot kode yang ingin Anda dokumentasikan.
Klik ikon Mintlify di bilah sisi dan pilih Generate Docs, atau gunakan pintasan Ctrl + ..
Mintlify menulis dokumentasi secara otomatis.

Contoh Kode:

test("@e2e wait for api response", async ({ page }) => {
  const sidemenuPage = new SideMenuPage(page);
  await sidemenuPage.interceptApiLink.click();
  const response = await page.waitForResponse((response) =>
    response.url().includes("/comments")
  );
  expect(response.status()).toBe(200);
  await page.getByText("CREATE post").isVisible();
});

Dokumentasi yang Dihasilkan:

Blok kode adalah kasus uji yang memeriksa apakah respons API diterima dengan sukses.

Saya mendokumentasikan skrip uji, dan Mintlify berhasil mendeskripsikannya—tanpa usaha!

Menjelajahi Fitur Mintlify

Mintlify dilengkapi dengan alat untuk membuat dokumen Anda bersinar. Berikut cara meningkatkannya:

Editor Web: Edit dokumen di browser melalui Dashboard > Editor. Ketik / untuk komponen seperti tab atau callout.
Tema dan Gaya: Sesuaikan warna, font, atau logo di docs.json. Coba tema seperti prism atau default.
Integrasi GitHub: Instal Aplikasi GitHub Mintlify untuk menyebarkan perubahan secara otomatis. Periksa dashboard untuk pengaturan.
Analitik: Lacak keterlibatan pengguna di Dashboard > Analytics untuk melihat halaman populer atau penurunan.
Komponen: Tambahkan akordeon, grup kode, atau diagram Mermaid melalui MDX. Lihat https://mintlify.com/docs untuk contoh.

Saya menyesuaikan tema saya dan menambahkan tab, membuat dokumen saya terlihat seperti desain profesional dalam waktu kurang dari satu jam!

Mengakhiri: Perjalanan Mintlify Anda Dimulai

Kerja bagus—Anda telah membuka kekuatan Mintlify untuk membuat dokumentasi yang menakjubkan dan siap AI! Mulai dari menginstal CLI hingga menyiapkan domain kustom, penyerapan AI, server MCP, terjemahan, dan playground OpenAPI, Anda siap membangun dokumen yang memukau pengguna. Eksperimen dengan komponen baru, tambahkan lebih banyak bahasa, atau dokumentasikan API Anda dengan APIdog! Selamat mendokumentasikan!

button