Connectors

เชื่อมต่อแอปของคุณกับบริการภายนอก เช่น Slack, Resend และ ElevenLabs ข้อมูลรับรองตัวตนถูกเข้ารหัสและ action ต่างๆ ผ่านการยืนยันตัวตนล่วงหน้าแล้ว

Connectors ช่วยให้คุณเชื่อมต่อบริการภายนอกเข้ากับแอปโดยไม่ต้องจัดการ API key แบบ raw ในโค้ด คุณตั้งค่าการเชื่อมต่อเพียงครั้งเดียว ผูกมันเข้ากับโปรเจกต์ แล้วเรียกใช้ action ที่สร้างไว้ล่วงหน้าจากแอปได้เลย ข้อมูลรับรองตัวตนถูกเข้ารหัสขณะจัดเก็บและไม่ถูกเปิดเผยไปยังโค้ด frontend ของคุณเลย

Connector ที่ใช้ได้

Connector	หมวดหมู่	ประเภทการยืนยันตัวตน	สิ่งที่ทำได้
Resend	การสื่อสาร	API key	ส่งอีเมลธุรกรรม, ส่งอีเมลเป็นชุด, แสดงรายการโดเมนที่ยืนยันแล้ว
Slack	การสื่อสาร	OAuth	โพสต์ข้อความ, แสดงรายการช่องและผู้ใช้, ตอบสนองต่อข้อความ, อ่านเธรด
ElevenLabs	AI	API key	แปลงข้อความเป็นเสียง, แสดงรายการเสียงที่มีให้ใช้, สร้างเอฟเฟกต์เสียง

มีการเพิ่ม connector ใหม่อย่างสม่ำเสมอ

Connector ทำงานอย่างไร

1. คุณสร้างการเชื่อมต่อ — ระบุข้อมูลรับรองตัวตน (API key หรือลงชื่อเข้าใช้ผ่าน OAuth)
2. คุณผูกการเชื่อมต่อ กับโปรเจกต์ — เป็นการอนุญาตให้โปรเจกต์ใช้ข้อมูลรับรองตัวตนเหล่านั้น
3. แอปของคุณเรียกใช้ action — คำร้องขอถูกส่งผ่าน Proyecta Cloud ซึ่งจะแทรกข้อมูลรับรองตัวตนฝั่ง server

โค้ดแอปของคุณไม่ต้องสัมผัส API key หรือ OAuth token แบบ raw เลย ระบบ connector จัดการการยืนยันตัวตน, rate limiting และ audit logging ให้ทั้งหมด

ตั้งค่า connector

1. เปิดโปรเจกต์ของคุณใน builder
2. ไปที่ Settings > Connectors
3. คลิก connector จากแคตตาล็อก (เช่น Resend)
4. ป้อนข้อมูลรับรองตัวตน:
   • Connector แบบ API key (Resend, ElevenLabs): วาง secret key ของคุณ
   • Connector แบบ OAuth (Slack): ลงชื่อเข้าใช้และอนุญาตการเข้าถึง
5. ตั้งชื่อให้การเชื่อมต่อ (เช่น “Production Resend”)
6. ระบบจะทดสอบการเชื่อมต่อโดยอัตโนมัติและแสดงสถานะ Active หากใช้งานได้

อ่านข้อมูลผ่าน connector จากแอปของคุณ

แอปของคุณสามารถอ่านข้อมูลจาก API ภายนอกได้ จากเบราว์เซอร์โดยตรง โดยที่ API key ไม่เคยหลุดเข้าไปใน bundle เลย ข้อมูลรับรองตัวตนยังคงถูกเข้ารหัสอยู่บนแพลตฟอร์ม แอปของคุณเพียงระบุชื่อ connector, action และ input ที่มี type กำกับ แล้วแพลตฟอร์มจะเรียก API ให้คุณเอง

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 });

มีสองข้อจำกัดที่ควรรู้ เพราะออกแบบมาเช่นนี้โดยตั้งใจ:

• อ่านอย่างเดียว เข้าถึงได้เฉพาะ action ที่แพลตฟอร์มทำเครื่องหมายว่าปลอดภัยสำหรับเบราว์เซอร์เท่านั้น — นอกเหนือจากนั้นจะคืนค่า 403 ส่วนการเขียน (โพสต์ลง Slack, ส่งอีเมล, ตัดบัตรเครดิต) ไม่สามารถเรียกจากเบราว์เซอร์ได้เลย
• คุณส่ง URL หรือ host เองไม่ได้ สำหรับ connector http-read แบบทั่วไป input คือ { endpointKey, params } และ URL ที่อยู่เบื้องหลัง endpointKey ถูกตั้งค่าโดยคุณซึ่งเป็นเจ้าของแอป ไม่ใช่โดยโค้ดของแอป ผลลัพธ์ถูกแคชไว้ฝั่ง server และถูกจำกัดอัตราการเรียก เพราะ key ของบุคคลที่สามมีโควตาจำกัด

ค่า 404 หมายความว่าเจ้าของยังไม่ได้เชื่อมต่อ connector นั้น — นี่คือกรณีที่ควรจัดการใน UI ของคุณ

ให้ AI จัดการการเชื่อมต่อแทนคุณ

คุณไม่จำเป็นต้องเขียนโค้ด connector เอง AI builder รู้ว่า connector ใดถูกผูกกับโปรเจกต์ของคุณ และสามารถสร้างการเชื่อมต่อนั้นให้คุณได้:

• "ส่งอีเมลต้อนรับเมื่อผู้ใช้สมัครสมาชิก" — ใช้ Resend connector
• "โพสต์ข้อความ Slack เมื่อมีออเดอร์ใหม่เข้ามา" — ใช้ Slack connector
• "เล่นเสียงบรรยายในหน้าบทความ" — ใช้ ElevenLabs connector

เอกสารอ้างอิง Connector action

Resend (connectorId: 'resend')

Action	ผลข้างเคียง	คำอธิบาย
sendEmail	write	ส่งอีเมลธุรกรรมฉบับเดียว
sendBatch	write	ส่งอีเมลหลายฉบับพร้อมกัน
listDomains	read	แสดงรายการโดเมนที่ยืนยันแล้ว

Slack (connectorId: 'slack')

Action	ผลข้างเคียง	คำอธิบาย
postMessage	write	โพสต์ข้อความไปยังช่อง
listChannels	read	แสดงรายการช่องใน workspace
listUsers	read	แสดงรายการสมาชิกใน workspace
reactToMessage	write	เพิ่ม emoji reaction
getThread	read	ดึงการตอบกลับในเธรด

ElevenLabs (connectorId: 'eleven-labs')

Action	ผลข้างเคียง	คำอธิบาย
textToSpeech	write	แปลงข้อความเป็นเสียงพูด
listVoices	read	แสดงรายการเสียงที่มีให้ใช้
generateSoundEffect	write	สร้างเอฟเฟกต์เสียงด้วย AI

สถานะของการเชื่อมต่อ

สถานะ	ความหมาย
Active	ข้อมูลรับรองตัวตนถูกต้องและการเชื่อมต่อพร้อมใช้งาน
Broken	ข้อมูลรับรองตัวตนหมดอายุหรือถูกเพิกถอน — อัปเดตเพื่อกู้คืนการใช้งาน

ความปลอดภัย

• ข้อมูลรับรองตัวตนถูกเข้ารหัสด้วย AES-256-GCM ขณะจัดเก็บ
• Action ถูกจำกัดอัตราการเรียกใช้ที่ 1,000 คำร้องขอต่อนาที ต่อ connector ต่อโปรเจกต์
• การเรียกใช้ action ทุกครั้งจะถูกบันทึกพร้อม audit trail (การเชื่อมต่อ, action, ระยะเวลา, สถานะ)
• การเชื่อมต่อมีขอบเขตครอบคลุมทั้ง workspace

คำถามที่พบบ่อย

ใช้การเชื่อมต่อเดิมกับหลายโปรเจกต์ได้ไหม?

ได้ สร้างการเชื่อมต่อเพียงครั้งเดียวแล้วผูกกับโปรเจกต์จำนวนเท่าใดก็ได้ใน workspace เดียวกัน

จะเกิดอะไรขึ้นถ้า API key หมดอายุหรือถูกเพิกถอน?

สถานะการเชื่อมต่อจะเปลี่ยนเป็น Broken อัปเดตข้อมูลรับรองตัวตนใน Settings > Connectors เพื่อกู้คืนการใช้งาน

เรียกใช้ connector action จาก frontend ได้ไหม?

แอปของคุณไม่เคยถือข้อมูลรับรองตัวตนไว้เลย action สำหรับอ่าน ที่ปลอดภัยสำหรับเบราว์เซอร์จะถูกส่งผ่าน Proyecta Cloud ซึ่งแทรกข้อมูลรับรองตัวตนฝั่ง server ทำให้ key ไม่เคยอยู่ใน bundle ของคุณ ส่วน action สำหรับเขียนนั้นเรียกจากเบราว์เซอร์ไม่ได้เลย

เพิ่ม connector แบบกำหนดเองได้ไหม?

ยังไม่ได้ในตอนนี้ การกำหนด connector แบบกำหนดเองอยู่ในแผนงานที่กำลังพัฒนา

กำลังจะมาเร็วๆ นี้

• Connector เพิ่มเติม (Google, Twilio, SendGrid และอื่นๆ อีกมาก)
• การกำหนด connector แบบกำหนดเอง — นำ API ของคุณเองมาใช้
• Webhook ingestion สำหรับ event ขาเข้าจากบริการที่เชื่อมต่อ
• OAuth gateway — เก็บ token ไว้ฝั่ง server แม้สำหรับ flow ที่ client เป็นผู้เริ่มต้น