Implementace AI do moderních aplikací

O to víc mě potěšilo, když za námi přišel klient s požadavkem integrovat AI do jeho nově vznikající interní aplikace. Šlo o rozsáhlý systém pro zpracování škodních událostí a AI měla celý proces zrychlit a zjednodušit. Klient už AI používal formou chatu, ale chtěl ji posunout o úroveň dál.  Mít chytrého asistenta přímo v aplikaci, bez přepínání oken, bez ručního kopírování dat a s automatickým předáváním výstupů tam, kam patří.

Zadání znělo jednoduše: „Chceme v aplikaci používat AI jako je ChatGPT“. Jenže aby AI fungovala skutečně přínosně, je potřeba začít od úplného začátku. A právě o to bych se s vámi dnes chtěla podělit. Nejen jak přímo integrovat AI do aplikace, ale jak pojmout celý proces tak aby na jeho konci byl skvělý produkt a ne katastrofa.

Analýza účelu aneb na co je vlastně AI potřeba?

Než začnete řešit modely, providery nebo samotnou implementaci, je potřeba udělat jednu zdánlivě jednoduchou věc: zastavit se a přemýšlet.

Vemte si kávu, najděte si klidný kout nebo zasedačku, zavřete se tam a položte si úplně základní, ale naprosto klíčovou otázku:

„Potřebujeme na tento případ vůbec AI?“

Tahle otázka není o tom, jestli je AI přínos pro lidstvo, nebo jestli ji máme používat „protože je moderní“. Jde čistě o to, zda je pro problém, který řešíte, skutečně tou správnou volbou.

AI totiž není potřeba tam, kde:

• řešíte jednoduché podmínky
• zobrazujete obsah na základě voleb uživatele
• pracujete s daty, které bez problémů zpracuje backend

V těchto situacích byste jen zbytečně pálili tokeny na něco, co zvládne běžná logika aplikace mnohem rychleji, levněji a spolehlivěji.

Umělá inteligence se naopak skvěle hodí tam, kde:

• potřebujete analyzovat nestrukturované vstupy od uživatele (text, média, poznámky)
• pracujete s širším kontextem
• potřebujete generovat text nebo jiné personifikovane výstupy

Proto je první krok jednoduchý, ale zásadní: Musíte určit, jestli váš případ AI vůbec potřebuje.

Pokud jste došli k závěru, že ano, gratuluji, můžete pokračovat dál. Teď je potřeba si říct, jakým způsobem budete AI používat.

Krátké okénko do historie

Aby bylo jasné, jaké možnosti dnes jako vývojáři máme, stojí za to podívat se na rychlý vývoj technologie v posledních letech:

• 2022 – AI generovala text najednou. Odeslali jste prompt a model vrátil kompletní odpověď
• 2023 – přišlo streamování textu: odpověď se „píše“ před očima
• 2024 – k textu se přidalo i streamování UI
• 2025 – přichází MCP (Model Context Protocol), který umožňuje AI komunikovat s dalšími aplikacemi, nástroji a službami

Díky tomu dnes můžete AI využívat několika základními způsoby:

• generovat text nebo objekty: Pokud potřebujete analyzovat vstupy a ukládat je do databáze sahněte po generování objektů s definovanou strukturou
• streamovat text nebo objekty: Pokud stavíte chatbota potřebujete streamování textu
• streamovat kompletní UI: Pokud vám jde o wow efekt a interaktivitu
• přes MCP propojit AI s dalšími aplikacemi nebo systémy: Pokud chcete, aby vaše aplikace uměla posílat e-maily, ovládat kalendář nebo volat externí API. Nebo, pokud chcete přidat vaši aplikaci do široce používaného AI chat-like nástroje ChatGPT apps

Provideři a jejich modely: není model jako model

Když už víte, na co AI potřebujete a jakým způsobem ji chcete používat, přichází další krok: vybrat vhodného providera a model. O samotných poskytovatelích AI modelů by se dal napsat samostatný článek (je jich opravdu hodně). Pro nás je ale důležité vědět, že výběr není jednorázová volba, ale proces, který vyžaduje další zamyšlení, trochu výzkumu a několik iterací.

Nejprve si určete, na co má být model zaměřený.

Existují modely, které vynikají v generování textu, jiné jsou skvělé na obrázky nebo video. Některé jsou specializované na právní oblast, medicínu, psaní kódu, překlady a mnoho dalších domén. Výběr by tedy měl vycházet z toho, jaká konkrétní schopnost je pro váš projekt klíčová.

A teď to důležité:

Nebojte se kombinovat více modelů. Ano MODELŮ, v množném čísle.

Pro jednoduchého chatbota vám možná bude stačit běžný LLM. Pokud ale chcete, aby odpovídal na právní dotazy, můžete k němu přes MCP připojit specializovaný model pro danou oblast.

Omezovat se na jednoho providera nebo jediný model znamená připravit se o potenciálně výrazně lepší výstupy. Chtějte pro svůj projekt, své uživatele i svou vlastní práci to nejlepší a tam, kde to dává smysl, sáhněte po specializaci. Jen mějte na paměti, že specializované modely bývají dražší, mají menší tokenové limity a jejich provoz může být nákladnější. Pokud váš use-case specializaci nepotřebuje, běžné LLM zcela postačí.

Možná vás teď napadlo, jestli nejsem blázen, když doporučuji používat víc providerů najednou. Každý má vlastní dokumentaci, jiný způsob integrace a jiné technické specifikace. A opravdu po vás chci, abyste se je učili všechny?

Ne. A ani nemusíte.

Existuje totiž knihovna, která tenhle problém řeší za vás — a to elegantně a jednotným způsobem.

Vercel AI SDK

A právě tady přichází na scénu Vercel AI SDK, knihovna vytvořená týmem stojícím za Next.js. Jejím cílem je usnadnit vývojářům rychlou a pohodlnou integraci AI do moderních aplikací postavených na Reactu, Next.js, Vue, Svelte nebo Node.js.

SDK sjednocuje práci s různými AI providery pod jedno společné API. Díky tomu se můžete soustředit na to podstatné. Na návrh kvalitní aplikace a uživatelského zážitku. Místo studování technických odlišností každého modelu nebo poskytovatele vám stačí naučit se jediný přístup. O zbytek se postará knihovna sama.

Použití knihovny je snadné. Pro všechny modely/providery se používá tentýž kód: 

'import {generateText} from "ai"
import {openai} from "@ai-sdk/openai"

const {text} = await generateText({
    model: openai("gpt-5"),
    prompt: "What is love?"
{)

import {generateText} from "ai"
import {xai} from "@ai-sdk/xai"

const {text} = await generateText({
    model: xai("grok-4"),
    prompt: "What is love?"
{)

SDK se skládá ze dvou hlavních částí:

• AI SDK Core: poskytuje jednotné API pro generování textu, práci se strukturovanými objekty, volání nástrojů a vytváření agentů nad LLM
• AI SDK UI: nabízí sadu na frameworku nezávislých hooků pro rychlou tvorbu chatů a generativních uživatelských rozhraní

Díky tomu je možné stavět komplexní AI funkce velmi rychle a s minimem boilerplate kódu.

Nyní si ukážeme, jak snadné je pomocí této knihovny vytvořit vlastního chatbota. Ukázky níže budou v TypeScriptu a pro prostředí Next.js.

Začneme vytvořením API routy, která bude zajišťovat komunikaci s vybraným LLM (app/api/chat/route.ts).

import {streamText, UIMessage, convertToModelMessages} from 'ai';

export async function POST(req: Request) {
    const {messages}: { messages: UIMessage[] } = await req.json();
    const result = streamText({
        model: 'anthropic/claude-sonnet-4.5',
        messages: convertToModelMessages(messages),
    {);
    return result.toUIMessageStreamResponse();
{}

Jakmile máme prostředek ke komunikaci, jsme velmi rychle schopni sestavit v aplikaci vlastního chatbota (app/page.tsx). 

'use client';
import {useChat} from '@ai-sdk/react';
import {useState} from 'react';
export default function Chat() {
    const [input, setInput] = useState('');
    const {messages, sendMessage} = useChat();
    return (
        <div>
            {messages.map(message => (
                <div key={message.id}>
                    {message.role === 'user' ? 'User: ' : 'AI: '}
                    {message.parts.map((part, i) => {
                        switch (part.type) {
                            case 'text':
                                return <div key={`${message.id}-${i}`}>{part.text}</div>;
                        }
                    })}
                </div>
            ))}
            <form
                onSubmit={e => {
                    e.preventDefault();
                    sendMessage({text: input});
                    setInput('');
                }}
            >
                <input
                    value={input}
                    placeholder="Say something..."
                    onChange={e => setInput(e.currentTarget.value)}
                />
            </form>
        </div>
    );
}

Kód výše vytváří jednoduchou stránku s chatbotem. Z části AI SDK UI využívá hook useChat, který je propojený právě s naší POST API routou. Ten se stará o celý průběh chatové komunikace — od zpracování uživatelských vstupů až po odeslání a zobrazení odpovědi.

• messages: pole všech zpráv aktuální konverzace. Každá zpráva obsahuje vlastní id, role a jednotlivé parts
• sendMessage: funkce, která odešle zprávu do API a postará se o správný průběh interakce

Po odeslání zprávy se vstupní pole vyčistí a uživatelská zpráva se okamžitě zobrazí v historii konverzace. Jakmile model vrátí odpověď, objeví se mezi zprávami také. Díky vlastnosti role můžeme jednoduše rozlišit, které zprávy patří uživateli a které AI, a podle toho je vizuálně odlišit.

Výsledné UI stránky může vypadat například takto:

Tools: když AI potřebuje sahat do okolního světa

Ukázali jsme si, jak snadno lze pomocí AI SDK vytvořit jednoduchého chatbota. Knihovna toho ale umí mnohem víc. Jednou z nejzajímavějších funkcí jsou tools.

Velké jazykové modely mají výborné schopnosti v oblasti generování textu, ale zároveň mají jedno zásadní omezení. Nedokážou sami od sebe interagovat s okolním světem. Nemohou si stáhnout aktuální data, nemohou se připojit na API ani sáhnout do databáze, pokud jim to explicitně neumožníme.

A právě k tomu slouží tools.

Jsou to akce, které může LLM během konverzace vyvolat. Model sám rozhodne, kdy je vhodné tool použít, předá mu vstupy a výsledek od toolu pak dále zpracuje ve své odpovědi.

Nejčastěji uváděným příkladem je tool pro počasí.

Pokud se uživatel zeptá chatbota na aktuální teplotu, model bez toolu umí odpovědět jen na základě dat, na kterých byl natrénován, tedy historických informací. S připojeným weather toolem ale dokáže:

• sám rozpoznat, že je potřeba tool použít
• vyextrahovat z dotazu lokaci
• zavolat externí API (nebo jiný backendový zdroj)
• vrátit uživateli aktuální a přesné údaje

Díky tomu se z modelu stává opravdu užitečný pomocník, který není omezen jen na tréninková data.

Upravená API route s přidaným weather toolem může vypadat následovně:

import {streamText, UIMessage, convertToModelMessages, tool} from 'ai';
import {z} from 'zod';
export async function POST(req: Request) {
    const {messages}: { messages: UIMessage[] } = await req.json();
    
    const result = streamText({
        model: 'anthropic/claude-sonnet-4.5',
        messages: convertToModelMessages(messages),
        tools: {
            weather: tool({
                description: 'Get the weather in a location (fahrenheit)',
                inputSchema: z.object({
                    location: z.string().describe('The location to get the weather for'),
                {),
                execute: async ({location}) => {
                    const temperature = Math.round(Math.random() * (90 - 32) + 32);
                    return {
                        location,
                        temperature,
                    {;
                {),
            {),
        {),
    {);
    return result.toUIMessageStreamResponse();
{}

Z knihovny importujeme funkci tool a pomocí zod definujeme schéma vstupu. Samotný nástroj má tři hlavní části:

• description: popis pro model, který vysvětluje, k čemu nástroj slouží a kdy ho má použít
• inputSchema: specifikuje, co musí nástroj dostat na vstupu. V našem případě objekt s vlastností location, kterou si model dokáže automaticky vyextrahovat z textu uživatele
• execute: asynchronní funkce, která běží na serveru. Může volat externí API a vracet reálná data (v ukázce simulujeme stažení aktuální teploty)

Když model rozhodne, že má použít tool, vygeneruje volání toolu s odpovídajícími parametry. Následně se spustí funkce execute a její výstup se uloží do messages jako tzv. tool message.

Nakonec už jen doplníme UI, které výsledek toolu zobrazí, například takto:

import {useChat} from '@ai-sdk/react';
import {useState} from 'react';

export default function Chat() {
    const {input, setInput} = useState('');
    const {messages, sendMessage} = useChat();
    return (
        <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
            {messages.map(message => (
                <div key={message.id} className="whitespace-pre-wrap">
                    {message.role === 'user' ? 'User: ' : 'AI: '}
                    {message.parts.map((part, i) => {
                        switch (part.type) {
                            case 'text':
                                return <div key={`${message.id}-${i}`}>{part.text}</div>;
                            case 'tool-weather':
                                return (
                                    <pre key={`${message.id}-${i}`}>{JSON.stringify(part, null, 2)} </pre>
                                );
                        {}
                    {)}
                </div>
            {))}

            <form
                onSubmit={e => {
                    e.preventDefault();
                    sendMessage({text: input});
                    setInput('');
                {}>
                <input
                    className="fixed dark:bg-zinc-900 bottom-0 w-full max-w-md p-2 mb-8 border border-zinc-300 dark:border-zinc-800 rounded shadow-xl"
                    value={input}
                    placeholder="Say something..."
                    onChange={e => setInput(e.currentTarget.value)}
                />
            </form>
        </div>
    );
{}

Pokud byste ještě vyrendrovali odpověď v podobě UI, mohl by uživatel vidět něco jako:

To bylo stručné představení knihovny Vercel AI SDK. Prošli jsme si jen ty nejzákladnější a nejpraktičtější možnosti, ale knihovna toho zvládá mnohem víc. Pokud vás zajímá kompletní přehled funkcí, příkladů a dokumentace, určitě doporučuji navštívit její oficiální stránky: www.ai-sdk.dev

Závěr

U našeho klienta jsme nakonec integrovali chatbota přímo do aplikace, tak jak požadoval, ale to byla ta jednodušší část. Hlavní přínos spočíval v napojení AI na vybrané inputy ve vstupním formuláři, kde jejím úkolem bylo automaticky analyzovat nahraná data. Už při prvotním zadání každého případu AI vyhodnotila přiložené fotografie, textová shrnutí i další vstupy, navrhla možné scénáře řešení, provedla kalkulaci nákladů a nakonec připravila i kompletní závěrečnou zprávu.

Práce, která by člověku trvala přibližně dva dny, byla díky AI hotová během zhruba dvou hodin.

Umělá inteligence dokáže lidem výrazně ulehčit práci. Než ji však začneme jako vývojáři ve velkém integrovat do aplikací, je nezbytné důkladně zanalyzovat její účel, to, s čím má uživatelům pomoci, a také způsob, jakým ji budeme používat. Tato úvodní fáze je stejně důležitá jako samotná implementace — a bez ní by výsledná integrace nemohla být kvalitní ani splnit očekávání našich klientů.