Jak postavit AI chatbota pro web za jedno odpoledne.

Chatbot na webu už dávno není věc za statisíce. Za jedno soustředěné odpoledne dnes postavíš asistenta, který odpoví na běžné dotazy, nasměruje zákazníka a předá ti jen to, co potřebuje člověka. Ukážu ti přesný postup, který sám používám, a hlavně místa, kde se to dá pokazit.

Co chatbot za odpoledne zvládne a co ne

Buďme realisté. Za odpoledne nepostavíš asistenta, který vyřeší cokoli. Postavíš ale velmi užitečnou věc: bota, který zná tvoje produkty a časté dotazy, odpovídá lidsky a u složitějšího dotazu předá štafetu tobě. To pokryje většinu konverzací na běžném firemním webu. A právě tahle většina je důležitá. Velká část dotazů se opakuje pořád dokola: kdy máte otevřeno, kolik to stojí, máte to skladem, jak to funguje. Když na tyhle dotazy odpoví bot okamžitě a v kteroukoli hodinu, zvedneš spokojenost zákazníků a sobě uvolníš ruce. Pár opravdu složitých případů, které bot nezvládne, čistě předá člověku, a to je v pořádku.

• Zvládne: odpovědi na otevírací dobu, ceny, dostupnost, jak něco funguje, kde co najít.
• Zvládne: sběr kontaktu a předání poptávky.
• Nezvládne dobře bez přípravy: odpovědi z tvých interních dokumentů (na to je potřeba RAG, viz dál).
• Nemá dělat: závazné sliby, právní rady, samostatné objednávky bez kontroly.

Krok 1: napiš, co má bot umět a jak se má chovat

Než sáhneš na kód, napiš si zadání obyčejnou češtinou. Co je cílem boota, jaký má mít tón, co smí a co ne. Tohle je nejdůležitější půlhodina celého odpoledne, protože z toho vznikne systémový prompt, který chování boota určuje.

Jsi asistent na webu firmy {nazev}.
Mluvíš česky, vykáš, jsi stručný a přátelský.
Odpovídáš jen na dotazy o našich službách a webu.
Když něco nevíš, řekneš to a nabídneš kontakt.
Nikdy si nevymýšlíš ceny ani termíny.
Když zákazník chce nabídku, požádáš o e-mail.

Krok 2: napoj se na jazykový model přes API

Srdcem boota je volání na API jazykového modelu. Pošleš systémový prompt, historii konverzace a novou zprávu uživatele, vrátí se ti odpověď. Princip je u všech velkých poskytovatelů stejný.

const res = await fetch("https://api.poskytovatel.tld/v1/chat", {
  method: "POST",
  headers: {
    "Authorization": "Bearer " + process.env.AI_API_KEY,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    model: "maly-rychly-model",
    messages: [
      { role: "system", content: systemovyPrompt },
      ...historie,
      { role: "user", content: zprava }
    ]
  })
})

Klíč k API drž vždy na serveru, nikdy ne v prohlížeči. Kdybys ho dal do frontendu, kdokoli ho z webu vytáhne a propálí ti kredit. Tohle je nejčastější začátečnická chyba, kterou vídám, a stojí lidi reálné peníze. Detailně rozebírám bezpečné napojení v článku o napojení na AI API.

Vyplatí se taky hned od začátku posílat modelu historii konverzace, ne jen poslední zprávu. Bez ní bot nechápe souvislosti a ptá se znova na věci, které už zákazník řekl. Stačí pár posledních zpráv, nemusíš tahat celou konverzaci. A pozor na délku, protože každá zpráva v historii stojí peníze i čas. U dlouhých konverzací starší zprávy postupně zkracuj nebo shrň.

Krok 3: postav malý backend mezi web a model

Mezi tvůj web a model patří jednoduchý server, který drží klíč, posílá systémový prompt a hlídá, kolik toho jeden návštěvník pošle. Bez tohohle mezičlánku se ti stane jedna ze dvou věcí: buď uniknou klíče, nebo ti někdo pošle deset tisíc dotazů a vyfakturuje ti je.

1. Vytvoř jednu serverovou funkci nebo endpoint, který přijme zprávu.
2. Na serveru doplň systémový prompt a zavolej model.
3. Vrať jen odpověď, nikdy ne klíč ani interní prompt.
4. Přidej limit na počet zpráv z jedné IP za minutu.

Krok 4: widget na stránku

Vizuální část je nejmenší starost. Plovoucí bublina vpravo dole, po kliknutí okno s historií zpráv a polem na text. Můžeš použít hotovou knihovnu nebo si napsat vlastní, je to pár desítek řádků. Důležité je jen napojit ho na svůj endpoint z předchozího kroku, ne přímo na model. Pár drobností ale rozhoduje o tom, jestli widget působí profesionálně. Ukaž stav píše, ať zákazník ví, že se něco děje. Měj uvítací zprávu, která hned napoví, na co se může ptát. A drž barvy i písmo widgetu v souladu se zbytkem webu, aby nepůsobil jako nalepený cizí prvek.

Krok 5: testuj jako protivný zákazník

Než boota pustíš na web, hodinu se ho snaž rozbít. Ptej se mimo téma, zkoušej ho navést, ať řekne nesmysl, předstírej naštvaného zákazníka. To, co najdeš, doplníš do systémového promptu. Tahle hodina dělá rozdíl mezi botem, který ti dělá radost, a botem, který tě ztrapní.

Chatbot je tak dobrý, jak dobře jsi mu řekl, co nemá dělat. Většina trapasů vzniká z toho, co v promptu chybí.

Když má bot odpovídat z tvých dokumentů

Pokud chceš, aby bot odpovídal z tvých konkrétních materiálů, ceníku nebo manuálů, samotný prompt nestačí. Potřebuješ takzvané RAG, kdy bot před odpovědí najde relevantní úryvky z tvých dokumentů a odpovídá z nich. Je to o krok náročnější, ale pořád zvládnutelné. Sepsal jsem to prakticky v článku RAG prakticky.

Tabulka: co stihneš za odpoledne

Časté dotazy

Potřebuju umět programovat?

Pro vlastní bezpečné řešení se trocha kódu hodí, hlavně kvůli serveru s klíčem. Existují i hotové platformy bez kódu, ale narazíš u nich na limity v napojení na vlastní data a v ceně při větším provozu.

Kolik chatbot stojí v provozu?

U malých rychlých modelů jsou náklady na běžný firemní web obvykle v řádu desítek až nižších stovek korun měsíčně. S limity na počet zpráv to máš plně pod kontrolou.

Může bot odpovídat špatně?

Může, proto mu jasně řekneš, že si nemá vymýšlet a u nejistoty má nabídnout kontakt. Pro odpovědi z dokumentů použij RAG, který riziko výmyslů výrazně snižuje.

Jestli chceš chatbota, který opravdu zná tvoje data a zapadne do webu i vizuálně, postavím ti ho na míru. Napiš mi přes kontakt a probereme, co má u tebe umět.