Pro začátečníky

Jak si naprogramovat vlastního AI Chatbota

Mnoho lidí si myslí, že vytvořit ChatGPT klon je složité. Pravdou ale je, že na pozadí jde o poměrně jednoduchý princip. V tomto návodu nebudeme nic testovat – rovnou se podíváme na to, jak si takovou aplikaci napsat řádek po řádku.

Co se v tomto návodu naučíte?

Jak navrhnout vzhled chatovacího okna v HTML.
Jak vytvořit "paměť", aby si AI pamatovala konverzaci.
Jak nastavit umělé inteligenci "osobnost" (System Prompt).
Jak odeslat data na AI model a vypsat odpověď na obrazovku.

1 Příprava HTML (Rozhraní)

Začneme tím nejzákladnějším – kostrou aplikace. Potřebujeme místo, kam se budou vypisovat zprávy (historie chatu), textové pole pro zadání dotazu a tlačítko odeslat.

index.html

<!-- Hlavní kontejner pro chat -->
<div id="chat-container">
  
  <!-- Místo pro vypsání zpráv -->
  <div id="messages"></div>

  <!-- Formulář pro odeslání -->
  <form id="chat-form">
    <input type="text" id="chat-input" placeholder="Napište zprávu..." />
    <button type="submit">Odeslat</button>
  </form>

</div>

2 Tajemství paměti AI

Jazykové modely (LLM) jako GPT-4 samy o sobě nemají žádnou paměť. Pokaždé, když jim pošlete zprávu, vidí vás poprvé. Jak to tedy, že ChatGPT ví, o čem jste se bavili před chvílí?

Fígl je v tom, že při každém dotazu odesíláme celou historii konverzace znovu a znovu. Vytvoříme si tedy v JavaScriptu pole (seznam).

main.js

// Prázdný seznam pro uložení chatu
let messageHistory = [];

// Každá zpráva má roli: 
// 'user' = vy (člověk)
// 'assistant' = robot (AI)

// Když uživatel něco napíše, přidáme to do seznamu:
messageHistory.push({ 
  role: 'user', 
  content: 'Ahoj, jak se máš?' 
});

3 System Prompt (Osobnost)

Než vůbec pošleme historii zpráv, musíme AI říct, jak se má chovat. K tomu slouží speciální role s názvem system. Tato zpráva se vždy odesílá jako první, je pro uživatele neviditelná, ale model ji poslušně následuje.

const systemPrompt = {
  role: 'system',
  content: 'Jsi sarkastický robot. Odpovídej vtipně a stručně.'
};

💡 Tip: Zde můžete definovat formát výstupu, zakázat některá témata, nebo nařídit, aby AI mluvila jako pirát.

4 Zavolání modelu (Odeslání)

Teď, když máme systemPrompt a messageHistory, je čas zavolat server. V prostředí Miniapps k tomu používáme funkci miniappsAI.callModel(). Nezapomeňte specifikovat ID modelu (např. GPT-4o Mini).

// Připravíme kompletní pole zpráv (System prompt + historie)
const zprávyProModel = [
  systemPrompt,
  ...messageHistory
];

// Pošleme požadavek (toto chvíli trvá, proto používáme 'await')
const odpoved = await miniappsAI.callModel({
  modelId: '91cbae37-9d98-4f54-9917-e28c164697a6',
  messages: zprávyProModel
});

// Získáme čistý text z odpovědi
const textOdpovedi = miniappsAI.extractText(odpoved);

// Uložíme odpověď bota do paměti chatu!
messageHistory.push({ role: 'assistant', content: textOdpovedi });

5 Finální JavaScript Kód

Pojďme to spojit do funkčního celku. Navážeme událost na odeslání formuláře (když uživatel klikne na "Odeslat") a přidáme funkci pro vykreslení bublin v HTML.

main.js (kompletní logika)

const form = document.getElementById('chat-form');
const input = document.getElementById('chat-input');
const messagesDiv = document.getElementById('messages');

let messageHistory = [];

form.addEventListener('submit', async (e) => {
  e.preventDefault(); // Zabrání obnovení stránky
  
  const text = input.value.trim();
  if (!text) return;

  // 1. Přidání zprávy uživatele a vyčištění pole
  input.value = '';
  messageHistory.push({ role: 'user', content: text });
  
  // Vykreslení bubliny uživatele
  messagesDiv.innerHTML += `<div class="user">${text}</div>`;

  try {
    // 2. Zavolání AI
    const result = await miniappsAI.callModel({
      modelId: '91cbae37-9d98-4f54-9917-e28c164697a6',
      messages: [
        { role: 'system', content: 'Jsi pomocník. Mluv česky.' },
        ...messageHistory
      ]
    });

    // 3. Zpracování a vykreslení odpovědi
    const botText = miniappsAI.extractText(result);
    messageHistory.push({ role: 'assistant', content: botText });
    
    messagesDiv.innerHTML += `<div class="bot">${botText}</div>`;

  } catch (error) {
    console.error("Chyba:", error);
    messagesDiv.innerHTML += `<div class="error">Něco se pokazilo.</div>`;
  }
});

Guía: Cómo crear un chat de IA

Návod: Vlastní AI Chat