Cara Menggunakan Felo Slides dengan Claude Code dan Agen AI
Bangun slide bertenaga AI langsung dari terminal menggunakan Felo Slides dengan Claude Code, OpenClaw, dan paket npm felo-slides. Panduan pengembang untuk pembuatan slide secara terprogram.
$ npx felo-slides "Explain Kubernetes pod scheduling in 8 slides"
✓ Menganalisis topik...
✓ Membuat kerangka (8 slide)...
✓ Membuat isi slide...
✓ Membangun presentasi...
✔ Selesai → kubernetes-pod-scheduling.felo
Itu saja. Tanpa browser. Tanpa drag-and-drop. Tanpa pemilih templat. Kamu hanya mengetik satu perintah, dan delapan slide muncul.
Jika kamu pernah menghadiri rapat 40 menit yang seharusnya hanya berupa dek slide, kamu sudah tahu mengapa kami membuat Felo Slides. Tapi tulisan ini bukan tentang aplikasi webnya — ini tentang apa yang terjadi ketika kamu memberi pengembang sebuah API dan memintanya mengotomatiskan segalanya.
Berikut cara menggunakan Felo Slides dengan Claude Code, agen OpenClaw, dan skrip kamu sendiri untuk membuat slide AI tanpa meninggalkan terminal.
[IMG: Tangkapan layar terminal yang menunjukkan CLI felo-slides menghasilkan presentasi dari satu perintah, dengan file keluaran disorot]
Apa Itu Felo Slides (untuk Pengembang)?
Felo Slides adalah mesin presentasi bertenaga AI. Kebanyakan orang mengenalnya sebagai aplikasi web di slides.felo.ai. Di balik layar, ia juga merupakan:
- Paket npm
felo-slides— CLI dan perpustakaan untuk membuat slide secara terprogram - Claude Code Skill — skill bawaan yang memungkinkan Claude Code membuat presentasi secara langsung
- OpenClaw Skill — konsep serupa, terhubung ke kerangka kerja agen OpenClaw
- REST API — endpoint HTTP untuk pembuatan slide, analisis topik, dan perenderan templat
Aplikasi webnya adalah antarmuka yang mengilap. Alat pengembangnya adalah mesinnya. Kamu bisa mencampuradukkan penggunaannya: gunakan CLI untuk pembuatan lokal cepat, API untuk otomatisasi sisi server, atau skill Claude Code untuk pembuatan slide secara percakapan.
Kapan menggunakan yang mana:
| Kasus Penggunaan | Alat |
|---|---|
| Slide cepat dari terminal | felo-slides CLI |
| Pembuatan percakapan di editor | Claude Code Skill |
| Alur kerja berbasis agen | OpenClaw Skill |
| Backend / CI / pekerjaan batch | Felo Slides API |
Instalasi dan Penyiapan
Prasyarat
- Node.js 18+ (disarankan 20+)
- Akun Felo dengan akses API (tingkat gratis berfungsi)
- Kunci API dari slides.felo.ai/settings/api
Pasang Paket npm
npm install -g felo-slides
Atau gunakan tanpa menginstal:
npx felo-slides "Your presentation topic here"
Otentikasi
Atur kunci API kamu sebagai variabel lingkungan:
export FELO_SLIDES_API_KEY=fsk_your_api_key_here
Atau buat .felo-slides.json di root proyekmu:
{
"apiKey": "fsk_your_api_key_here",
"defaultOutput": "./presentations",
"template": "developer-dark"
}
Verifikasi
$ felo-slides --version
felo-slides 2.4.0
$ felo-slides --check
✓ Kunci API valid
✓ Batas permintaan: 47/50 permintaan tersisa
✓ Template dimuat: 12
[IMG: Perbandingan output terminal yang menunjukkan penyiapan berhasil vs kesalahan autentikasi umum]
Menggunakan Felo Slides dengan Claude Code
Di sinilah hal-hal menjadi menarik. Skill Claude Code mengubah editor Claude menjadi pabrik slide. Alih-alih menulis prompt dan menyalin hasil, Claude membuat, mengedit, dan mengekspor presentasi secara langsung.
Instal Skill Claude Code
# Di direktori proyek Claude Code kamu
claude skill add felo-slides
Ini mendaftarkan skill Felo Slides ke Claude Code. Claude kini tahu cara membuat presentasi, dan memiliki akses penuh ke API felo-slides.
Penggunaan Dasar di Claude Code
Setelah terinstal, cukup minta Claude secara alami:
> Buat dek 10 slide tentang peta jalan rekayasa Q3 kami.
Sertakan bagian: migrasi platform, rencana perekrutan,
dan anggaran infrastruktur.
Claude akan:
- Menyusun kerangka dan mengonfirmasi struktur denganmu
- Menghasilkan isi slide menggunakan API Felo Slides
- Menyimpan file
.feloke direktori proyekmu - Menawarkan untuk mengulang pada slide tertentu
Tanpa berpindah konteks. Tanpa salin-tempel. Slide hidup di repositorimu bersama kodenya.
Tingkat Lanjut: Template Kustom di Claude Code
Kamu dapat mendefinisikan template slide khusus proyek yang akan digunakan Claude secara otomatis:
mkdir -p .felo/templates
Buat .felo/templates/engineering.json:
{
"name": "Engineering Update",
"theme": "dark",
"accent": "#6366f1",
"fonts": {
"heading": "JetBrains Mono",
"body": "Inter"
},
"layout": {
"titleSlide": "code-hero",
"contentSlide": "split-left",
"closingSlide": "cta-minimal"
}
}
Lalu di Claude Code:
> Buat dek tentang migrasi layanan otentikasi.
Gunakan template engineering.
Claude akan otomatis mengambil template dan menerapkannya pada setiap slide yang dihasilkan.
[IMG: Editor Claude Code menampilkan percakapan di mana pengguna meminta dek slide, Claude membuat kerangka, dan file .felo muncul di pohon file]
Mengedit Slide Secara Percakapan
Kekuatan utama integrasi Claude Code adalah pengeditan iteratif:
> Slide 3 terlalu padat. Bagi menjadi dua slide.
Pindahkan diagram arsitektur ke slide 4.
> Tambahkan catatan pembicara pada slide 5–7.
Batasi di bawah 50 kata per slide.
> Ubah warna aksen ke hijau merek kami (#10b981)
dan tambahkan logo kami ke slide judul.
Setiap edit adalah panggilan API di balik layar, tapi kamu tidak pernah melihat permintaan HTTP-nya. Claude menangani semuanya.
Menggunakan Felo Slides dengan OpenClaw
OpenClaw membawa pendekatan berbasis agen lebih jauh lagi. Skill Felo Slides OpenClaw memungkinkan agen AI membuat slide sebagai bagian dari alur kerja yang lebih besar — bukan hanya berdasarkan perintah langsung.
Penyiapan
openclaw skill install felo-slides
Konfigurasikan di ruang kerja OpenClaw kamu:
# openclaw.yaml
skills:
felo-slides:
apiKey: "${FELO_SLIDES_API_KEY}"
defaultTemplate: "professional"
outputDir: "./output/slides"
Pembuatan Slide berbasis Agen
Dengan OpenClaw, kamu dapat memicu pembuatan slide dari alur kerja agen:
User: Kami baru saja menutup kesepakatan Acme. Siapkan dek kickoff
untuk tim engineering. Gunakan brief proyek dari
Notion dan timeline dari Linear.
Agent: [membaca brief Notion]
[mengambil timeline Linear]
[menghasilkan dek kickoff 12 slide via felo-slides]
[menyimpan ke output/slides/acme-kickoff.felo]
"Selesai. Dibuat dek 12 slide yang mencakup ruang lingkup,
timeline, penugasan tim, dan tonggak.
Ingin saya kirim ke #eng-general?"
Agen mengambil konteks dari dua alat eksternal, menyusunnya menjadi presentasi, dan menghasilkan slide — semuanya dalam satu langkah.
[IMG: Diagram alur kerja agen OpenClaw: permintaan pengguna → pengumpulan konteks (Notion, Linear) → API felo-slides → file keluaran → pengiriman]
Contoh Perintah Terminal
Mari kita lihat CLI lebih detail. Contoh ini mencakup alur kerja pengembang paling umum.
Hasilkan dari Topik
felo-slides "Microservices vs monoliths: a pragmatic guide" --slides 12
Hasilkan dari File Markdown
felo-slides --from ./meeting-notes.md --template "standup"
CLI mem-parsing markdownmu, mendeteksi heading dan bullet point, lalu memetakkannya ke slide secara otomatis.
Hasilkan dari URL
felo-slides --from-url https://github.com/org/repo/blob/main/README.md
Berguna untuk mengubah dokumentasi, postingan blog, atau RFC menjadi presentasi.
Pembuatan Massal
# Buat slide untuk beberapa topik
felo-slides batch --file topics.txt --output ./deck-batch/
Di mana topics.txt berisi satu topik per baris:
Q4 OKR Review
New Hire Onboarding: Backend
Incident Postmortem: 2026-05-12 Outage
Architecture Decision Record: Event Sourcing
Format Ekspor
# Ekspor ke PDF
felo-slides export ./output.felo --format pdf
# Ekspor ke PPTX
felo-slides export ./output.felo --format pptx
# Ekspor ke gambar (satu PNG per slide)
felo-slides export ./output.felo --format png --dpi 300
Integrasi CI/CD
# .github/workflows/weekly-deck.yml
name: Generate Weekly Update Deck
on:
schedule:
- cron: '0 9 * * 1' # Setiap Senin jam 9 pagi
jobs:
generate:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npx felo-slides "Weekly engineering update for ${{ github.run_id }}" --template weekly --output ./decks/
- uses: actions/upload-artifact@v4
with:
name: weekly-deck
path: ./decks/
[IMG: Log GitHub Actions menunjukkan langkah felo-slides berhasil diselesaikan, dengan dek yang dihasilkan tercantum di bawah Artifacts]
Contoh Alur Otomasi
Berikut tiga alur nyata di mana Felo Slides menghemat banyak waktu.
1. Bot Persiapan Pra-Rapat
Bot Slack yang menghasilkan dek awal sebelum setiap rapat berulang:
import { FeloSlides } from 'felo-slides';
import { getMeetingContext } from './calendar-integration';
const slides = new FeloSlides({ apiKey: process.env.FELO_SLIDES_API_KEY });
export async function prepareMeetingDeck(meetingId: string) {
const context = await getMeetingContext(meetingId);
const deck = await slides.generate({
topic: context.title,
slides: 8,
context: [
`Peserta: ${context.attendees.join(', ')}`,
`Tindakan sebelumnya: ${context.lastActions.join('; ')}`,
`Agenda: ${context.agenda.join(', ')}`,
],
template: 'standup',
});
await slides.export(deck.id, { format: 'pdf' });
await postToSlack(context.channel, {
text: `📊 Dek awal untuk ${context.title}`,
files: [{ file: deck.exportPath, filename: `${context.title}.pdf` }],
});
}
2. Pipeline Dokumentasi → Presentasi
Secara otomatis mengubah RFC atau dokumen desain baru menjadi draf presentasi:
#!/bin/bash
# hooks/post-commit-slides.sh
# Deteksi file .md baru di /docs/rfcs
CHANGED_FILES=$(git diff --name-only HEAD~1 HEAD -- 'docs/rfcs/*.md')
for file in $CHANGED_FILES; do
TITLE=$(head -1 "$file" | sed 's/^# //')
OUTPUT="./presentations/$(basename "$file" .md).felo"
npx felo-slides --from "$file" --template "rfc" --output "$OUTPUT"
echo "Dibuat slide untuk: $TITLE → $OUTPUT"
done
Sambungkan ini sebagai hook git atau langkah CI, dan setiap RFC baru akan otomatis mendapat dek slide pendamping.
3. Pemanfaatan Ulang Konten Multi-Format
Ubah satu konten menjadi posting blog, dek slide, dan thread media sosial:
import { FeloSlides } from 'felo-slides';
import { generateBlog } from './blog-generator';
import { generateSocialThread } from './social-generator';
async function repurposeContent(sourceUrl: string) {
// Ambil dan analisis konten sumber
const content = await fetchAndParse(sourceUrl);
// Hasilkan ketiga format secara paralel
const [blog, deck, thread] = await Promise.all([
generateBlog(content, { words: 2000 }),
new FeloSlides().generate({
topic: content.title,
slides: 10,
context: content.summary,
}),
generateSocialThread(content, { posts: 8 }),
]);
return { blog, deck, thread };
}
Satu sumber, tiga keluaran. Dek slide bukan pelengkap — ia dihasilkan dengan kecerdasan konten yang sama seperti posting blog.
[IMG: Diagram alir menunjukkan satu sumber konten bercabang menjadi tiga keluaran: posting blog, dek slide, dan thread media sosial]
Referensi API
Untuk tim yang membangun integrasi kustom, API Felo Slides menyediakan tiga endpoint utama.
Otentikasi
Semua permintaan memerlukan kunci API di header:
Authorization: Bearer fsk_your_api_key_here
POST /v1/slides/generate
Buat presentasi baru.
curl -X POST https://api.slides.felo.ai/v1/slides/generate \
-H "Authorization: Bearer fsk_your_api_key_here" \
-H "Content-Type: application/json" \
-d '{
"topic": "Introduction to WebAssembly",
"slideCount": 10,
"template": "developer-dark",
"context": [
"Audience: senior backend engineers",
"Focus on practical use cases, not theory",
"Include performance comparison with Docker"
],
"language": "en"
}'
Respon:
{
"id": "deck_abc123",
"status": "processing",
"estimatedSeconds": 15,
"slides": 10,
"pollUrl": "/v1/slides/deck_abc123"
}
GET /v1/slides/{id}
Periksa status dan ambil dek yang sudah selesai.
curl https://api.slides.felo.ai/v1/slides/deck_abc123 \
-H "Authorization: Bearer fsk_your_api_key_here"
Respon (jika sudah selesai):
{
"id": "deck_abc123",
"status": "complete",
"slides": [
{
"number": 1,
"title": "What Is WebAssembly?",
"content": "...",
"notes": "..."
}
],
"downloadUrls": {
"felo": "https://api.slides.felo.ai/v1/slides/deck_abc123/download?felo",
"pdf": "https://api.slides.felo.ai/v1/slides/deck_abc123/download?pdf",
"pptx": "https://api.slides.felo.ai/v1/slides/deck_abc123/download?pptx"
}
}
POST /v1/slides/{id}/edit
Modifikasi dek yang ada secara terprogram.
curl -X POST https://api.slides.felo.ai/v1/slides/deck_abc123/edit \
-H "Authorization: Bearer fsk_your_api_key_here" \
-H "Content-Type: application/json" \
-d '{
"actions": [
{ "type": "update", "slide": 3, "title": "WASM vs Containers: Benchmarks" },
{ "type": "insert", "after": 5, "title": "Live Demo", "content": "..." },
{ "type": "delete", "slide": 8 }
]
}'
Batas Permintaan
- Tier gratis: 50 permintaan/hari, 5 permintaan/menit
- Tier Pro: 500 permintaan/hari, 30 permintaan/menit
- Enterprise: batas kustom
CLI felo-slides dan semua SDK menangani pembatasan permintaan secara otomatis dengan backoff eksponensial.
[IMG: Tangkapan layar dokumentasi API menampilkan tiga endpoint beserta contoh permintaan dan respons]
FAQ
Bisakah saya menggunakan Felo Slides secara offline?
Langkah pembuatan memerlukan panggilan API (model AI berjalan di server). Namun, kamu bisa mengekspor dek ke PDF atau PPTX dan bekerja dengannya secara lokal setelah itu. CLI menyimpan cache 10 dek terakhir untuk tampilan offline.
Bagaimana menangani konten sensitif?
Semua permintaan API dienkripsi selama transmisi (TLS 1.3) dan disimpan aman. Konten slide tidak digunakan untuk pelatihan model. Untuk penerapan enterprise dengan persyaratan lokasi data, hubungi kami mengenai opsi on-premise.
Bisakah saya menggunakan template sendiri?
Ya. Paket npm dan API keduanya mendukung template kustom. Definisikan template sebagai file JSON (lihat bagian Claude Code di atas), lalu referensikan berdasarkan nama atau jalurnya:
felo-slides "Topic here" --template ./my-template.json
Apa format keluarannya?
Dek yang dihasilkan disimpan sebagai file .felo (format JSON terstruktur). Kamu dapat mengekspor ke PDF, PPTX, PNG, atau HTML. Format .felo dapat diedit — kamu bisa memodifikasinya secara terprogram atau mengimpornya kembali untuk pengeditan AI lebih lanjut.
Apakah skill Claude Code berfungsi dengan CLI Claude atau hanya aplikasi desktop?
Keduanya. Skill ini berfungsi dengan claude di terminal maupun aplikasi desktop Claude. Instalasinya sama.
Bisakah saya membuat slide dalam bahasa selain bahasa Inggris?
Ya. Berikan parameter language (kode ISO 639-1) ke API atau flag --lang ke CLI:
felo-slides "Kubernetes 入门指南" --lang zh
felo-slides "Introducción a WebAssembly" --lang es
AI akan membuat konten dalam bahasa yang ditentukan sambil mempertahankan istilah teknis dalam bentuk standarnya.
Apa perbedaan skill OpenClaw dan skill Claude Code?
Skill Claude Code dioptimalkan untuk penggunaan interaktif dalam editor — ia mengajukan pertanyaan klarifikasi dan beriterasi bersamamu. Skill OpenClaw dirancang untuk alur kerja agen otonom — menerima input terstruktur dan mengembalikan output tanpa interaksi dua arah. Mesin sama, model interaksi berbeda.
Mulai Bangun
Berikut daftar cepat langkah awal:
- Dapatkan kunci API → slides.felo.ai/settings/api
- Instal CLI →
npm install -g felo-slides - Atur kuncimu →
export FELO_SLIDES_API_KEY=fsk_... - Buat dek pertamamu →
felo-slides "Your topic here" - Tambahkan ke Claude Code →
claude skill add felo-slides - Otomatiskan → sambungkan API ke alur kerjamu
Felo Slides bukan bertujuan menggantikan alat desainmu. Ia ingin menghilangkan masalah “saya butuh dek cepat” — terutama saat kamu sudah bekerja di terminal, editor, atau alur kerja agen.
Slide AI yang kamu hasilkan dengan cara ini bukan draf sempurna pertama. Mereka adalah draf awal yang berguna. Jenis yang benar-benar kamu buka, ubah sebentar 10 menit, lalu kirim. Itulah standarnya.
Coba:
npx felo-slides "The talk I've been meaning to give"
→ Felo Slides · paket npm · dokumentasi API · GitHub
Tulisan ini juga tersedia dalam English, 简体中文, 日本語, 한국어, 繁體中文, हिन्दी, Français, العربية, Русский, اردو, Deutsch, Tiếng Việt, Türkçe, Italiano, ไทย, Español, বাংলা and Português.