Connector

Hubungkan aplikasimu ke layanan pihak ketiga seperti Slack, Resend, dan ElevenLabs. Kredensial dienkripsi dan action sudah terautentikasi.

Connector memungkinkan kamu mengintegrasikan layanan eksternal ke dalam aplikasi tanpa perlu mengelola API key mentah di dalam kode. Kamu cukup mengatur koneksi sekali, mengikatnya ke proyekmu, lalu memanggil action yang sudah tersedia dari aplikasimu. Kredensial dienkripsi saat tersimpan dan tidak pernah terekspos ke kode frontend-mu.

Connector yang tersedia

Connector	Kategori	Jenis autentikasi	Fungsinya
Resend	Komunikasi	API key	Kirim email transaksional, kirim email massal, tampilkan domain yang diverifikasi
Slack	Komunikasi	OAuth	Kirim pesan, tampilkan channel dan pengguna, beri reaksi pada pesan, baca thread
ElevenLabs	AI	API key	Text-to-speech, tampilkan daftar suara yang tersedia, buat efek suara

Connector baru terus ditambahkan secara rutin.

Cara kerja connector

1. Kamu membuat koneksi — masukkan kredensial (API key atau masuk melalui OAuth)
2. Kamu mengikat koneksi ke sebuah proyek — ini mengotorisasi proyek untuk menggunakan kredensial tersebut
3. Aplikasimu memanggil action — permintaan dikirim melalui Proyecta Cloud, yang menyuntikkan kredensial di sisi server

Kode aplikasimu tidak pernah menyentuh API key mentah atau token OAuth. Sistem connector menangani autentikasi, pembatasan laju (rate limiting), dan pencatatan audit.

Menyiapkan connector

1. Buka proyekmu di builder
2. Buka Settings > Connectors
3. Klik connector dari katalog (misalnya, Resend)
4. Masukkan kredensialmu:
   • Connector berbasis API key (Resend, ElevenLabs): Tempelkan secret key-mu
   • Connector berbasis OAuth (Slack): Masuk dan izinkan akses
5. Beri nama koneksi ini (misalnya, “Production Resend”)
6. Koneksi akan diuji secara otomatis dan ditandai Active jika valid

Membaca melalui connector dari aplikasimu

Aplikasimu dapat membaca API pihak ketiga langsung dari browser tanpa API key-nya pernah sampai ke bundle. Kredensial tetap terenkripsi di platform; aplikasimu hanya menyebutkan nama connector, action-nya, dan sebuah input bertipe, lalu platform yang melakukan pemanggilannya untukmu.

import { useConnectorData, useHttpRead } from '@/hooks/useConnector.ts';

// A connector's own read action, as a cached query
const { data, isLoading, error } = useConnectorData('eleven-labs', 'listVoices');

// The generic HTTP-read connector, by endpoint name
const { data: feed } = useHttpRead('news-feed', { limit: 10 });

Ada dua pagar pengaman yang perlu kamu ketahui, karena keduanya memang disengaja:

• Hanya baca. Hanya action yang sudah ditandai aman-untuk-browser oleh platform yang dapat dijangkau — selain itu akan mengembalikan 403. Operasi tulis (mengirim pesan ke Slack, mengirim email, menagih kartu) tidak pernah dapat dijangkau dari browser.
• Kamu tidak bisa meneruskan URL atau host. Untuk connector generik http-read, input-nya adalah { endpointKey, params }, dan URL di balik endpointKey dikonfigurasi olehmu sebagai pemilik aplikasi — bukan oleh kode aplikasi. Respons di-cache di sisi server dan dibatasi lajunya, karena key pihak ketiga dihitung berdasarkan kuota.

Kode 404 berarti pemiliknya belum menghubungkan connector tersebut — itulah kasus yang layak kamu tangani di UI-mu.

Biarkan AI yang mengaturnya

Kamu tidak perlu menulis kode connector secara manual. AI builder mengetahui connector mana yang terikat ke proyekmu dan dapat membuat integrasi untukmu:

• "Send a welcome email when users sign up" — menggunakan connector Resend
• "Post a Slack message when a new order comes in" — menggunakan connector Slack
• "Play audio narration on the article page" — menggunakan connector ElevenLabs

Referensi action connector

Resend (connectorId: 'resend')

Action	Efek samping	Deskripsi
sendEmail	write	Kirim satu email transaksional
sendBatch	write	Kirim beberapa email sekaligus
listDomains	read	Tampilkan domain pengirim yang diverifikasi

Slack (connectorId: 'slack')

Action	Efek samping	Deskripsi
postMessage	write	Kirim pesan ke sebuah channel
listChannels	read	Tampilkan channel di workspace
listUsers	read	Tampilkan anggota workspace
reactToMessage	write	Tambahkan reaksi emoji
getThread	read	Ambil balasan dalam sebuah thread

ElevenLabs (connectorId: 'eleven-labs')

Action	Efek samping	Deskripsi
textToSpeech	write	Ubah teks menjadi audio suara
listVoices	read	Tampilkan daftar suara yang tersedia
generateSoundEffect	write	Buat efek suara berbasis AI

Status koneksi

Status	Arti
Active	Kredensial valid dan koneksi siap digunakan
Broken	Kredensial kedaluwarsa atau dicabut — perbarui untuk memulihkan koneksi

Keamanan

• Kredensial dienkripsi dengan AES-256-GCM saat tersimpan
• Action dibatasi hingga 1.000 permintaan per menit per connector per proyek
• Setiap pemanggilan action dicatat beserta jejak audit (koneksi, action, durasi, status)
• Koneksi berlaku di seluruh workspace

FAQ

Bisakah saya menggunakan koneksi yang sama di beberapa proyek?

Bisa. Buat koneksi sekali dan ikat ke proyek mana pun dalam workspace yang sama.

Apa yang terjadi jika API key saya kedaluwarsa atau dicabut?

Status koneksi akan berubah menjadi Broken. Perbarui kredensial di Settings > Connectors untuk memulihkannya.

Bisakah saya memanggil action connector dari frontend?

Aplikasimu tidak pernah memegangnya. Action baca yang aman untuk browser diproksikan melalui Proyecta Cloud, yang menyuntikkan kredensial di sisi server, sehingga key tersebut tidak pernah ada di bundle-mu. Action tulis sama sekali tidak dapat dijangkau dari browser.

Bisakah saya menambahkan connector kustom sendiri?

Belum bisa. Definisi connector kustom ada dalam roadmap pengembangan.

Segera hadir

• Connector tambahan (Google, Twilio, SendGrid, dan lainnya)
• Definisi connector kustom — bawa API milikmu sendiri
• Webhook ingestion untuk event masuk dari layanan yang terhubung
• OAuth gateway — simpan token di sisi server bahkan untuk alur yang diinisiasi dari sisi klien