WP Content Architect

Aplikasi ini memakai Next.js App Router sebagai UI dan API gateway. Browser hanya mengirim prompt dan konfigurasi yang dibutuhkan, lalu server route menangani komunikasi ke OpenRouter, Pexels, dan WordPress REST API.

• OpenRouter dipakai untuk membuat judul, konten Markdown, dan placeholder gambar kontekstual.
• Pexels dipakai untuk mencari foto berdasarkan query gambar dari AI, bukan gambar acak.
• WordPress REST API dipakai untuk membuat draft, mengunggah media, memperbarui konten, dan memasang featured image.

Gunakan npm karena repository ini memiliki `package-lock.json`. Install dependency dari lockfile agar versi lokal konsisten.

npm ci
cp .env.local.example .env.local
npm run dev

Untuk validasi sebelum deploy atau review, jalankan check berikut.

npm run lint
npx tsc --noEmit
npm run build

Simpan secret di `.env.local` untuk development dan environment variable platform untuk production. Form konfigurasi di browser hanya dipakai sebagai override cepat.

OPENROUTER_API_KEY=sk-or-...
OPENROUTER_MODEL=google/gemini-2.0-flash-exp:free
OPENROUTER_SITE_URL=http://localhost:3000
OPENROUTER_APP_TITLE=WP Content Architect

WORDPRESS_BASE_URL=https://your-wordpress-site.com
WORDPRESS_USERNAME=your-wp-username
WORDPRESS_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx

PEXELS_API_KEY=your-pexels-api-key

• Jangan commit `.env.local` atau credential production.
• Gunakan `WORDPRESS_BASE_URL` tanpa `/wp-json` karena aplikasi menambahkan path REST API sendiri.
• Gunakan `OPENROUTER_SITE_URL` sesuai domain aplikasi saat production.

• REST API WordPress aktif dan bisa diakses dari server aplikasi.
• User WordPress memiliki capability untuk `edit_posts`, `publish_posts` jika diperlukan, dan `upload_files`.
• Application Password dibuat dari user yang sama dengan `WORDPRESS_USERNAME`.
• Permalink tidak memakai mode Plain.
• Folder `wp-content/uploads` bisa ditulis oleh WordPress.

Validasi credential WordPress dari terminal dengan command berikut.

curl -u "USERNAME:APP_PASSWORD" \
  "https://your-wordpress-site.com/wp-json/wp/v2/users/me?context=edit"

Application Password harus dibuat dari user WordPress yang sama dengan nilai `WORDPRESS_USERNAME`. Jika password dibuat dari user lain, WordPress akan menolak auth atau menganggap username tidak dikenal.

• Login ke dashboard WordPress dengan user yang akan dipakai aplikasi.
• Buka menu Users, lalu Profile. Jika Anda admin dan ingin memakai user lain, buka Users, pilih user tersebut, lalu Edit.
• Catat nilai Username pada halaman profile. Nilai ini yang dipakai untuk `WORDPRESS_USERNAME`, bukan display name.
• Scroll ke bagian Application Passwords.
• Isi nama aplikasi, misalnya `WP Content Architect Local`, lalu klik Add New Application Password.
• Copy password yang muncul. WordPress hanya menampilkan password ini sekali.
• Masukkan username tadi ke `WORDPRESS_USERNAME` dan password baru ke `WORDPRESS_APP_PASSWORD`.

WORDPRESS_USERNAME=username-dari-profile-wp
WORDPRESS_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx

Verifikasi dari terminal sebelum menjalankan publish flow.

curl -u "username-dari-profile-wp:xxxx xxxx xxxx xxxx xxxx xxxx" \
  "https://your-wordpress-site.com/wp-json/wp/v2/users/me?context=edit"

• Jika response berisi data user, credential sudah benar.
• Jika muncul `Nama pengguna tidak dikenal`, cek lagi nilai username atau coba alamat email user yang sama.
• Jika muncul `Application passwords are not available`, cek HTTPS, WordPress version, atau plugin/security policy yang mematikan Application Passwords.

Flow publish dibuat bertahap supaya error WordPress bisa dilacak di step yang spesifik.

• Generate artikel dari OpenRouter.
• Preflight auth ke `/wp-json/wp/v2/users/me?context=edit`.
• Create draft minimal di WordPress.
• Search foto Pexels berdasarkan query gambar dari AI.
• Upload featured image dan inline image ke WordPress Media Library.
• Update konten draft dengan HTML final.
• Set featured image setelah konten berhasil diupdate.

AI harus membuat placeholder gambar yang spesifik dalam format `[Gambar: english stock photo search query]`. Query berbahasa Inggris biasanya lebih akurat untuk provider stock photo.

[Gambar: teacher using laptop in classroom]
[Gambar: small business owner packing online orders]
[Gambar: healthy meal preparation in home kitchen]

• Gunakan 3 sampai 7 keyword visual yang konkret.
• Hindari query terlalu umum seperti `business`, `technology`, atau `success`.
• Hindari brand name, nama tokoh, dan klaim medis sensitif.
• Jika Pexels tidak menemukan hasil, proses berhenti agar draft tidak memakai gambar yang tidak relevan.

• `WordPress authentication failed` berarti username atau application password tidak cocok.
• `WordPress minimal draft creation failed` biasanya terkait role user, REST API, plugin security, atau hook WordPress saat membuat post.
• `WordPress content update failed` biasanya terkait filter konten, block editor, sanitizer, WAF, atau plugin yang memproses HTML.
• `WordPress featured image update failed` biasanya terkait media capability, attachment ID, atau plugin media.
• `Pexels image search failed` berarti API key, quota, atau koneksi ke Pexels bermasalah.

Jika WordPress menampilkan pesan fatal seperti "Ada eror serius pada situs web Anda", cek `wp-content/debug.log` atau error log hosting karena crash terjadi di sisi WordPress.

• Pakai HTTPS untuk aplikasi dan WordPress agar Basic Auth tidak lewat koneksi plain HTTP.
• Buat user WordPress khusus untuk integrasi, jangan gunakan akun administrator utama.
• Batasi role user ke permission yang benar-benar diperlukan.
• Rotasi Application Password dan API key jika pernah terekspos.
• Jangan log credential, prompt sensitif, atau data user di server log.
• Review draft AI sebelum publish live karena output AI bisa salah konteks.

Deploy production harus memakai environment variable platform, bukan value dari browser localStorage.

• Set semua env di Vercel, VPS, atau platform deploy yang dipakai.
• Jalankan `npm run build` sebelum release.
• Pastikan domain production dimasukkan ke `OPENROUTER_SITE_URL`.
• Pastikan server production bisa mengakses WordPress, OpenRouter, dan Pexels.
• Pantau response `/api/wordpress` setelah deploy pertama.

• Config section bisa membaca env server atau override dari form browser.
• Tombol show or hide secret berfungsi untuk WP Application Password, OpenRouter, dan Pexels.
• Prompt valid menghasilkan title dan preview konten.
• Draft minimal berhasil dibuat di WordPress.
• Gambar featured dan inline relevan dengan konteks artikel.
• Error WordPress tampil dengan step yang jelas.
• Draft akhir tetap berstatus draft, bukan publish otomatis.