Connectors
Ein Connector verbindet einen Dienst, den du bereits nutzt, wie Stripe, Supabase oder GitHub, mit WebTwizz. Du verbindest ein Konto einmal und es wird in deinen Connectors gespeichert. Danach kann jedes deiner Projekte es nutzen. Ein Projekt erhält dabei nur die Connectors, die du dafür auswählst.
Wenn ein Projekt einen Connector nutzt:
- Werden die Schlüssel des Dienstes als Secrets des Projekts gespeichert, damit der Code deiner Website sie nutzen kann.
- Wird alles, was deine Website dafür laden muss, etwa ein Analytics-Tag oder ein Chatfenster, für dich in den Projektcode eingefügt. Siehe Code in deinem Projekt.
- Zeigt der Editor die Daten des Dienstes für dieses Projekt an: Umsatz, Fehler, Besucher, Commits.
- Kann die KI während ihrer Arbeit Daten aus dem Dienst lesen und ihn für dich einrichten.
Manche Connectors fügen deiner Website nichts hinzu. Sie ermöglichen der KI, beim Erstellen in einer anderen App zu arbeiten, etwa eine Notion-Seite oder ein Linear-Issue zu lesen. Siehe Apps, die die KI nutzen kann.
Wo du Connectors findest
Deine Connectors im Dashboard
Klicke in der Seitenleiste des Dashboards unter Bibliothek auf Connectors. Diese Seite enthält alle Konten, die du verbunden hast, über alle deine Projekte hinweg.
- Verbunden listet die Dienste auf, für die du ein Konto verbunden hast, und die Projekte, die sie nutzen. Klicke auf einen Dienst, um ihn zu öffnen.
- Connector hinzufügen listet alle weiteren Dienste auf. Klicke auf einen Dienst, um ihn zu verbinden.
- Suche oder grenze die Liste links mit Verbunden, Alle oder einer Kategorie ein.
- Fehlt ein Dienst, den du brauchst? Klicke auf Connector anfragen.
Du kannst einen Connector auch über Suchen (⌘K / Ctrl+K) im Dashboard anhand seines Namens finden.
Die Seite eines Connectors listet deine Konten für diesen Dienst und die Projekte auf, die sie nutzen, jeweils mit den Einstellungen des Projekts. Öffnen führt direkt zum Projekt. Entfernen entfernt den Connector aus diesem Projekt.
Die Connectors eines Projekts in den Einstellungen
Öffne im Editor Einstellungen und wähle Connectors.
- In diesem Projekt listet auf, was das Projekt nutzt. Klicke auf einen Connector, um ihn zu öffnen.
- Zu diesem Projekt hinzufügen listet alle weiteren Dienste auf. Klicke auf einen Dienst, um ihn hinzuzufügen. Wenn du dafür bereits ein Konto verbunden hast, zeigt der Dienst Verwendet dein und den Kontonamen an. Mit einem Klick wird er mit diesem Konto hinzugefügt.
- Alle deine Connectors öffnet die Seite im Dashboard.
Einen Dienst verbinden
Manche Dienste verbindest du durch Anmelden. Bei anderen fügst du einen Schlüssel ein.
| Methode | Connectors |
|---|---|
| Anmelden | Stripe, GitHub, Sentry, PostHog, Google Analytics, Google Sheets, Google Calendar, Google Search Console, Supabase, Resend, OpenRouter und die Apps, die die KI nutzen kann |
| Schlüssel einfügen | OpenAI, Anthropic, Gemini, Groq, Loops, Intercom (eine App-ID), Cal.com, ElevenLabs, HubSpot, Twilio, WhatsApp, Razorpay, Paystack, PayPal, MCP-Server |
Manche bieten beides an: Schlüssel einfügen für Stripe, Mess-ID einfügen für Google Analytics und Schlüssel einfügen für Resend und OpenRouter.
In einem Projekt:
- Öffne Einstellungen > Connectors und klicke auf den Dienst.
- Klicke auf Verbinden.
- Dienste mit Anmeldung öffnen den Dienst in einem neuen Fenster. Erlaube dort den Zugriff. Danach kehrst du zum Connector zurück.
- Dienste mit Schlüssel öffnen die Seite, auf der du den Schlüssel erstellst, in einem eigenen Fenster. Kopiere dort den Schlüssel und kehre zurück: WebTwizz übernimmt ihn aus deiner Zwischenablage, prüft ihn und stellt die Verbindung her. Dein Browser fragt möglicherweise einmal nach, ob das Einfügen erlaubt werden soll. Du kannst auch auf Einfügen klicken oder den Schlüssel selbst in das Feld einfügen. Braucht ein Dienst zwei Werte, etwa eine ID und einen geheimen Schlüssel, fragt er nach dem ersten nach dem nächsten. Lehnt der Dienst einen Schlüssel ab, erscheint Dieser Schlüssel wurde nicht akzeptiert.
- Wenn du etwas auswählen musst, etwa ein GitHub-Repository oder ein Sentry-Projekt, öffnet sich der Connector mit der Auswahl unter Verbindung abschließen. Wähle einen Eintrag aus, und du bist fertig.
Klicke im Dashboard unter Connector hinzufügen auf einen Dienst oder öffne dessen Seite und klicke auf Verbinden. Das Konto wird gespeichert, ohne zu einem Projekt hinzugefügt zu werden. Füge es später über Einstellungen > Connectors im jeweiligen Projekt hinzu.
Noch kein KI-Schlüssel? Die Formulare für OpenAI, Anthropic, Gemini und Groq bieten Mit OpenRouter anmelden. Damit erhältst du in einem Schritt Zugriff auf alle Modelle. Siehe OpenRouter.
Supabase und Google Sheets sind Datenquellen. Deshalb öffnet Verbinden bei ihnen den Bereich Daten. Ein Projekt hat immer nur eine Datenquelle. Siehe Daten & CMS.
Ein Konto auf ein Projekt beschränken
Nur dieses Projekt verbindet ein Konto, das nur dieses Projekt nutzen kann. In deinen anderen Projekten wird es nicht angeboten. Im Projekt ist es mit Nur dieses Projekt gekennzeichnet, im Dashboard mit Nur ein Projekt. Praktisch für das Stripe-Konto eines Kunden oder einen Schlüssel, der nicht wiederverwendet werden soll.
In einem Connector
Klicke unter In diesem Projekt auf einen Connector. Neben seinem Namen findest du Links, die beim Dienst direkt das öffnen, was dieses Projekt nutzt, etwa Stripe öffnen oder Sentry öffnen. Darunter folgen von oben nach unten:
- Übersicht: die Daten des Dienstes für dieses Projekt, etwa Zahlungen bei Stripe, Fehler bei Sentry oder Pull Requests bei GitHub. Klicke auf eine Zeile, um ihre Details direkt dort anzuzeigen. Viele Zeilen haben Schaltflächen für häufige Aufgaben, etwa Erstatten für eine Zahlung, Beheben für einen Fehler oder Zusammenführen für einen Pull Request. So brauchst du die Website des Dienstes nur selten. Alles, was sich nicht rückgängig machen lässt, erfordert vorher eine Bestätigung. Mehr anzeigen lädt den nächsten Teil einer Liste. Tabellen und Tabs öffnen sich im Bereich Daten.
- Konto: das Konto, das dieses Projekt nutzt, und unter Auch verwendet in deine anderen Projekte, die es verwenden. Verwalten öffnet das Konto in deinen Dashboard-Connectors. Die meisten Konten mit Schlüssel bieten auch Schlüssel ersetzen.
- Einstellungen: die Auswahl für dieses Projekt, etwa das Repository, das Sentry-Projekt oder das KI-Modell. Änderungen werden sofort gespeichert.
- Live-Website: zeigt bei Connectors, die etwas auf deiner veröffentlichten Website einfügen, ob der Status Wird ausgeführt ist, du Zum Aktualisieren veröffentlichen musst oder der Start Nach dem Veröffentlichen erfolgt.
- Aus diesem Projekt entfernen: Klicke auf Entfernen und dann zur Bestätigung auf Aus Projekt entfernen?. Die Schlüssel werden aus diesem Projekt entfernt. Deine anderen Projekte behalten das Konto.
Die Seite jedes Connectors in dieser Dokumentation zeigt seine Übersicht und Einstellungen.
Ein Konto wechseln oder entfernen
- Konten in einem Projekt wechseln: Wenn du mehrere Konten für einen Dienst hast, enthält die Zeile Konto die Option Konto wechseln. Das Menü listet deine anderen Konten und Weiteres Konto verbinden auf. Das Projekt wechselt zum gewählten Konto und seine Schlüssel werden ersetzt.
- Ein Konto umbenennen: Klicke auf der Connector-Seite im Dashboard auf den Kontonamen, gib den neuen Namen ein und drücke
Enter. - Einen Schlüssel ersetzen: Klicke beim Konto auf Schlüssel ersetzen und füge den neuen ein. Jedes Projekt, das diesen Schlüssel nutzt, wechselt zum neuen. Razorpay, PayPal und Intercom bieten diese Option nicht, da ihre Werte zusammen geändert werden müssen: Verbinde die neuen Werte als weiteres Konto und wechsle dann zu diesem.
- Ein Konto überall entfernen: Klicke auf der Connector-Seite im Dashboard beim Konto auf Entfernen und dann auf Entfernen mit dem Kontonamen. Die Verbindung wird für jedes Projekt getrennt, das das Konto nutzt. Alle Funktionen dieser Websites, die es verwenden, funktionieren erst wieder, wenn du erneut ein Konto verbindest.
Beim Entfernen wird beim Dienst selbst nichts gelöscht. Deine Stripe-Kunden, dein GitHub-Repository und deine Sentry-Ereignisse bleiben, wo sie sind.
Wenn ein Dienst die gespeicherte Anmeldung nicht mehr akzeptiert, zeigt das Konto Erneute Verbindung nötig mit der Schaltfläche Erneut verbinden. Braucht der Dienst eine Berechtigung, die das Konto nicht erteilt hat, steht in der Übersicht, dass der Dienst eine weitere Berechtigung benötigt, mit Erneut verbinden.
Wo die Schlüssel gespeichert werden
Connectors, die deine Website nutzt, fügen ihre Schlüssel als Secrets unter Einstellungen > Secrets hinzu und halten sie aktuell. Sie stehen unter Von verbundenen Diensten. Deine Vorschau nutzt sie sofort. Veröffentliche erneut, damit auch deine Live-Website sie erhält. Siehe Secrets.
Die Seite jedes Connectors listet die Secrets auf, die er hinzufügt. Schlüssel, die nur WebTwizz braucht, etwa ein HubSpot-Dienstschlüssel oder ein Twilio Auth Token, gelangen nie in deine Website.
Code in deinem Projekt
Manche Connectors brauchen Code auf jeder Seite: Google Analytics und PostHog zählen Besuche, Sentry erfasst Fehler, HubSpot fügt sein Tracking hinzu, Intercom zeigt seinen Messenger und Google Search Console fügt das Tag hinzu, das bestätigt, dass die Website dir gehört. WebTwizz speichert all das in einer Datei in deinem Projekt, webtwizz-connectors.tsx, und bindet sie in das Root-Layout deiner Website ein. Die eigene Analyse deiner Website aus Einstellungen > Analytics kommt hinzu, sobald die Website veröffentlicht ist. Du musst dich darum nicht kümmern.
- Die Datei wird aktualisiert, wenn du einen dieser Connectors hinzufügst, änderst oder entfernst, und bei jeder Veröffentlichung. Ein Projekt ohne diese Datei erhält sie bei der nächsten Veröffentlichung.
- Alles außer dem Intercom Messenger läuft nur auf deiner veröffentlichten Website. Deine eigenen Besuche und Fehler in der Vorschau werden also nicht mitgezählt. Der Messenger erscheint auch in der Vorschau, damit du ihn ausprobieren kannst.
- Die Datei ist Teil deines Codes und wird wie jede andere Datei an GitHub übertragen und in Downloads aufgenommen. WebTwizz verwaltet sie. Manuelle Änderungen daran werden daher ersetzt. Ändere stattdessen die Einstellungen des Connectors.
- Wenn der Code deiner Website einen dieser Dienste bereits selbst lädt, lässt WebTwizz ihn in der Datei weg. So wird er nie doppelt geladen.
Connectors im Chat
Die KI weiß, welche Connectors das Projekt nutzt, und arbeitet für dich mit ihnen.
Verbindungskarten
Wenn du etwas anforderst, das einen Dienst braucht, etwa ein Kontaktformular, das dir E-Mails sendet, fügt die KI eine Verbindungskarte dafür hinzu, etwa Resend verbinden. Klicke darauf, um die Verbindung herzustellen, ohne den Chat zu verlassen. Wenn du bereits ein Konto für diesen Dienst hast, bietet die Karte es mit seinem Namen an, zusammen mit Weiteres Resend-Konto verbinden.
Für einen Dienst ohne Connector legt die KI die benötigten Secrets ohne Werte unter Einstellungen > Secrets an. Du kannst sie dann unter Benötigt einen Wert einfügen.
Live-Karten
Frage, wie etwas läuft, und die KI kann mit einer Live-Karte des Dienstes antworten: eine Zeile pro Dienst mit der wichtigsten Kennzahl, Einstellungen und Öffnen sowie aufklappbaren Details. Die Zahlen kommen direkt vom Dienst. Die KI tippt sie also nie selbst ein und schätzt sie nicht.
Wie die KI einen Dienst liest
Die KI liest deine verbundenen Dienste, wenn es hilft: die Fehler in Sentry, bevor sie einen behebt, die Besucherzahlen des letzten Monats aus Google Analytics oder ob deine Resend-Domain verifiziert ist. Jeder Lesezugriff erscheint als Zeile im Chat mit dem Logo des Dienstes, etwa Linear wird verwendet. Während sie arbeitet, pulsiert das Logo.
Wenn sie fertig ist, steht in der Zeile, was sie gefunden hat. Klicke darauf, um die Details zu sehen.
Um die KI selbst auf einen Dienst hinzuweisen, tippe @ in das Chatfeld und wähle ihn unter Connectors aus. Tippe / und öffne unter MCP eine der Apps, die die KI nutzen kann, um eines ihrer Tools auszuwählen.
Vor Änderungen fragt sie nach
Lesezugriffe erfolgen ohne Nachfrage. Bei Änderungen an deinem Konto beim Dienst fragt die KI vorher mit Übernehmen und Ablehnen: etwa beim Markieren eines Sentry-Fehlers als behoben, beim Erstatten einer Zahlung oder beim Ändern der Supabase-Anmeldeeinstellungen. Test-E-Mails von Resend und Loops gehen nur an deinen eigenen Posteingang. Dafür wird nicht nachgefragt.
Im Modus Chat kann die KI Connectors lesen, aber darüber nichts ändern. Die einzige Ausnahme sind Apps, die die KI nutzen kann, und MCP-Server: Ein Tool, das etwas ändern könnte, fragt dich vorher und wird nur ausgeführt, wenn du zustimmst.
GitHub und Stripe haben eigene Tools: Die KI arbeitet über git mit deinem Repository und über ihr Stripe-Tool mit deinem Stripe-Konto. Die Daten deiner Website werden über die Tools im Bereich Daten verwaltet. Jede Connector-Seite beschreibt, was die KI damit tun kann.
Alle Connectors
Daten
| Connector | Wofür er gedacht ist | So verbindest du ihn |
|---|---|---|
| WebTwizz Cloud | Datenbank, Anmeldungen, Dateispeicher, Jobs und Logs | Enthalten. Die KI fügt ihn hinzu, oder du fügst ihn im Bereich Daten hinzu |
| Supabase | Datenbank und Anmeldungen in deinem eigenen Supabase-Konto | Im Bereich Daten anmelden |
| Google Sheets | Eine Tabelle als Datenquelle deiner Website | Im Bereich Daten mit Google anmelden |
Zahlungen
| Connector | Wofür er gedacht ist | So verbindest du ihn |
|---|---|---|
| Stripe | Zahlungen und Abonnements | Anmelden oder Schlüssel einfügen |
| Razorpay | Zahlungen in Indien: UPI, Karten und Netbanking | Key ID und Key Secret einfügen |
| Paystack | Zahlungen in Nigeria, Ghana, Kenia und weiteren Ländern | Geheimen und öffentlichen Schlüssel einfügen |
| PayPal | PayPal- und Kartenzahlungen weltweit | Client-ID und geheimen Schlüssel einfügen |
Analytics
| Connector | Wofür er gedacht ist | So verbindest du ihn |
|---|---|---|
| Google Analytics | Wer deine Website besucht | Mit Google anmelden oder eine Mess-ID einfügen |
| Google Search Console | Wie deine Website in der Google-Suche abschneidet | Mit Google anmelden |
| PostHog | Was Besucher tun, mit Sitzungsaufzeichnungen und Feature-Flags | Anmelden |
| Sentry | Fehler erfassen und beheben | Anmelden |
E-Mail
| Connector | Wofür er gedacht ist | So verbindest du ihn |
|---|---|---|
| Resend | E-Mails von deiner eigenen Domain | Anmelden oder einen API-Schlüssel einfügen |
| Loops | Mailinglisten und E-Mails für deine Nutzer | Einen API-Schlüssel einfügen |
| Klaviyo | Lässt die KI deine E-Mail-Marketing-Ergebnisse einsehen | Anmelden |
Support, CRM und Nachrichten
| Connector | Wofür er gedacht ist | So verbindest du ihn |
|---|---|---|
| Intercom | Live-Chat auf jeder Seite | Eine App-ID einfügen |
| HubSpot | Die Leads deiner Website in HubSpot | Einen Dienstschlüssel einfügen |
| Twilio | SMS und Anmeldecodes per Telefon | Deine Account SID und dein Auth Token einfügen |
| WhatsApp-Nachrichten von deiner Geschäftsnummer | Ein Token und IDs einfügen |
Buchungen und Sprache
| Connector | Wofür er gedacht ist | So verbindest du ihn |
|---|---|---|
| Cal.com | Besucher Termine bei dir buchen lassen | Einen API-Schlüssel einfügen |
| Google Calendar | Buchungen direkt in deinem Kalender | Mit Google anmelden |
| Calendly | Lässt die KI deine Buchungslinks finden | Anmelden |
| ElevenLabs | Ein Sprachagent, mit dem Besucher sprechen können | Einen API-Schlüssel einfügen |
KI
| Connector | Wofür er gedacht ist | So verbindest du ihn |
|---|---|---|
| OpenAI | GPT-Modelle in deiner Website | Einen API-Schlüssel einfügen |
| Anthropic | Claude in deiner Website | Einen API-Schlüssel einfügen |
| Gemini | Gemini-Modelle in deiner Website | Einen API-Schlüssel einfügen |
| OpenRouter | Hunderte Modelle mit einem Konto | Anmelden oder einen API-Schlüssel einfügen |
| Groq | Sehr schnelle offene Modelle | Einen API-Schlüssel einfügen |
Code
| Connector | Wofür er gedacht ist | So verbindest du ihn |
|---|---|---|
| GitHub | Dein Code in deinem eigenen Repository | Anmelden |
Apps, die die KI nutzen kann
Damit kann die KI beim Erstellen in einer anderen App arbeiten. Deiner Website wird nichts hinzugefügt. Diese Apps sind in jedem Tarif kostenlos. Details zu jeder App findest du unter Apps, die die KI nutzen kann.
Notion, Linear, Cloudflare, Zapier, Make, monday.com, ClickUp, Miro, Webflow, Wix, Klaviyo, Calendly, Todoist, Context7, Exa, Firecrawl, Hugging Face, Microsoft Learn und jeder andere Dienst über einen MCP-Server.