Din webbplats har redan svaren. Problemet är att besökare inte hittar dem snabbt nog, och din inkorg får hantera samma ”var finns…?”-frågor om och om igen.
Den här Supabase OpenAI-chatbot-automationen träffar supportteam först, men marknadschefer och grundare känner också av friktionen. Den gör dina sidor till en sökbar Q&A-upplevelse, så att människor får korrekta svar utan att behöva vänta på en människa.
Du får se hur arbetsflödet indexerar din webbplats, lagrar den i en vektordatabas och svarar på riktiga frågor med ditt eget innehåll som kontext.
Så här fungerar automationen
Hela n8n-arbetsflödet, från trigger till slutlig output:
n8n Workflow Template: Supabase + OpenAI: chatbot som kan din webbplats
flowchart LR
subgraph sg0["Enter Website Url Flow"]
direction LR
n1@{ icon: "mdi:cog", form: "rounded", label: "HTML Extract", pos: "b", h: 48 }
n2@{ icon: "mdi:robot", form: "rounded", label: "Default Data Loader", pos: "b", h: 48 }
n3@{ icon: "mdi:robot", form: "rounded", label: "Recursive Character Text Spl..", pos: "b", h: 48 }
n4@{ icon: "mdi:cube-outline", form: "rounded", label: "Supabase Vector Store", pos: "b", h: 48 }
n5["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/form.svg' width='40' height='40' /></div><br/>Enter Website Url"]
n6["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Website Data Scrapping"]
n7@{ icon: "mdi:cog", form: "rounded", label: "Convert to File", pos: "b", h: 48 }
n8@{ icon: "mdi:vector-polygon", form: "rounded", label: "Embeddings Cohere", pos: "b", h: 48 }
n1 --> n7
n7 --> n4
n8 -.-> n4
n5 --> n6
n2 -.-> n4
n6 --> n1
n3 -.-> n2
end
subgraph sg1["When chat message received Flow"]
direction LR
n0@{ icon: "mdi:play-circle", form: "rounded", label: "When chat message received", pos: "b", h: 48 }
n9@{ icon: "mdi:robot", form: "rounded", label: "Question & Answer Retrieve", pos: "b", h: 48 }
n10@{ icon: "mdi:cube-outline", form: "rounded", label: "Data From Supabase Vector St..", pos: "b", h: 48 }
n11@{ icon: "mdi:vector-polygon", form: "rounded", label: "Embeddings With Cohere", pos: "b", h: 48 }
n12@{ icon: "mdi:memory", form: "rounded", label: "Chat Memory", pos: "b", h: 48 }
n13@{ icon: "mdi:brain", form: "rounded", label: "OpenAI Chat Modell", pos: "b", h: 48 }
n12 -.-> n9
n13 -.-> n9
n11 -.-> n10
n0 --> n9
n10 -.-> n9
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n5,n0 trigger
class n2,n3,n9 ai
class n13 aiModel
class n12 ai
class n4,n10 ai
class n8,n11 ai
class n6 api
classDef customIcon fill:none,stroke:none
class n5,n6 customIcon
Problemet: din webbplats har svaren, men besökare lämnar ändå
De flesta webbplatser är ”informerande” men inte hjälpsamma i stunden. Någon landar på en prissida, fastnar på en detalj (begränsningar, integrationer, återbetalningar, uppsättningstid), och din navigering tar dem inte till rätt stycke. Då lämnar de. Eller så kontaktar de support och väntar. Under tiden lägger ditt team faktisk tid på att kopiera länkar, skriva om samma förklaringar och försöka vara konsekventa i e-post, chatt och DM. Det är inte svårt arbete. Det är oändligt arbete. Och när dina docs ändras fortsätter gamla svar att cirkulera.
Friktionen byggs på, särskilt när trafiken ökar och frågor kommer in dygnet runt.
- Besökare avbryter formulär och provperioder eftersom de inte får ett snabbt, tryggt svar.
- Supportens svar glider över tid, vilket betyder att det ”officiella” svaret beror på vem som svarade.
- Små uppdateringar i docs skapar stor förvirring eftersom gamla länkar och gamla instruktioner ligger kvar i veckor.
- En livechatt-widget utan ditt innehåll bakom sig blir ett artigt sätt att säga ”vi mejlar dig”.
Lösningen: indexera din webbplats i Supabase och svara sedan med OpenAI
Det här arbetsflödet gör valfri offentlig webbplats-URL till en webbplatsspecifik chatbot med en RAG-setup (retrieval-augmented generation, alltså ”sök i ditt innehåll först, skriv sedan svaret”). Det startar när du skickar in en sida eller webbplats-URL via en formulärtrigger. n8n hämtar HTML, extraherar den läsbara texten och konverterar den till ett strukturerat dokument du kan arbeta vidare med. Sedan delar arbetsflödet upp texten i mindre chunkar, genererar embeddings (en numerisk representation baserad på betydelse) och lagrar dessa vektorer plus metadata i Supabase. När en besökare ställer en fråga senare skapar arbetsflödet en embedding av frågan, kör en likhetssökning i Supabase och skickar bara de mest relevanta chunkarna till OpenAI så att svaret förankras i dina egna sidor.
Arbetsflödet börjar med att en URL skickas in för indexering och därefter rensas och chunkas innehållet för lagring. När chattmeddelanden kommer in hämtas de närmaste matchningarna från Supabase och OpenAI används för att producera ett tydligt svar baserat på den kontexten. Besökaren får ett svar direkt i chattgränssnittet, inte ett ärendenummer.
Det här får du: automation vs. resultat
| Vad det här arbetsflödet automatiserar | Resultat du får |
|---|---|
|
|
Exempel: så här ser det ut
Säg att din webbplats får 20 supportliknande frågor per dag via chatt och e-post. Om varje fråga tar cirka 6 minuter att läsa, hitta rätt docs-sida för och svara på, blir det ungefär 2 timmar per dag. Med det här arbetsflödet lägger du kanske 10 minuter på att skicka in URL:er för indexering när du publicerar uppdateringar, och sedan hanteras frågorna automatiskt med Supabase-hämtning och OpenAI-svar. Du granskar fortfarande specialfall, men de flesta ”grundfrågor” slutar nå ditt team.
Det här behöver du
- n8n-instans (testa n8n Cloud gratis)
- Alternativ för self-hosting om du föredrar det (Hostinger fungerar bra)
- Supabase för att lagra vektorer och köra likhetssökning.
- OpenAI för att generera förankrade chattsvar.
- OpenAI API-nyckel (hämta den i OpenAI-dashboarden).
Kunskapsnivå: Medel. Du kopplar konton, klistrar in API-nycklar och mappar några fält, men du bygger ingen app från grunden.
Vill du inte sätta upp det här själv? Prata med en automationsexpert (gratis 15-minuters konsultation).
Så fungerar det
En webbplats-URL skickas in. En formulärtrigger samlar in sidan (eller uppsättningen sidor) du vill att boten ska lära sig av, vilket ger en enkel ingång för ”indexera detta”.
Sidinnehållet extraheras och förbereds. n8n hämtar HTML via HTTP Request och sedan plockar HTML Extract ut den användbara texten. Texten konverteras till ett strukturerat, fil-liknande dokument så att det blir konsekvent för vidare bearbetning.
Ditt innehåll chunkas och embeddings skapas. En rekursiv text-chunker delar långa sidor i mindre sektioner och sedan genererar embedding-verktyget vektorer för varje chunk. Dessa vektorer och metadata lagras i Supabase vector store så att du kan hämta efter betydelse, inte bara nyckelord.
Frågor triggar hämtning och sedan ett svar. När ett chattmeddelande kommer in skapar agenten en embedding av frågan, frågar Supabase efter de närmast matchande chunkarna och skickar den kontexten till OpenAI:s chattmodell. Chattgränssnittet returnerar svaret direkt, med konversationsminne lagrat i Postgres så att följdfrågor förblir sammanhängande.
Du kan enkelt justera vilka sidor du indexerar och hur stora chunkarna ska vara utifrån dina behov. Se den fullständiga implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementering
Steg 1: Konfigurera formulärtriggern
Det här arbetsflödet börjar med att fånga en webbplats-URL via en offentlig formulärinlämning.
- Lägg till noden Website URL Form och behåll Form Title inställd på
Form. - Ställ in Form Description till
Enter Website Url. - I Form Fields säkerställer ni att fältetiketten är
Website Urlmed platshållarenEnter Website Url.
⚠️ Vanlig fallgrop: Fältetiketten måste vara exakt Website Url så att uttryck som {{$json['Website Url']}} tolkas korrekt längre fram i flödet.
Steg 2: Hämta och parsa webbplatsinnehåll
Formulärinlämningen matar sekvensen för HTML-hämtning och parsning: Website URL Form → Fetch Website HTML → Parse HTML Content.
- I Fetch Website HTML ställer ni in URL till
={{ $json['Website Url'] }}. - Behåll standardalternativen för Timeout på
30000och Max Redirects på5för att hantera långsamma eller omdirigerade webbplatser. - I Parse HTML Content behåller ni extraktionsnycklarna och selektorerna för
title,content,meta_descriptionochlinksenligt konfigurationen. - Koppla Fetch Website HTML till Parse HTML Content och sedan till Convert to JSON File.
Tips: Om er webbplats använder en anpassad layout, justera CSS-selektorerna i Parse HTML Content för att fånga rätt textblock.
Steg 3: Ladda, dela upp i chunkar och indexera dokument i Supabase
I det här steget förbereds det parsade innehållet för embeddings och lagras i er vektordatabas.
- I Convert to JSON File ställer ni in Operation till
toJson. - Konfigurera Recursive Text Chunker med Chunk Size
3000och Chunk Overlap500och koppla den till Standard Data Loader. - I Standard Data Loader ställer ni in Loader till
jsonLoaderoch Data Type tillbinary. - Lägg till metadata i Standard Data Loader med Name
website_urloch Value={{ $('Website URL Form').item.json['Website Url'] }}. - I Supabase Vector Index ställer ni in Mode till
insert, Table Name tilldocumentsoch Embedding Batch Size till100.
Autentiseringsuppgifter krävs: Anslut era supabaseApi-autentiseringsuppgifter i Supabase Vector Index.
Autentiseringsuppgifter krävs: Anslut era cohereApi-autentiseringsuppgifter för Cohere Embedding Builder. Det här embedding-verktyget är länkat till Supabase Vector Index—lägg till autentiseringsuppgifter via den överordnade embedding-anslutningen.
Steg 4: Konfigurera agenten för chatt-återhämtning och verktyg
Chattgränssnittet drivs av Incoming Chat Trigger och återhämtningsagenten som frågar Supabase-vektorlager.
- I Incoming Chat Trigger ställer ni in Mode till
webhookoch behåller Public aktiverat. - Öppna Retrieve Answer Agent och behåll System Message enligt konfigurationen för att säkerställa svar som är förankrade i dokumenten.
- Säkerställ att OpenAI Chat Model är ansluten till Retrieve Answer Agent som språkmodell och välj
gpt-4o-mini. - Konfigurera Supabase Retrieval Tool med Mode
retrieve-as-tool, Tool Namedocuments_knowledge_base, Table Namedocumentsoch Include Document Metadata inställt påfalse. - Ställ in Conversation Memory Store med Table Name
chat_memoryoch Context Window Length3.
Autentiseringsuppgifter krävs: Anslut era openAiApi-autentiseringsuppgifter i OpenAI Chat Model.
Autentiseringsuppgifter krävs: Anslut era supabaseApi-autentiseringsuppgifter för Supabase Retrieval Tool. Det här verktyget är länkat till Retrieve Answer Agent—lägg till autentiseringsuppgifter via den överordnade verktygsanslutningen.
Autentiseringsuppgifter krävs: Anslut era cohereApi-autentiseringsuppgifter för Cohere Embedding Tool. Det här embedding-verktyget är länkat till Supabase Retrieval Tool—lägg till autentiseringsuppgifter via den överordnade embedding-anslutningen.
Autentiseringsuppgifter krävs: Anslut era postgres-autentiseringsuppgifter för Conversation Memory Store. Det här minnesverktyget är länkat till Retrieve Answer Agent—lägg till autentiseringsuppgifter via den överordnade minnesanslutningen.
Steg 5: Testa och aktivera ert arbetsflöde
Validera både indexeringsflödet och chattens återhämtningsflöde innan ni går live.
- Trigga Website URL Form manuellt, skicka in en giltig URL och bekräfta att Supabase Vector Index tar emot dokumentchunkar.
- Använd test-webhooken i Incoming Chat Trigger för att skicka en fråga och verifiera att Retrieve Answer Agent returnerar ett svar som är förankrat i det lagrade innehållet.
- Kontrollera Supabase-tabellerna
documentsochchat_memoryför nyligen infogade poster. - Klicka på Activate i n8n för att aktivera produktionsanvändning när testerna lyckas.
Vanliga fallgropar
- Supabase-uppgifter kan löpa ut eller kräva specifika behörigheter. Om saker skapar fel, kontrollera först API-inställningarna i ditt Supabase-projekt och åtkomsten för service role key.
- Om du använder Wait-noder eller extern rendering varierar bearbetningstiderna. Öka väntetiden om efterföljande noder fallerar på tomma svar.
- Standardprompter i AI-noder är generiska. Lägg in er tonalitet tidigt, annars kommer du redigera output för alltid.
Vanliga frågor
Cirka en timme om ditt Supabase-projekt är klart.
Nej. Du kopplar konton, lägger till API-nycklar och justerar några fält i n8n.
Ja. n8n har ett gratis self-hosted-alternativ och en gratis provperiod på n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volym. Du behöver också räkna in kostnader för OpenAI API, vilket oftast är några dollar i månaden vid låg volym.
Två alternativ: n8n Cloud (hanterad drift, enklast att komma igång) eller self-hosting på en VPS. För self-hosting är Hostinger VPS prisvärd och hanterar n8n bra. Self-hosting ger dig obegränsat antal körningar men kräver grundläggande serverhantering.
Ja, men då vill du justera URL-inhämtningen och chunkningen. Du kan behålla samma Website URL Form-trigger och skicka in flera URL:er, eller byta till en listbaserad input (som ett Sheet) och loopa igenom sidor. Den enklaste ”kvalitetsspaken” är inställningarna i Recursive Text Chunker, eftersom chunkstorlek påverkar träffsäkerheten vid retrieval. Många team justerar också agentprompten i Retrieve Answer Agent för att matcha varumärkets tonalitet och lägger till en instruktion om att ”citera sidans titel”.
Oftast är det en felaktig nyckel eller fel projekt-URL som kopierats in i n8n. I Supabase, kontrollera att du använder rätt API-nyckel för vector store-åtgärderna (service role keys är vanligt för server-side-automationer) och att nödvändiga tillägg som pgvector är aktiverade. Om du anropar en RPC som match_documents, verifiera att funktionen finns och att dina tabell-/kolumnnamn matchar vad noden förväntar sig. Rate limits är mer sällsynta här, men de kan dyka upp om du försöker indexera många sidor i en och samma burst.
På n8n Cloud Starter kan du köra tillräckligt många exekveringar för en mindre webbplats, och större planer hanterar mer. Om du self-hostar finns ingen exekveringsgräns (det beror på din server). I praktiken är den verkliga begränsningen hur många chunkar du lagrar i Supabase och hur ofta du re-indexerar, eftersom det påverkar kostnad och hastighet vid retrieval. För många småföretag räcker det att börja med att indexera några dussin centrala sidor.
Ofta, ja, eftersom RAG-liknande arbetsflöden behöver förgreningslogik, chunkning och retrieval-steg som blir klumpiga (och dyra) i enklare automationverktyg. n8n ger dig också ett self-host-alternativ, vilket är en stor grej när chattvolymen växer. Zapier eller Make kan fortfarande fungera för lättviktiga ”FAQ-svarare”-upplägg, men de är inte lika smidiga när du ska skapa embeddings, söka i vektorer och behålla konversationsminne. Om du vill att någon kvalitetssäkrar bästa upplägg för din webbplats, prata med en automationsexpert.
När detta är live slutar din webbplats att fungera som en broschyr och börjar agera som en hjälpsam kollega. Sätt upp det, håll det uppdaterat och låt arbetsflödet hantera återkommande frågor.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.