← Powrót do bloga
·6 minut czytania·

Co właściwie buduję, gdy klient mówi „Dodaj sztuczną inteligencję do produktu”

„Dodaj sztuczną inteligencję” to nie jedna funkcja. Jest to przesyłanie strumieniowe odpowiedzi połączonych z Vercel AI SDK, Figma-to-Code wersjami roboczymi przesłanymi przez serwer MCP, wewnętrzne narzędzie, które odczytuje zrzut ekranu zamiast zgłoszenia do pomocy technicznej oraz decyzja, który z nich warto utworzyć jako pierwszy. Jak każdy z nich faktycznie wygląda w prawdziwej bazie kodu i gdzie multimodalna sztuczna inteligencja zarabia na swoich kosztach.

Vercel AI SDKInterfejs przesyłania strumieniowegoMCPMultimodalna sztuczna inteligencjaRozwój wspomagany sztuczną inteligencjąNext.js
Zatrudnij mnie na Upwork

„Dodaj sztuczną inteligencję do produktu” to komunikat, który obecnie otrzymuję najczęściej i prawie nigdy nie jest to jedna funkcja. Pod spodem zwykle znajduje się jedno z czterech różnych zadań: pole czatu lub wyszukiwania, które przesyła strumieniowo odpowiedź zamiast pokazywać pokrętło, krok od projektu do kodu, który tworzy wersję roboczą komponentu z Figma zamiast od zera, wewnętrzne narzędzie, które odczytuje coś niechlujnego (zrzut ekranu, plik PDF, arkusz kalkulacyjny) zamiast zmuszać kogoś do ponownego wpisywania, lub prawdziwą funkcję multimodalną, w której dane wejściowe w ogóle nie są tekstem. Nazwanie, który to właściwie jest, decyduje o całej kompilacji.

Wolę spędzić pierwszą rozmowę, sortując brief według tych czterech, niż zaczynać od arkusza kalkulacyjnego porównującego modele. Model rzadko jest najtrudniejszą częścią. Cała instalacja wodno-kanalizacyjna – stan podczas napływu tokenów, plik Figma, który agent może faktycznie przeanalizować, kolejka na zrzuty ekranu, które musi przetworzyć wewnętrzny bot – to miejsce, w którym mijają tygodnie.

1. Interfejs przesyłania strumieniowego z Vercel AI SDK

Okno czatu, które odpowiada wszystkim naraz po pięciu sekundach oczekiwania, sprawia wrażenie zepsutego nawet wtedy, gdy model działa szybko — ludzie czytają pierwsze zdanie w trakcie pisania, a nie po. Haki useChat i useCompletion urządzenia Vercel AI SDK obsługują strumień tokenów, ale klienci tak naprawdę oceniają to, co dzieje się wokół niego: przycisk stop, który naprawdę anuluje żądanie, regeneracja, która nie duplikuje ostatniej wiadomości, oraz interfejs użytkownika, który nie przeskakuje, gdy blok kodu lub tabela jest przesyłana strumieniowo w połowie zdania.

Trybem awarii, który najczęściej widzę w istniejących kompilacjach, nie jest samo przesyłanie strumieniowe – jest to stan. Komponent React, który ponownie renderuje całą listę wiadomości na każdym tokenie, flaga ładowania, która nigdy nie resetuje się po przerwanym żądaniu, wejście, które pozostaje wyłączone po błędzie. Nic z tego nie pojawia się w wersji demonstracyjnej z jednym komunikatem szczęśliwej ścieżki; wszystko to pojawia się po dziesiątej wiadomości danego dnia od użytkownika.

2. Figma-to-Code przez MCP i gdzie człowiek musi jeszcze szukać

Serwer MCP, który udostępnia plik Figma, pozwala Cursor lub Claude odczytać rzeczywisty układ – nazwy ramek, znaczniki odstępów, warianty komponentów – zamiast zgadywać na podstawie zrzutu ekranu. Dzięki temu pierwsza wersja komponentu szybko osiąga rozsądny stan: poprawna struktura, mniej więcej prawidłowe odstępy, prawdziwe nazwy klas zamiast symboli zastępczych.

Nie zapewnia responsywnych punktów przerwania, dostępności ani stanów, których projektant nigdy nie narysował – najechanie kursorem, wyłączenie, pusty, ładowanie – bezpośrednio bez sprawdzania przez osobę. Traktuję wynik MCP jako szybką pierwszą wersję roboczą, a nie PR gotowy do scalania: czas, jaki oszczędza na pisaniu schematu, a nie na recenzji.

3. Narzędzia wewnętrzne oparte na sztucznej inteligencji i gdzie multimodalność faktycznie się opłaca

Funkcja AI zapewniająca najlepszy zwrot z inwestycji, jaki udało mi się zbudować, rzadko jest skierowana do klienta. Wewnętrzne narzędzie, które czyta fakturę dostawcy w formacie PDF i wypełnia pola, które księgowy zwykł wpisywać ponownie, lub takie, które przegląda zrzut ekranu raportu o błędzie i sporządza bilet – niższe stawki niż publiczny chatbot, większy wolumen niż większość ludzi się spodziewa i nikt nie przejmuje się ostrymi krawędziami, ponieważ oszczędza to ich czas.

Również tam multimodalna sztuczna inteligencja – model odczytujący obraz lub plik PDF zamiast samego tekstu – zarabia na swój koszt. Dodawanie obrazu do funkcji skierowanej do klienta „ponieważ jest to możliwe” zwykle nie jest warte dodatkowej powierzchni awarii. Dodanie go do formularza, który pracownik wypełnia czterdzieści razy dziennie, zastępując dokument, który w innym przypadku przepisywałby od nowa, zwraca się już w pierwszym miesiącu.

Wniosek: nadaj nazwę funkcji przed nazwaniem modelu

„Dodaj sztuczną inteligencję do produktu” zamienia się w plan tylko wtedy, gdy jest to jeden z poniższych: czat, który prawidłowo przesyła strumieniowo, etap projektowania, w którym szkicuje się zamiast zastępować programistę, wewnętrzne narzędzie automatyzujące określone zadanie ponownego wpisywania lub prawdziwe wejście multimodalne. Buduję wszystkie cztery, podłączone do Vercel AI SDK, MCP i dowolnego modelu, który pasuje do zadania, a nie tego, który jest najgłośniejszy w danym miesiącu. Wpisz w formularzu, co sztuczna inteligencja ma faktycznie przeczytać lub powiedzieć, a powiem Ci, który z tych czterech to jest.

Szukasz nowoczesnego projektu UI/UX w Figma?

Projektowanie UI/UX w Figma, interaktywne makiety i kod Next.js/Tailwind za pomocą Figma Make & Claude Cowork.

Zatrudnij mnie na Upwork

Chcesz omówić swój projekt?

Jestem starszym inżynierem stron internetowych specjalizującym się w React i Next.js - dostępnym dla niezależnych projektów na całym świecie.