コネクタ
コネクタは、Stripe、Supabase、GitHub など、すでに使っているサービスを WebTwizz につなぎます。アカウントを一度接続すると、コネクタに保存されます。その後は、どのプロジェクトでも使えます。各プロジェクトには、選んだコネクタだけが追加されます。
プロジェクトでコネクタを使うと、次のことができます。
- サービスのキーがプロジェクトのシークレットとして保存され、サイトのコードから使えるようになります。
- アナリティクスタグやチャットウィンドウなど、サービスのためにサイトが読み込む必要のあるものが、プロジェクトのコードに自動で追加されます。プロジェクト内のコードをご覧ください。
- エディターに、そのプロジェクトの売上、エラー、訪問者、コミットなど、サービスのデータが表示されます。
- AI が作業中にサービスの情報を読み取り、設定できます。
サイトに何も追加しないコネクタもあります。Notion のページや Linear の課題を読むなど、AI がサイトを作りながら別のアプリで作業するためのものです。AI が使えるアプリをご覧ください。
コネクタの場所
ダッシュボードにあるコネクタ
ダッシュボードのサイドバーで、ライブラリの下にあるコネクタをクリックします。このページには、すべてのプロジェクトで接続したアカウントがまとめて表示されます。
- 接続済みには、アカウントを接続したサービスと、それぞれを使っているプロジェクトが表示されます。クリックすると開きます。
- コネクタを追加には、それ以外のサービスが表示されます。サービスをクリックすると接続できます。
- 検索するか、左側の接続済み、すべて、カテゴリで一覧を絞り込みます。
- 必要なサービスが見つからない場合は、コネクタをリクエストをクリックします。
ダッシュボードの検索（⌘K / Ctrl+K）から、名前でコネクタを探すこともできます。
各コネクタのページには、そのサービスのアカウントと、それぞれを使うプロジェクトが、プロジェクトごとの設定とともに表示されます。開くでプロジェクトに移動し、削除でそのプロジェクトからコネクタを削除します。
設定にあるプロジェクトのコネクタ
エディターで設定を開き、コネクタを選びます。
- このプロジェクト内には、プロジェクトで使っているコネクタが表示されます。クリックすると開きます。
- このプロジェクトに追加には、それ以外のサービスが表示されます。サービスをクリックすると追加できます。すでにアカウントを接続している場合は、使用するアカウントとアカウント名が表示され、1 回のクリックでそのアカウントを追加できます。
- すべてのコネクタでダッシュボードのページが開きます。
サービスの接続
ログインして接続するサービスと、キーを貼り付けて接続するサービスがあります。
両方の方法を使えるサービスもあります。Stripe ではキーを貼り付け、Google Analytics では測定 ID を貼り付け、Resend と OpenRouter ではキーを貼り付けを使えます。
プロジェクトから接続する場合：
- 設定 > コネクタを開き、サービスをクリックします。
- 接続をクリックします。
- ログインで接続するサービスは、新しいウィンドウでサービスを開きます。そこでアクセスを許可すると、コネクタに戻ります。
- キーで接続するサービスは、キーを作成するページを別のウィンドウで開きます。そこでキーをコピーして戻ると、WebTwizz がクリップボードからキーを取得し、確認して接続します。初回は、ブラウザから貼り付けの許可を求められることがあります。貼り付けをクリックするか、自分でフィールドにキーを貼り付けることもできます。ID とシークレットなど 2 つの値が必要なサービスでは、最初の値を入力した後に次の値を求められます。サービスがキーを拒否すると、キーが受け入れられませんでしたと表示されます。
- GitHub リポジトリや Sentry プロジェクトなど、選択が必要な場合は、コネクタの接続を完了画面に選択欄が表示されます。1 つ選べば完了です。
ダッシュボードからは、コネクタを追加の下にあるサービスをクリックするか、サービスのページを開いて接続をクリックします。アカウントはどのプロジェクトにも追加されずに保存されます。後からプロジェクトの設定 > コネクタで追加できます。
AI のキーをまだ持っていない場合は、OpenAI、Anthropic、Gemini、Groq のフォームにある OpenRouter でログインを使うと、一度にすべてのモデルを利用できるようになります。OpenRouterをご覧ください。
Supabase と Google Sheets はデータソースのため、接続をクリックするとデータパネルが開きます。プロジェクトで一度に使えるデータソースは 1 つです。データと CMSをご覧ください。
アカウントの利用を 1 つのプロジェクトに限定
このプロジェクトのみでは、そのプロジェクトだけで使えるアカウントを接続します。他のプロジェクトでは選択できません。プロジェクト内ではこのプロジェクトのみ、ダッシュボードでは 1 つのプロジェクトのみと表示されます。クライアントの Stripe アカウントや、他で使い回したくないキーに便利です。
コネクタの詳細画面
このプロジェクト内にあるコネクタをクリックします。名前の横には、Stripe を開くや Sentry を開くなど、このプロジェクトがサービス上で使っているものを開くリンクがあります。その下には、上から順に次の項目があります。
- 概要：Stripe の決済、Sentry のエラー、GitHub のプルリクエストなど、このプロジェクトのサービスデータです。行をクリックすると、その場で詳細を確認できます。多くの行には、決済の返金、エラーの解決、プルリクエストのマージなど、日常的な操作のボタンがあります。そのため、サービス自体のサイトを開く必要はほとんどありません。取り消せない操作では、実行前に確認が表示されます。さらに表示で一覧の続きを読み込み、テーブルやタブはデータパネルで開きます。
- アカウント：このプロジェクトが使うアカウントと、同じアカウントを使う他のプロジェクトを示す使用されている場所です。管理でダッシュボードのコネクタからアカウントを開きます。キーで接続するアカウントの多くには、キーを置き換えもあります。
- 設定：リポジトリ、Sentry プロジェクト、AI モデルなど、このプロジェクトで使うものを選びます。変更はその都度保存されます。
- 公開サイト：公開サイトに何かを追加するコネクタについて、実行中なのか、公開して更新する必要があるのか、公開後に動き始めるのかを示します。
- このプロジェクトから削除：削除をクリックし、**プロジェクトから削除しますか？**で確定します。このプロジェクトからキーが削除されます。他のプロジェクトでは引き続きアカウントを使えます。
このドキュメントの各コネクタのページで、概要と設定を紹介しています。
アカウントの切り替えと削除
- プロジェクト内でアカウントを切り替える：サービスに複数のアカウントがある場合、アカウント行にアカウントを切り替えが表示されます。メニューには、他のアカウントと別のアカウントを接続が表示されます。切り替えると、プロジェクトのキーも置き換わります。
- アカウント名を変更する：ダッシュボードのコネクタページでアカウント名をクリックし、新しい名前を入力して
Enterを押します。 - キーを置き換える：アカウントのキーを置き換えをクリックし、新しいキーを貼り付けます。そのキーを使うすべてのプロジェクトが新しいキーに切り替わります。Razorpay、PayPal、Intercom にはこの機能がありません。複数の値をまとめて変更する必要があるため、新しい値を別のアカウントとして接続してから切り替えてください。
- すべての場所からアカウントを削除する：ダッシュボードのコネクタページで、アカウントの削除をクリックし、続いて削除とアカウント名が表示されたボタンをクリックします。そのアカウントを使うすべてのプロジェクトから接続が解除されます。アカウントを再び接続するまで、それらのサイトでそのサービスを使う機能は停止します。
削除しても、サービス上のデータは消えません。Stripe の顧客、GitHub リポジトリ、Sentry のイベントはそのまま残ります。
保存済みのログイン情報がサービスに受け入れられなくなると、アカウントに再接続が必要と再接続ボタンが表示されます。アカウントでまだ許可していない権限が必要な場合は、概要に追加の権限が必要ですと再接続が表示されます。
キーの保存先
サイトで使うコネクタは、設定 > シークレットにキーをシークレットとして追加し、最新の状態に保ちます。キーは接続済みサービスからに表示されます。プレビューではすぐに使えます。公開サイトにも反映するには、もう一度公開してください。シークレットをご覧ください。
各コネクタのページには、追加されるシークレットが記載されています。HubSpot のサービスキーや Twilio の Auth Token など、WebTwizz だけが必要とするキーはサイトには追加されません。
プロジェクト内のコード
一部のコネクタは、すべてのページでコードを実行する必要があります。Google Analytics と PostHog は訪問数を集計し、Sentry はエラーを検出します。HubSpot はトラッキングを追加し、Intercom は Messenger を表示します。Google Search Console はサイトの所有権を確認するタグを追加します。WebTwizz はこれらをプロジェクト内の webtwizz-connectors.tsx という 1 つのファイルにまとめ、サイトのルートレイアウトに追加します。設定 > アナリティクスにあるサイト自体のアクセス解析も、公開後にそこへ加わります。自分で編集する必要はありません。
- これらのコネクタを追加、変更、削除したときと、公開するたびに更新されます。まだファイルがないプロジェクトには、次回の公開時に追加されます。
- Intercom Messenger 以外は、公開サイトでのみ実行されます。そのため、プレビューでの自分のアクセスやエラーは集計されません。Messenger は試せるように、プレビューにも表示されます。
- コードの一部なので、他のファイルと同じように GitHub やダウンロードに含まれます。WebTwizz が管理するため、手動で加えた変更は上書きされます。変更する場合は、コネクタの設定を使ってください。
- サイトのコードがすでにこれらのサービスを読み込んでいる場合、WebTwizz はそのサービスをファイルに含めません。二重に読み込まれることはありません。
チャットでのコネクタ
AI はプロジェクトが使うコネクタを把握し、代わりに操作できます。
接続カード
メールを送信するお問い合わせフォームなど、サービスが必要なものを依頼すると、AI は Resend を接続などの接続カードを追加します。クリックすると、チャットを離れずに接続できます。そのサービスのアカウントがすでにある場合は、カードにアカウント名と別の Resend アカウントを接続が表示されます。
コネクタにないサービスの場合、AI は必要なシークレットを値が空の状態で設定 > シークレットに追加します。値が必要ですの下に値を貼り付けてください。
ライブカード
状況を尋ねると、AI はサービスのライブカードで回答できます。サービスごとに 1 行で、主な数値、設定、開く、展開できる詳細が表示されます。数値はサービスから直接取得されるため、AI が書き写したり推測したりすることはありません。
AI によるサービスの読み取り
AI は、作業に役立つときに接続済みサービスの情報を読み取ります。たとえば、修正前に Sentry のエラーを確認したり、Google Analytics の先月の訪問者数や、Resend のドメインが認証済みかどうかを調べたりします。読み取りは、Linear を使用中のように、サービスのロゴ付きの行としてチャットに表示されます。作業中はロゴが点滅します。
完了すると、その行に確認できた内容が表示されます。クリックすると詳細を確認できます。
自分でサービスを指定するには、チャット入力欄に @ を入力し、コネクタから選びます。/ を入力し、MCP の下にある AI が使えるアプリを開くと、そのアプリのツールを選べます。
変更前の確認
情報の読み取りは自動で行われます。サービス上のアカウントに変更を加える場合は、受け入れると拒否で事前に確認します。たとえば、Sentry のエラーを解決済みにする、決済を返金する、Supabase のログイン設定を変更するといった操作です。Resend と Loops のテストメールは自分の受信トレイにだけ送られるため、確認はありません。
チャットモードでは、AI はコネクタの情報を読み取れますが、コネクタを通じて変更することはできません。例外は AI が使えるアプリと MCP サーバーです。変更を加える可能性のあるツールは、先に確認を求め、受け入れた場合にだけ実行されます。
GitHub と Stripe には専用のツールがあります。AI は git を通じてリポジトリを操作し、Stripe ツールを通じて Stripe アカウントを操作します。サイトのデータはデータパネルのツールを通じて扱います。AI ができることは、各コネクタのページに記載されています。
すべてのコネクタ
データ
| コネクタ | 用途 | 接続方法 |
|---|---|---|
| WebTwizz Cloud | データベース、ログイン、ファイルストレージ、ジョブ、ログ | 標準で利用可能。AI が追加するか、データパネルから追加 |
| Supabase | 自分の Supabase アカウントでのデータベースとログイン | データパネルからログイン |
| Google Sheets | スプレッドシートをサイトのデータとして使用 | データパネルから Google でログイン |
決済
| コネクタ | 用途 | 接続方法 |
|---|---|---|
| Stripe | 決済とサブスクリプション | ログイン、またはキーを貼り付け |
| Razorpay | インドでの決済：UPI、カード、ネットバンキング | Key ID と Key Secret を貼り付け |
| Paystack | ナイジェリア、ガーナ、ケニアなどでの決済 | シークレットキーと公開キーを貼り付け |
| PayPal | 世界各地での PayPal 決済とカード決済 | クライアント ID とシークレットを貼り付け |
アナリティクス
| コネクタ | 用途 | 接続方法 |
|---|---|---|
| Google Analytics | サイトの訪問者を把握 | Google でログイン、または測定 ID を貼り付け |
| Google Search Console | Google 検索でのサイトの状況を把握 | Google でログイン |
| PostHog | リプレイや機能フラグで訪問者の行動を把握 | ログイン |
| Sentry | エラーの検出と修正 | ログイン |
メール
| コネクタ | 用途 | 接続方法 |
|---|---|---|
| Resend | 独自ドメインからのメール送信 | ログイン、または API キーを貼り付け |
| Loops | メーリングリストとユーザー向けメール | API キーを貼り付け |
| Klaviyo | AI によるメールマーケティングの成果確認 | ログイン |
サポート、CRM、メッセージ
| コネクタ | 用途 | 接続方法 |
|---|---|---|
| Intercom | すべてのページでのライブチャット | App ID を貼り付け |
| HubSpot | サイトの見込み客を HubSpot で管理 | サービスキーを貼り付け |
| Twilio | SMS と電話番号ログイン用コード | Account SID と Auth Token を貼り付け |
| ビジネス用番号からの WhatsApp メッセージ | トークンと ID を貼り付け |
予約と音声
| コネクタ | 用途 | 接続方法 |
|---|---|---|
| Cal.com | 訪問者による面談などの予約 | API キーを貼り付け |
| Google Calendar | カレンダーへの予約の直接登録 | Google でログイン |
| Calendly | AI による予約リンクの検索 | ログイン |
| ElevenLabs | 訪問者が話しかけられる音声エージェント | API キーを貼り付け |
AI
| コネクタ | 用途 | 接続方法 |
|---|---|---|
| OpenAI | サイトで GPT モデルを使用 | API キーを貼り付け |
| Anthropic | サイトで Claude を使用 | API キーを貼り付け |
| Gemini | サイトで Gemini モデルを使用 | API キーを貼り付け |
| OpenRouter | 1 つのアカウントで数百のモデルを使用 | ログイン、または API キーを貼り付け |
| Groq | 高速なオープンモデル | API キーを貼り付け |
コード
| コネクタ | 用途 | 接続方法 |
|---|---|---|
| GitHub | 自分のリポジトリでコードを管理 | ログイン |
AI が使えるアプリ
AI がサイトを作りながら別のアプリで作業できるようにします。サイトには何も追加されず、どのプランでも無料で使えます。それぞれの詳細は AI が使えるアプリをご覧ください。
Notion、Linear、Cloudflare、Zapier、Make、monday.com、ClickUp、Miro、Webflow、Wix、Klaviyo、Calendly、Todoist、Context7、Exa、Firecrawl、Hugging Face、Microsoft Learn、そのほか MCP サーバーを通じて使えるサービス。