Connectors

Slack、Resend、ElevenLabsなどのサードパーティサービスをアプリに接続できます。認証情報は暗号化され、アクションは事前に認証済みです。

Connectorsを使えば、コード内でAPIキーを直接管理することなく、外部サービスをアプリに統合できます。一度接続を設定してプロジェクトに紐付けるだけで、事前に用意されたアクションをアプリから呼び出せます。認証情報は保存時に暗号化され、frontendのコードに露出することはありません。

利用可能なConnectors

Connector	カテゴリ	認証方式	機能
Resend	コミュニケーション	APIキー	トランザクションメールの送信、一括メール送信、認証済みドメインの一覧取得
Slack	コミュニケーション	OAuth	メッセージの投稿、チャンネル・ユーザーの一覧取得、リアクションの追加、スレッドの読み取り
ElevenLabs	AI	APIキー	テキスト読み上げ、利用可能な音声の一覧取得、効果音の生成

Connectorsは今後も順次追加される予定です。

Connectorsの仕組み

接続を作成する — 認証情報（APIキーまたはOAuthでのサインイン）を入力します
接続をプロジェクトに紐付ける — プロジェクトがその認証情報を使用することを許可します
アプリからアクションを呼び出す — リクエストはProyecta Cloud経由で送信され、server-sideで認証情報が注入されます

アプリのコードが生のAPIキーやOAuthトークンに触れることはありません。Connectorシステムが認証、レート制限、監査ログを一括管理します。

Connectorのセットアップ

Builderでプロジェクトを開く
Settings > Connectors に移動する
カタログからConnectorを選択する（例：Resend）
認証情報を入力する：
- APIキー方式（Resend、ElevenLabs）：シークレットキーを貼り付ける
- OAuth方式（Slack）：サインインしてアクセスを承認する
接続に名前を付ける（例：「Production Resend」）
接続は自動的にテストされ、有効であれば Active と表示されます

アプリからConnector経由で読み取る

APIキーがバンドルに含まれることなく、アプリはブラウザから直接サードパーティAPIを読み取れます。認証情報はプラットフォーム上で暗号化されたまま保持され、アプリはConnector名・アクション名・型付きの入力を指定するだけで、実際の呼び出しはプラットフォームが代行します。

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

意図的に設けられた2つのガードレールを押さえておいてください。

読み取り専用です。 プラットフォームがブラウザセーフと判定したアクションのみ到達可能で、それ以外は 403 を返します。書き込み（Slackへの投稿、メール送信、カードへの課金）がブラウザから到達可能になることはありません。
URLやホストを渡すことはできません。 汎用の http-read Connectorの入力は { endpointKey, params } であり、endpointKey の背後にあるURLはアプリのコードではなく、アプリのオーナーであるあなたが設定します。サードパーティのキーはクォータ制であるため、レスポンスはserver-sideでキャッシュされ、レート制限がかかります。

404 はオーナーがそのConnectorをまだ接続していないことを意味します。UI上で対処する価値があるのはこのケースです。

AIに実装を任せる

Connectorのコードを手書きする必要はありません。AI Builderはプロジェクトに紐付けられたConnectorを把握しており、インテグレーションのコードを自動生成できます：

"ユーザーがサインアップしたらウェルカムメールを送る" — Resend Connectorを使用
"新しい注文が入ったらSlackにメッセージを投稿する" — Slack Connectorを使用
"記事ページで音声ナレーションを再生する" — ElevenLabs Connectorを使用

Connectorアクションリファレンス

Resend（`connectorId: 'resend'`）

アクション	副作用	説明
`sendEmail`	write	トランザクションメールを1件送信
`sendBatch`	write	複数のメールを一括送信
`listDomains`	read	認証済み送信ドメインの一覧を取得

Slack（`connectorId: 'slack'`）

アクション	副作用	説明
`postMessage`	write	チャンネルにメッセージを投稿
`listChannels`	read	ワークスペースのチャンネル一覧を取得
`listUsers`	read	ワークスペースのメンバー一覧を取得
`reactToMessage`	write	絵文字リアクションを追加
`getThread`	read	スレッドの返信を取得

ElevenLabs（`connectorId: 'eleven-labs'`）

アクション	副作用	説明
`textToSpeech`	write	テキストを音声に変換
`listVoices`	read	利用可能な音声の一覧を取得
`generateSoundEffect`	write	AIによる効果音を生成

接続ステータス

ステータス	意味
Active	認証情報が有効で、接続は使用可能な状態です
Broken	認証情報が期限切れまたは失効しています。復旧するには更新してください

セキュリティ

認証情報はAES-256-GCMで暗号化して保存されます
アクションは接続ごと・プロジェクトごとに1分あたり1,000リクエストのレート制限があります
すべてのアクション呼び出しは監査証跡（接続、アクション、実行時間、ステータス）とともにログに記録されます
接続はワークスペース全体にスコープされます

よくある質問

同じ接続を複数のプロジェクトで使えますか？

はい。接続を一度作成すれば、同じワークスペース内の任意のプロジェクトに紐付けることができます。

APIキーが期限切れになったり失効したりするとどうなりますか？

接続ステータスが Broken に変わります。Settings > Connectors で認証情報を更新することで復旧できます。

frontendからConnectorのアクションを呼び出せますか？

アプリが認証情報を保持することはありません。ブラウザセーフな読み取りアクションはProyecta Cloud経由でプロキシされ、server-sideで認証情報が注入されるため、キーがバンドルに含まれることはありません。書き込みアクションはブラウザからは一切到達できません。

独自のカスタムConnectorを追加できますか？

現時点ではできません。カスタムConnector定義はロードマップに含まれています。

近日公開予定

追加Connector（Google、Twilio、SendGridなど）
カスタムConnector定義 — 独自のAPIを持ち込める機能
接続済みサービスからの受信イベント向けWebhook取り込み
OAuth gateway — クライアント起点のフローでもトークンをserver-sideに保持