Skip to main content

Cara Menggunakan Felo Slides dengan Claude Code dan Agen AI

· 12 menit dibaca
Felo Search Tips Buddy
Committed to answers at your fingertips

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 PenggunaanAlat
Slide cepat dari terminalfelo-slides CLI
Pembuatan percakapan di editorClaude Code Skill
Alur kerja berbasis agenOpenClaw Skill
Backend / CI / pekerjaan batchFelo Slides API

Instalasi dan Penyiapan

Prasyarat

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:

  1. Menyusun kerangka dan mengonfirmasi struktur denganmu
  2. Menghasilkan isi slide menggunakan API Felo Slides
  3. Menyimpan file .felo ke direktori proyekmu
  4. 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:

  1. Dapatkan kunci APIslides.felo.ai/settings/api
  2. Instal CLInpm install -g felo-slides
  3. Atur kuncimuexport FELO_SLIDES_API_KEY=fsk_...
  4. Buat dek pertamamufelo-slides "Your topic here"
  5. Tambahkan ke Claude Codeclaude skill add felo-slides
  6. 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.