Andrzej Klusiewicz

Posted on Aug 20

Zbuduj agenta AI we Flowise i wstaw go jako czat na stronie - bez kodu

#ai #automatyzacja #agentai #nocode

Widget czatu na stronie, który realnie rozumie kontekst firmy - budowany wizualnie we Flowise, bez backendu. Krok po kroku od modelu, przez pamięć, po bazę wiedzy.

Agenci AI w firmie

Kompletny no-code agent złożony wizualnie z klocków w Flowise: model językowy, narzędzia (m.in. kalkulator), pamięć oraz baza wiedzy (Document Store + Retriever Tool ze wskazaną bazą „Baza wiedzy NovaTech") - wszystko podłączone do węzła agenta. Zbudujemy to krok po kroku.

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).

Z tego artykułu dowiesz się:

czym Flowise różni się od n8n i kiedy go wybrać,
jak uruchomić Flowise i zalogować się do panelu,
jak zacząć od gotowego szablonu agenta (Tool Agent) zamiast budować od zera,
jak podłączyć model językowy (swój klucz) do agenta,
jak zapisać i przetestować agenta w oknie podglądu,
jak opublikować agenta jako czat na stronie - gotowym kodem osadzenia,
jak dopasować wygląd czatu do swojej marki (kolory, tytuł, powitanie),
jak podłączyć agentowi własną wiedzę firmową (regulaminy, cenniki, FAQ), żeby odpowiadał na pytania o Twoją ofertę,
jak rozbudować go o kolejne narzędzia (np. wysyłkę maili).

1. Dlaczego osobne narzędzie do agentów

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.

2. Otwieramy Flowise i logujemy się

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ń.

Ekran logowania Flowise. Podajesz e-mail i hasło do panelu, resztę pracy wykonasz już w przeglądarce.

3. Pulpit Flowise: co gdzie jest

Po zalogowaniu widzisz pulpit. Najważniejsze jest menu po lewej stronie:

Chatflows - tu lądują zapisane agenty i chatboty (Twoja lista projektów),
Marketplaces - galeria gotowych szablonów, od której zaraz zaczniemy,
Credentials - miejsce na klucze do modeli, a niżej Tools (narzędzia) i API Keys (dostęp programistyczny).

Pulpit Flowise. Za chwilę klikniemy w menu Marketplaces, żeby zacząć od gotowego szablonu zamiast budować agenta od zera.

4. Zaczynamy od gotowego szablonu Tool Agent

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.

Galeria szablonów (Marketplaces) po wpisaniu „Tool Agent". Wybieramy kartę Tool Agent - opisaną jako agent korzystający z narzędzi i modelu.

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.

Podgląd szablonu Tool Agent. Przycisk Use Template (prawy górny róg) kopiuje ten gotowy przepływ na Twoje płótno.

Na płótnie widać cztery połączone klocki spięte z węzłem Tool Agent (po prawej):

ChatOpenAI - model językowy, „mózg" agenta,
Calculator - narzędzie do obliczeń (działa od razu),
Serp API - narzędzie wyszukiwania w internecie (opcjonalne, wymaga własnego klucza),
Buffer Memory - pamięć rozmowy, dzięki której agent pamięta kontekst.

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ł.

Cztery klocki, z których zbudujesz agenta: model językowy, narzędzia, pamięć i węzeł Agent, który tym wszystkim steruje. Na płótnie łączysz je liniami - bez kodu.

5. Podłączamy model językowy

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).

Węzeł ChatOpenAI: w polu „Connect Credential" podłączasz swój klucz do modelu, a wyżej wybierasz model (tu gpt-4o-mini). To jedyne miejsce, gdzie wklejasz dane dostępowe.

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.

6. Zapisujemy i testujemy

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.

Zapis agenta: po kliknięciu dyskietki Flowise prosi o nazwę (okno „Save New Chatflow"). Wpisujemy ją i klikamy „Save".

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ć.

Test w oknie podglądu: pytamy „policz 15% rabatu od 480 zł", a agent - sięgając po kalkulator - odpowiada „72 zł, cena po rabacie 408 zł". Znaczniki „calculator" nad odpowiedzią pokazują, że użył narzędzia.

Wskazówka. Zanim opublikujesz agenta dla klientów, przetestuj go na kilkunastu realnych pytaniach i dopracuj instrukcję (jak ma się zachowywać, czego nie robić, kiedy odsyłać do człowieka). Dobrze ustawiona instrukcja to różnica między pomocnym asystentem a takim, który zmyśla.

7. Publikujemy agenta jako czat na stronie

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.

Okno „Embed": gotowy kod (tag script), który wklejasz na stronę, by osadzić czat agenta. Są też warianty: pełna strona, React, a także zwykłe wywołanie API (Python, JavaScript, cURL) i publiczny link „Share Chatbot".

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:

Kopiuj

<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:

Popup / Fullpage Html - pływający dymek w rogu albo czat na całą stronę,
Popup / Fullpage React - gdy Twoja strona jest zbudowana w React,
Share Chatbot - publiczny link do agenta jako osobnej strony (bez osadzania),
API (Python, JavaScript, cURL) - gdy chcesz wywołać agenta z własnej aplikacji.

Formy publikacji to zakładki u góry okna: Embed, Python, JavaScript, cURL i „Share Chatbot" (tu otwarta) - gotowy, publiczny link do agenta jako osobnej strony, z opcją personalizacji tytułu i kolorów.

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.

Efekt końcowy: ten sam agent osadzony na zwykłej stronie sklepu. Klient klika dymek w rogu, pyta o cenę po rabacie, a agent odpowiada na miejscu (tu policzył 480 zł minus 15% = 408 zł).

Ten sam agent, cztery drogi do odbiorcy: pływający dymek na stronie, czat na całą stronę, publiczny link albo wywołanie przez API. Wybierasz to, co pasuje do Twojego przypadku.

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.

8. Dostosuj wygląd czatu do siebie

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").

Panel personalizacji: ustawiasz tytuł (np. „Asystent NovaTech"), kolory nagłówka i tekstu, awatar oraz wiadomość powitalną. Niżej ustawisz też kolory dymków bota i użytkownika oraz przycisku wysyłania.

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):

Kopiuj

<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:

Efekt personalizacji na stronie sklepu: czerwony nagłówek „Asystent NovaTech", własne powitanie, dymek użytkownika w kolorze marki i czerwony przycisk wysyłania.

9. Co dalej: wiedza firmowa i więcej narzędzi

Ten agent to punkt wyjścia. Rozwiniesz go bez kodu w kilku kierunkach.

Wiedza firmowa - odpowiedzi o Twojej ofercie krok po kroku

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 1: tworzysz bazę wiedzy w Document Stores - podajesz jej nazwę i opis.

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ł.

Krok 2: przez loader „Plain Text" wklejasz firmowe dokumenty - tu regulamin, dostawę, zwroty i FAQ sklepu.

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.

Loadery plików w Flowise: Csv, Docx (Word), Pdf oraz uniwersalny „File Loader" (przyjmuje różne formaty). Wybierasz ten, w którym masz dokumenty.

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).

Loader „File Loader" z wgranym plikiem PDF (cennik_novatech.pdf). Klikasz „Upload File", wybierasz dokument z dysku, a resztę - fragmenty i wyszukiwanie - Flowise obsłuży tak samo jak dla wklejonego tekstu.

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 3: po „Process" baza ma status SYNC i pokazuje wgrany dokument 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 4: po „Upsert" Flowise potwierdza dodanie dokumentu do bazy wektorowej („Added 1") - baza jest gotowa do wyszukiwania.

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 5: w „Retrieval Query" testujesz bazę - pytanie o zwroty i dostawę zwraca właściwy fragment regulaminu (30 dni, darmowa dostawa 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.

Krok 6: na płótnie agenta dodajesz m.in. Retriever Tool („Use a retriever as allowed tool for agent") - narzędzie, przez które agent korzysta z bazy wiedzy.

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.

Wskazanie bazy: w polu „Select Store" wybierasz swoją bazę wiedzy (tu „Baza wiedzy NovaTech"), a wyjście „Retriever" łączysz z klockiem Retriever Tool, którego agent użyje jako narzędzia.

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.

Więcej narzędzi

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.

Dokładanie narzędzia: tu wyszukany klocek Gmail („Perform Gmail operations...") - po przeciągnięciu na płótno i podłączeniu do agenta ten potrafi np. wysłać maila.

Własny model i kanał głosowy

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.

10. Podsumowanie

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:

Twój agent krok po kroku

Logowanie - otwórz Flowise w przeglądarce i zaloguj się do panelu.
Szablon - w Marketplaces znajdź „Tool Agent" i kliknij Use Template.
Model - podłącz swój klucz w węźle ChatOpenAI.
Zapis i test - nazwij agenta i sprawdź go w oknie podglądu czatu.
Publikacja - skopiuj kod z zakładki Embed i wklej na stronę.
Wygląd - dopasuj kolory, tytuł i powitanie czatu do swojej marki.
Wiedza firmowa - wgraj dokumenty do bazy (Document Store), zrób upsert i podłącz ją agentowi klockiem Retriever Tool.
Więcej narzędzi - dołóż kolejne klocki (np. wysyłkę maili), łącząc je z wejściem Tools agenta.

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.

Chcesz tworzyć agentów AI gotowych do wdrożenia w firmie?

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.

Szkolenie „Tworzenie agentów AI" - zobacz program i terminy

To szkolenie może być dofinansowane dla Ciebie z KFS lub BUR.

★★★★★Średnia ocena naszych szkoleń w Google: 5/5

DEV Community