Studio Konten

Konten TikTok, tinggal klik.

Dashboard yang dipasang sendiri untuk membuat konten TikTok sebuah brand, dari ide sampai video jadi.
AI menulis ide dan caption; Claude Code menulis naskah, membuat suara, menyusun scene di Remotion, merender, lalu memeriksa hasilnya.

📦 Instalasi   ·   🧭 Cara pakai   ·   🏗️ Arsitektur   ·   🎨 Brand sendiri

Bank ide	Dapur Claude Code
Video & QA otomatis	Sistem sampul

_{Tangkapan layar dengan brand contoh fiktif CONTOH FIBER dan data contoh. Sampul dirender dari template bawaan; tempat karakter host masih kosong karena gambar karakter dibuat per brand.}

English summary

Studio Konten is a self-hosted dashboard that turns content ideas into finished vertical TikTok/Reels/Shorts videos (and 16:9 YouTube versions) for a brand. It generates ideas and captions with an LLM, then hands each video to Claude Code, which writes the script, records narration with Gemini TTS, builds motion-graphics scenes in Remotion (anime host characters, word-level subtitles, 3D scenes, sound effects), renders at 60 fps and runs automatic QA. It can also draw the brand's anime characters (DashScope Qwen-Image), edit uploaded footage with local Whisper subtitles, send videos to TikTok and track comments. Everything brand-specific lives in one folder (brand/), with a fictional example brand included. The UI, prompts and docs are in Indonesian. MIT licensed.

Fitur

• Bank ide: generate 1–10 ide sekaligus lewat router LLM (OpenAI-compatible) atau Anthropic API, dengan pilar konten dan bentuk yang bergiliran (tutorial, mitos vs fakta, perbandingan, kuis, dan lain-lain). Ide yang butuh data terbaru diberi label perlu riset. Caption 2–4 baris dengan tepat 5 hashtag.
• Video otomatis: satu klik mengantrikan job Claude Code yang menulis naskah, membuat suara narasi (Gemini TTS, satu request per suara), menyusun scene motion graphics di Remotion, lalu merender 60 fps ke MP4 9:16. Permintaan revisi melanjutkan sesi Claude Code yang membuat video itu.
• Versi YouTube 16:9 dari narasi yang sama, tanpa membuat suara baru.
• Isi video: karakter anime host dengan animasi mulut, subtitle per kata, ikon dan grafik bergerak, adegan 3D (React Three Fiber), transisi, dan efek suara. Keras suara dinormalkan ke −14 LUFS.
• QA otomatis (npm run qa): hook ≤ 2 detik, tempo bicara, durasi, ritme visual, gerak halus, karakter terpotong, frame 0, sampul, font dan warna brand, keras suara. Hasilnya tampil sebagai badge di kartu video.
• Sistem sampul: sampul dengan susunan tetap per mode (Hitungan, Tips, Aman, Brand), dan pratinjau grid profil sebelum upload.
• Gambar karakter AI (DashScope Qwen-Image): karakter brand dalam 17 pose, variasi pose, gambar bebas dengan latar transparan, dan tiga frame mulut untuk animasi bicara.
• Edit video dari rekaman sendiri: potong jeda, subtitle per kata dari Whisper lokal (whisper.cpp), judul hook, ikon, ajakan follow, zoom halus.
• TikTok: kirim ke draf/inbox lewat Content Posting API, pantau komentar video yang sudah tayang, dan jadikan komentar sebagai ide video balasan.
• Bisa dibuka dari HP di WiFi yang sama, dengan PIN.
• Brand bisa diganti: nama, akun, karakter, suara, profil, logo, dan aturan tambahan ada di satu folder brand/. Repo membawa brand contoh fiktif.

Penjelasan tiap halaman dashboard ada di docs/cara-pakai.md.

Struktur

Studio-Konten/
├── studio/                 Dashboard: server Express 5 + SQLite, web React (Vite)
├── skill/video-tiktok/     Skill Claude Code: gaya, langkah kerja, QA, template Remotion
├── scripts/                Skrip bersama: proyek baru, suara, cek, render, QA, komentar
├── brand.example/          Brand contoh fiktif; salin ke brand/ untuk brand sendiri
├── docs/                   Dokumentasi
├── package.json            Dependensi bersama proyek video (Remotion, React, Three.js)
└── Studio Konten.command   Launcher macOS (klik dua kali)

Folder yang dibuat saat dipakai tidak ikut git: brand/, studio/data/ (database, PIN, token), media/, output/ (semua MP4), dan satu folder per proyek video. .gitignore memakai daftar putih, jadi file baru di akar repo hanya ikut kalau didaftarkan.

Menjalankan untuk pengembangan

Butuh Node.js 22.5 ke atas (disarankan 24), Claude Code yang sudah login, dan key Gemini dari Google AI Studio. Sudah diuji di macOS.

git clone https://github.com/Masamune21-dev/Studio-Konten.git
cd Studio-Konten
npm install

Dashboard punya dependensinya sendiri dan perlu dibangun sekali:

cd studio && npm install && npx vite build && cd ..

Pasang skill untuk Claude Code sebagai symlink, supaya selalu ikut versi repo:

mkdir -p ~/.claude/skills && ln -s "$PWD/skill/video-tiktok" ~/.claude/skills/video-tiktok

Isi kunci API (minimal GEMINI_API_KEY dan router LLM), lalu siapkan brand:

cp .env.example .env
cp -R brand.example brand

Nyalakan server (port 4321, atau PORT=…), lalu buka http://localhost:4321:

cd studio && npm start

Di macOS cukup klik dua kali Studio Konten.command; launcher membangun ulang dashboard kalau sumbernya berubah dan membuka browser. Untuk mengubah tampilan dengan hot reload, jalankan npm run dev di studio/ selagi server menyala. Setelah itu buka Pengaturan untuk mengecek key Gemini, menjalankan Tes koneksi Claude Code, dan memilih model AI. Langkah lengkap dan troubleshooting ada di docs/instalasi.md.

Tanpa dashboard

Semua langkah video juga bisa dijalankan dari Terminal:

node scripts/new-project.mjs nama-topik
cd nama-topik
npm run studio

Di folder proyek ada npm run vo (suara), npm run check (cek potongan suara), npm run render (MP4 ke output/), npm run qa, dan npm run render:yt (versi YouTube). Bisa juga langsung minta ke Claude Code: "buatkan video TikTok tentang …", dan skill video-tiktok terpakai otomatis.

Catatan

• Job video menjalankan Claude Code tanpa ditunggui dengan izin bawaan bypassPermissions, jadi job bisa menjalankan perintah apa pun di komputer itu. Kirim brief hanya dari sumber yang dipercaya.
• Login dari HP memakai PIN 6 digit di studio/data/pin.txt. Cocok untuk WiFi rumah atau kantor sendiri; jangan buka Studio ke jaringan publik.
• Key router, Anthropic, dan Client Secret TikTok hanya bisa ditulis dari dashboard dan tidak pernah dikirim balik ke browser. Key Anthropic sengaja tidak disimpan di .env, supaya Claude Code tetap memakai langganan Claude, bukan API berbayar.
• Kuota gratis Gemini TTS terbatas (±10 request per hari per model per project Google); satu video memakai satu request per suara.
• Kirim ke TikTok butuh aplikasi di TikTok for Developers dan halaman callback di domain https. Template halamannya ada di studio/public-pages/.
• 18 efek suara rekaman Mixkit tidak ikut repo karena lisensinya melarang diedarkan ulang; 26 efek suara sintetis dibuat otomatis oleh scripts/sfx.mjs.
• Pertanyaan dan masukan lewat Issues.

Lisensi

Kode Studio Konten berlisensi MIT © 2026 Masamune21-dev: boleh dipakai, diubah, dan dibagikan ulang, asal pemberitahuan hak cipta dan teks lisensinya tetap disertakan.

Bagian pihak ketiga mengikuti lisensinya masing-masing:

• Remotion gratis untuk perorangan, organisasi nirlaba, dan perusahaan sampai 3 karyawan; perusahaan yang lebih besar butuh lisensi perusahaan dari Remotion.
• Logo platform di brandIcons.ts berasal dari Simple Icons (CC0) dan tetap merek dagang pemiliknya.
• Huruf Bricolage Grotesque, Instrument Serif, Space Grotesk, dan lainnya dari Google Fonts (SIL Open Font License).
• Paket npm mengikuti lisensi di package.json-nya.