Blog JSystems - uwalniamy wiedzę!
Blog JSystems - uwalniamy wiedzę!
Wiesz już, jak zbudować agenta w n8n. Ale co, jeśli chcesz, żeby Twój asystent AI siedział bezpośrednio na firmowej stronie jako pływające okienko czatu, z którym rozmawiają odwiedzający? Do tego najwygodniejsze są narzędzia wyspecjalizowane w agentach i ich publikacji. W tym przewodniku użyjemy Flowise - wizualnego kreatora agentów, który po zbudowaniu daje gotowy kod osadzenia czatu na stronie. Wszystko bez programowania.
Przewodnik jest dla osób nietechnicznych. Pokażemy, jak złożyć agenta z klocków (albo zacząć od gotowego szablonu), podłączyć model i - co najważniejsze - wkleić agenta na własną stronę jednym fragmentem kodu. Każdy etap na prawdziwym zrzucie z działającego Flowise (interfejs jest po angielsku, dlatego podajemy oryginalne nazwy pól).
n8n, które poznaliśmy przy agencie rozdzielającym maile, to przede wszystkim narzędzie do automatyzacji procesów - agent jest tam jednym z klocków przepływu. Flowise jest wyspecjalizowany w budowaniu agentów i chatbotów oraz w ich publikacji. Po zbudowaniu agenta dostajesz coś, czego n8n nie daje wprost: gotowy kod, który wkleja czat na Twoją stronę jako pływający widget w rogu ekranu.
Jeśli więc celem jest asystent dostępny dla odwiedzających witrynę - pomoc w wyborze produktu, odpowiedzi na pytania, wstępna obsługa - Flowise trafia w sam środek tej potrzeby. Działa na Twoim serwerze i jest darmowy; płacisz tylko za zużycie modelu językowego.
Flowise instaluje się raz na Twoim serwerze (zwykle robi to dział IT albo administrator - to jednorazowa czynność techniczna). W codziennej pracy dostajesz po prostu adres w przeglądarce oraz e-mail i hasło. Wchodzisz pod ten adres, wpisujesz dane i klikasz Login - i już jesteś w panelu. Od tego momentu wszystko robisz myszką, bez wiersza poleceń.
Po zalogowaniu widzisz pulpit. Najważniejsze jest menu po lewej stronie:
Nie musimy budować agenta od zera. W menu po lewej klikamy Marketplaces - otwiera się galeria gotowych szablonów. W polu wyszukiwania wpisujemy Tool Agent: to gotowy agent, który potrafi korzystać z narzędzi.
Klikamy kartę Tool Agent. Flowise pokazuje podgląd szablonu - gotowy przepływ klocków - a w prawym górnym rogu jest przycisk Use Template. Klikamy go i szablon ląduje na płótnie do edycji.
Na płótnie widać cztery połączone klocki spięte z węzłem Tool Agent (po prawej):
To gotowy szkielet agenta. Linie między klockami mówią, co jest do czego podłączone - narzędzia i pamięć „wpinają się" w węzeł agenta. Cały ten obraz widzisz na zrzucie otwierającym artykuł.
Jedyna rzecz, którą musimy uzupełnić, to klucz do modelu. Klikamy węzeł ChatOpenAI i w polu Connect Credential dodajemy swój klucz (opcja „Create New", wklejasz klucz OpenAI i zapisujesz). Niżej wybieramy model - w szablonie jest ekonomiczny gpt-4o-mini, w zupełności wystarczający do obsługi czatu.
Skąd wziąć ten klucz OpenAI? Zakładasz (albo logujesz się na) konto na platform.openai.com, a następnie wchodzisz do sekcji API keys - menu profilu w prawym górnym rogu, pozycja „API keys", albo od razu adres platform.openai.com/api-keys. Klikasz Create new secret key, a wygenerowany ciąg zaczynający się od sk- kopiujesz i to jego wklejasz we Flowise. Uwaga: cały klucz widać tylko raz, w chwili utworzenia - skopiuj go od razu. Żeby model odpowiadał, konto OpenAI musi mieć też doładowane środki (zakładka Billing; kilka dolarów wystarcza na tysiące krótkich rozmów).
I to tyle konfiguracji. Narzędzie wyszukiwania (Serp API) możesz na początek pominąć albo usunąć - kalkulator i sam model w zupełności wystarczą, żeby agent działał i odpowiadał, a w razie pytania o obliczenie skorzystał z narzędzia.
Klikamy ikonę zapisu (dyskietka, prawy górny róg). Flowise pyta o nazwę agenta - wpisujemy ją w okienku Save New Chatflow i klikamy Save. Od tej chwili agent jest zapisany i pojawia się na liście Chatflows.
Po prawej stronie płótna jest okno podglądu czatu (fioletowy dymek, przycisk „Chat") - to tam testujesz agenta przed publikacją. Piszesz wiadomość, agent odpowiada, a gdy zadasz pytanie o obliczenie, sięga po kalkulator. Jeśli odpowiedzi są sensowne, możesz publikować.
Oto przewaga Flowise. Klikamy ikonę </> (API Endpoint) w prawym górnym rogu i przechodzimy na zakładkę Embed. Flowise generuje gotowy fragment kodu - krótki tag <script>, który wystarczy wkleić w sekcję <body> Twojej strony. Po zapisaniu na stronie pojawia się pływający przycisk czatu w rogu ekranu, a po kliknięciu - okno rozmowy z Twoim agentem.
Dla najczęstszego wariantu (Popup Html) kod wygląda tak - kopiujesz go guzikiem i wklejasz na stronę, podmieniając tylko chatflowid oraz adres swojego Flowise:
<script type="module">
import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
Chatbot.init({
chatflowid: "TWOJ-CHATFLOW-ID",
apiHost: "https://twoj-serwer-flowise"
})
</script>
Masz do wyboru kilka form publikacji:
Dla zwykłej strony WordPress wybierasz wariant Popup Html, kopiujesz kod i wklejasz go w blok „Własny HTML". Gotowe - agent jest na stronie.
A oto jak to wygląda na żywo. Poniżej zwykła strona sklepu, na której wkleiliśmy jeden fragment kodu: w prawym dolnym rogu pojawił się dymek czatu, a po kliknięciu klient rozmawia z naszym agentem bez opuszczania strony. Zapytał o cenę laptopa po rabacie - agent policzył i odpowiedział od ręki. Na tym etapie agent korzysta z narzędzia, które szablon ma podpięte od razu - kalkulatora - dlatego sprawnie liczy rabat. Żeby odpowiadał także na pytania o Twoją konkretną ofertę (produkty, ceny, regulamin), trzeba dać mu firmową wiedzę; jak to zrobić, pokazujemy w dalszej części artykułu, w sekcji Wiedza firmowa.
Przykład z życia. Sklep internetowy wkleja jeden fragment kodu na wszystkie podstrony i zyskuje asystenta, który odpowiada na pytania o dostawę, zwroty i dostępność - o każdej porze, bez angażowania obsługi. Te same pytania, które wcześniej spływały mailem i przez formularz, agent domyka od ręki w oknie czatu; do człowieka trafiają tylko sprawy naprawdę nietypowe. Wdrożenie to dosłownie skopiowanie kodu z zakładki Embed - reszta była gotowa wcześniej.
Domyślnie czat ma neutralny, niebieski wygląd Flowise. Możesz go jednak w pełni dopasować do swojej marki - zmienić tytuł, kolory, wiadomość powitalną, awatar czy ikonę przycisku. Ustawienia znajdziesz w tym samym oknie </> (API Endpoint), w zakładce Share Chatbot (sekcje „Title Settings" i „General Settings").
Dla osadzonego widgetu te same ustawienia podajesz wprost w kodzie, w obiekcie theme. Wystarczy rozbudować wcześniejszy fragment osadzenia - poniżej przykład w barwach marki (czerwień JSystems, własny tytuł i powitanie):
<script type="module">
import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
Chatbot.init({
chatflowid: "TWOJ-CHATFLOW-ID",
apiHost: "https://twoj-serwer-flowise",
theme: {
button: { backgroundColor: "#E02D33", size: 52 },
chatWindow: {
title: "Asystent NovaTech",
titleBackgroundColor: "#E02D33",
welcomeMessage: "Cześć! W czym mogę pomóc?",
botMessage: { backgroundColor: "#f2f4f7", textColor: "#1a1f36" },
userMessage: { backgroundColor: "#E02D33", textColor: "#ffffff" },
textInput: { sendButtonColor: "#E02D33" }
}
}
})
</script>
Efekt widać od razu - ten sam czat, ale w kolorach Twojej marki, z własnym tytułem i powitaniem:
Ten agent to punkt wyjścia. Rozwiniesz go bez kodu w kilku kierunkach.
Domyślnie agent zna tylko to, co „umie" model, i potrafi użyć podpiętych narzędzi (u nas kalkulatora). Żeby odpowiadał także o Twojej konkretnej ofercie - produktach, cenniku, regulaminie, zasadach zwrotów - musisz dać mu bazę wiedzy: wgrywasz do Flowise własne dokumenty, a agent uczy się z nich odpowiadać. To mechanizm zwany RAG (odpowiedzi wzbogacone wyszukiwaniem w Twoich dokumentach). We Flowise robisz to bez kodu - pokażemy to na FAQ przykładowego sklepu.
Krok 1 - utwórz bazę wiedzy. W menu po lewej wchodzisz w Document Stores i klikasz Add New. Nadajesz bazie nazwę (np. „Baza wiedzy NovaTech") i krótki opis, po czym zatwierdzasz przyciskiem Add.
Krok 2 - wgraj dokumenty. W bazie klikasz Add Document Loader i wybierasz źródło. Najprościej zacząć od Plain Text - wklejasz treść (regulamin, cennik, FAQ) wprost w pole „Text". Do wyboru są też loadery plików (PDF, Word, CSV), stron WWW i innych źródeł.
Wolisz wgrać gotowy plik? Zamiast wklejać tekst, w tym samym oknie „Add Document Loader" wybierz loader plikowy - np. Pdf File, Docx File (Word), Csv File albo uniwersalny File Loader, który przyjmuje różne formaty. To wygodne, gdy masz gotowy regulamin czy cennik w PDF lub Wordzie.
Po wybraniu loadera klikasz Upload File i wskazujesz plik z dysku - nazwa pojawia się w polu „File". Dla PDF ustawisz jeszcze np. „Pdf Usage" (czy traktować każdą stronę jako osobny dokument). Dalej jest tak samo jak przy tekście: klikasz Process, a potem embeddingi i upsert (kroki 3 i 4 poniżej).
Krok 3 - przetwórz na fragmenty. Klikasz Process. Flowise tnie dokument na mniejsze fragmenty (chunki) - to one będą przeszukiwane. Baza pokazuje status SYNC oraz liczbę fragmentów i znaków.
Krok 4 - włącz wyszukiwanie (embeddingi i baza wektorowa). W menu More Actions wybierasz Upsert All Chunks. Wskazujesz model OpenAI Embedding (z Twoim kluczem) oraz miejsce zapisu wektorów (np. Faiss - lokalny plik na serwerze). Klikasz Upsert - Flowise zamienia fragmenty na wektory. To dzięki nim agent „rozumie" pytania i trafia do właściwego fragmentu.
Krok 5 - sprawdź, że działa. W More Actions wybierasz Retrieval Query, zadajesz pytanie po ludzku i widzisz, który fragment dokumentów Flowise zwróci. Na pytanie „Ile dni mam na zwrot i czy dostawa jest darmowa?" baza od razu wskazuje właściwy fragment regulaminu - z zasadą zwrotu w 30 dni i darmową dostawą powyżej 200 zł.
Krok 6 - podłącz bazę do agenta. Wracasz na płótno agenta i z panelu + (Add Node) dodajesz dwa klocki: Document Store (Vector) - to on przeszukuje Twoją bazę - oraz Retriever Tool, czyli narzędzie, którego użyje agent.
W klocku Document Store (Vector), w polu Select Store, wskazujesz utworzoną wcześniej bazę - u nas „Baza wiedzy NovaTech". Łączysz jego wyjście Retriever z wejściem klocka Retriever Tool, a wyjście Retriever Tool - z wejściem Tools węzła Tool Agent (dokładnie tak jak wcześniej kalkulator). Od tej chwili, gdy klient zapyta o zwroty, dostawę czy cennik, agent sięgnie do Twoich dokumentów i odpowie na ich podstawie.
To ten sam mechanizm RAG, tyle że tutaj złożony w całości we Flowise. Jeśli chcesz porównać inne, pozaflowise'owe sposoby na wiedzę firmową bez kodowania, opisaliśmy je osobno w artykule o czterech sposobach na własnego asystenta AI z wiedzą firmy.
Narzędzie dodajesz jak każdy inny klocek: klikasz + (Add Node), wyszukujesz je i przeciągasz na płótno, a jego wyjście łączysz z wejściem Tools węzła Tool Agent. Poza kalkulatorem masz do wyboru m.in. Gmail (wysyłka i obsługa maili), zapytanie HTTP do firmowego systemu, wyszukiwarkę i wiele innych.
Własny model. Zamiast modelu w chmurze możesz wskazać model uruchomiony lokalnie, żeby dane nie wychodziły z firmy. Inny kanał: głos. Zamiast czatu tekstowego możesz zbudować agenta głosowego, który rozmawia po polsku - też bez kodu.
Zbudowaliśmy agenta wizualnie, opublikowaliśmy go jako czat na stronie i daliśmy mu firmową wiedzę - wszystko bez ani jednej linijki kodu pisanej od zera. Efekt: asystent, który siedzi na Twojej witrynie i odpowiada na podstawie Twoich dokumentów. Kluczowe etapy:
Od tego momentu masz na stronie asystenta, który pracuje przez całą dobę i potrafi odpowiadać na podstawie Twoich dokumentów. Kolejny poziom to podpięcie go do firmowych systemów i realnych działań - zamówień, zgłoszeń czy integracji - ale to już temat na poważniejszą pracę z agentami.
Na szkoleniu „Tworzenie agentów AI" przejdziesz przez budowę agentów z narzędziami, wiedzą firmową i publikacją - krok po kroku, z naciskiem na praktykę i realne zastosowania.
Komentarze (0)
Brak komentarzy...