← Zpět na Blog
·6 min čtení·

Co vlastně stavím, když klient řekne „Přidat AI do produktu“

"Přidat AI" není jedna funkce. Jedná se o streamování odpovědí propojených s koncepty Vercel AI SDK, Figma-to-Code stažených přes server MCP, interní nástroj, který čte snímek obrazovky místo lístku podpory, a rozhodnutí o tom, který z nich stojí za to vytvořit jako první. Jak každý z nich skutečně vypadá ve skutečné kódové základně a kde si multimodální AI vydělává na své náklady.

Vercel AI SDKUživatelské rozhraní pro streamováníMCPMultimodální AIVývoj s pomocí AINext.js
Najme si mě na Upwork

„Přidat AI do produktu“ je stručná informace, kterou teď dostávám nejčastěji, a téměř nikdy to není jedna funkce. Pod ní je obvykle jedna ze čtyř různých úloh: chatovací nebo vyhledávací pole, které streamuje odpověď namísto zobrazení číselníku, krok od návrhu ke kódu, který navrhne komponentu od Figma místo od nuly, interní nástroj, který přečte něco chaotického (snímek obrazovky, PDF, tabulka) namísto toho, aby někoho nutil, aby to přepsal, nebo skutečný multimodální text, kde není žádný text. Pojmenování, který to vlastně je, rozhoduje o celé sestavě.

Raději strávím první hovor tříděním briefu do těchto čtyř, než abych začínal s tabulkou pro porovnání modelů. Model je jen zřídka tou těžší částí. Instalatérství kolem něj – stav, zatímco se tokeny proudí, soubor Figma, který může agent ve skutečnosti analyzovat, fronta na snímky obrazovky, které musí zpracovat interní robot – je místo, kde ubíhají týdny.

1. Streamovací uživatelské rozhraní s Vercel AI SDK

Chatovací schránka, která odpoví najednou, po pětisekundovém čekání, se cítí rozbitá, i když je model rychlý – lidé čtou první větu, zatímco stále píše, ne poté. Háčky useChat a useCompletion na Vercel AI SDK zpracovávají token tokenu, ale část, kterou klienti ve skutečnosti posuzují, je to, co se kolem toho děje: tlačítko stop, které skutečně zruší požadavek, regenerace, která neduplikuje poslední zprávu, a uživatelské rozhraní, které neskočí, když se blok kódu nebo tabulka streamují uprostřed věty.

Režim selhání, který nejčastěji vidím ve stávajících sestavách, není samotné streamování – je to stav. Komponenta React, která znovu vykresluje celý seznam zpráv na každém tokenu, příznak načítání, který se po přerušeném požadavku nikdy neresetuje, vstup, který zůstane po chybě deaktivován. Nic z toho se neobjeví v ukázce s jednou zprávou šťastné cesty; to vše se zobrazí uživateli po desáté zprávě dne.

2. Figma-to-Code přes MCP, a kam se člověk ještě musí podívat

Server MCP, který zpřístupňuje soubor Figma, umožňuje Cursor nebo Claude číst skutečné rozvržení – názvy snímků, tokeny mezer, varianty komponent – ​​namísto hádání ze snímku obrazovky. Tím se první návrh komponenty rychle dostane do rozumného stavu: správná struktura, zhruba správné mezery, skutečné názvy tříd místo zástupných symbolů.

Nezíská responzivní body přerušení, dostupnost nebo stavy, které návrhář nikdy nenakreslil – vznášet se, vypnuto, prázdné, načítání – přímo bez kontroly osobou. S výstupem MCP zacházím jako s rychlým prvním návrhem, nikoli s PR připraveným ke sloučení: čas, který ušetří, spočívá v přepisování základního textu, nikoli v recenzi.

3. Interní nástroje využívající umělou inteligenci a kde se multimodální skutečně vyplatí

Funkce umělé inteligence s nejlepší návratností investic, kterou jsem vytvořil, je jen zřídkakdy tváří v tvář zákazníkům. Interní nástroj, který přečte fakturu dodavatele ve formátu PDF a vyplní pole, která účetní použil k přepisování, nebo nástroj, který se podívá na snímek obrazovky s chybovým hlášením a navrhne tiket – nižší sázky než veřejný chatbot, vyšší objem, než většina lidí očekává, a nikomu to nevadí, protože šetří jeho vlastní čas.

To je také místo, kde multimodální umělá inteligence – model, který čte obrázek nebo PDF namísto pouhého textu – vydělává na své náklady. Přidání obrazového vstupu do funkce pro zákazníky „protože je to možné“ obvykle nestojí za přidanou plochu selhání. Jeho přidání do formuláře, který zaměstnanec vyplní čtyřicetkrát denně, čímž nahradí dokument, který by jinak přepsal, se zaplatí za první měsíc.

Závěr: pojmenujte prvek dříve, než pojmenujete model

„Přidat umělou inteligenci do produktu“ se promění v plán pouze tehdy, když je jedním z těchto: chat, který se správně streamuje, krok návrhu, který namísto nahrazení vývojáře navrhne, interní nástroj automatizující konkrétní úlohu přepisování nebo skutečný multimodální vstup. Stavím všechny čtyři, propojené s Vercel AI SDK, MCP, a podle toho, který model se hodí pro práci, spíše než podle toho, který je v daném měsíci nejhlasitější. Napište do formuláře, co má AI skutečně číst nebo říkat, a já vám řeknu, která z těchto čtyř to je.

Hledáte moderní Figma UI/UX design?

Figma UI/UX design, interaktivní prototypování a čistý Next.js/Tailwind kód pomocí Figma Make & Claude Cowork.

Najměte si mě na Upwork

Jste připraveni diskutovat o svém projektu?

Jsem senior webový inženýr se specializací na React a Next.js – dostupné pro projekty na volné noze po celém světě.

Umístění

Kyjev, Ukrajina