Rewolucja w interakcjach z chatbotami dzięki Generative UI

Większość chatbotów AI nadal ogranicza użytkowników do pętli: tekst na wejściu, tekst na wyjściu. Wpisujesz pytanie i dostajesz w odpowiedzi akapit. To sprawdza się przy prostych zapytaniach, ale przestaje działać, gdy zadanie wymaga wyboru, potwierdzenia, wizualizacji albo uporządkowanego wprowadzania danych.

Generative UI wypełnia tę lukę, pozwalając chatbotowi dynamicznie generować elementy interfejsu — formularze, selektory, wykresy, podsumowania — jako część samej rozmowy.

Implementacja obejmuje kluczową akcję serwerową submitUserMessage wywoływanie funkcji za pomocą parametru tools oraz sposób przechwytywania danych wejściowych użytkownika z wygenerowanych komponentów i przekazywania ich z powrotem do rozmowy.

Poza wymianą opartą wyłącznie na tekście

Większość dzisiejszych aplikacji AI i chatbotów ogranicza interakcje z użytkownikiem do prostych wymian tekstowych. Użytkownicy wpisują polecenia lub pytania, a chatbot odpowiada. Choć rozmowa w języku naturalnym jest wygodna, często nie jest najlepszą formą odpowiedzi.

Status szkody lepiej pokazać w formie listy. Wybór części samochodu lepiej obsłużyć wizualnie, zamiast opisywać go tekstem.

Generative UI pozwala interfejsowi tworzyć niestandardowe odpowiedzi w czasie rzeczywistym na podstawie danych wejściowych użytkownika. Dzięki Generative UI chatbot może wyświetlić porównanie produktów, wykres, tabelę, formularz — cokolwiek najlepiej pasuje do kontekstu.

Zamiast przechodzić przez z góry ustalony zestaw menu, użytkownicy prowadzą naturalną rozmowę, a chatbot dynamicznie generuje komponenty UI, które najlepiej pasują do danego kroku.

Uproszczenie integracji Generative UI w chatbotach: PoC

Integracja Generative UI z chatbotem wiąże się z kluczowym wyzwaniem technicznym: wejścia i wyjścia LLM mają formę tekstową, więc potrzebny jest sposób, by poinstruować AI, aby odpowiadało w formie uruchamiającej niestandardowe komponenty UI — a twoja aplikacja musi rozumieć ten sygnał, żeby poprawnie je renderować.

Premiera AI SDK 3 od Vercel sprawiła, że stało się to praktyczne. Dzięki tej bibliotece dodanie Generative UI sprowadza się do jednej konfiguracji definiującej dostępne funkcje i komponenty UI.

SDK korzysta z React Server Components, strumieniując UI z serwera tak samo, jak tekst — co oznacza szybkie i wydajne interakcje bez narzutu związanego z renderowaniem po stronie klienta.

Chcieliśmy przetestować to podejście i stworzyć Proof of Concept, który pokaże możliwości AI SDK od Vercel w połączeniu z Generative UI. Wizja była prosta: chatbot dla fikcyjnej firmy ubezpieczeniowej, który upraszcza złożony proces zgłaszania szkody.

Nasz PoC w dużej mierze czerpał inspirację z Next.js AI Chatbot demood Vercel — świetnego punktu wyjścia dla każdego, kto poznaje ich AI SDK i podejście do Generative UI.

Chatbot ma dwa główne zastosowania: zgłaszanie uszkodzeń samochodu i sprawdzanie statusu zgłoszonych szkód. Oba zadania można wykonać poprzez rozmowę w języku naturalnym. Dodaliśmy cztery interaktywne komponenty, których LLM może używać i które może wyświetlać, gdy uzna to za właściwe w danym kontekście.

Komponent Car Selector pozwala użytkownikom przy zgłaszaniu szkody wejść w interakcję z niestandardowym komponentem React i wybrać swój samochód z listy powiązanej z ich kontem, zamiast wpisywać go ręcznie.

Komponent Parts Selector oferuje dynamiczny diagram do wizualnego wyboru i określania uszkodzonych części samochodu — standaryzuje to nazwy zgłaszanych części i pomaga użytkownikom, którzy nie znają dokładnej terminologii.

Komponent Lista zgłoszeń wyświetla aktualne zgłoszenia ubezpieczeniowe użytkownika i ich statusy za pomocą interaktywnego komponentu z danymi w czasie rzeczywistym. Z kolei Widok podsumowania zbiera podane informacje w interaktywne podsumowanie, dzięki czemu użytkownicy mogą przejrzeć, edytować i potwierdzić szczegóły przed wysłaniem.

Techniczna implementacja dynamicznego interfejsu chatbota z AI SDK od Vercel

Działanie aplikacji jest w dużej mierze określane przez akcję serwerową submitUserMessage() . Ta akcja przyjmuje dane wejściowe użytkownika jako argument i zwraca wynik — strumieniowany tekst albo interfejs UI.

Aktualizuje też i synchronizuje stan AI, który zawiera kontekst przekazywany modelowi AI: komunikaty systemowe, odpowiedzi funkcji i inne istotne informacje.

Akcja korzysta z funkcji pomocniczej streamUI z Vercel AI SDK (dokładniej z pakietu ai/rsc ) do strumieniowego renderowania odpowiedzi w UI. Ta funkcjonalność opiera się na React Server Components, więc działa tylko z frameworkami, które wspierają tę koncepcję, takimi jak Next.js.

Oto podstawowy przykład, który obsługuje tylko wiadomości tekstowe:

async function submitUserMessage(content: string) {
  'use server'
  const aiState = getMutableAIState<typeof AI>()
  aiState.update({
    ...aiState.get(),
    messages: [
      ...aiState.get().messages,
      {
        id: nanoid(),
        role: 'user',
        content
      }
    ]
  })
  let textStream: undefined | ReturnType<typeof createStreamableValue<string>>
  let textNode: undefined | React.ReactNode
  const result = await streamUI({
    model: openai('gpt-4o-mini'), // Uwaga: oryginalny PoC używał gpt-3.5-turbo; gpt-4o-mini to obecnie odpowiednik o porównywalnym koszcie
    initial: <SpinnerMessage />,
    system: "[...]", // Prompt systemowy, w którym definiujemy zadanie aplikacji i oczekiwane zachowanie
    messages: [
      ...aiState.get().messages.map((message: any) => ({
        role: message.role,
        content: message.content,
        name: message.name
      }))
    ],
    text: ({ content, done, delta }) => {
      // Logika strumieniowania tekstu:
      if (!textStream) {
        textStream = createStreamableValue('')
        textNode = <BotMessage content={textStream.value} />
      }
      if (done) {
        textStream.done()
        aiState.done({
          ...aiState.get(),
          messages: [
            ...aiState.get().messages,
            {
              id: nanoid(),
              role: 'assistant',
              content
            }
          ]
        })
      } else {
        textStream.update(delta)
      }
      return textNode
    },
  })
  return {
    id: nanoid(),
    display: result.value
  }
}

Funkcja najpierw aktualizuje stan AI o nową wiadomość użytkownika, a następnie używa funkcji pomocniczej streamUI do zwrócenia odpowiedzi. Ten przykład obsługuje tylko wiadomości tekstowe, ale już strumieniuje węzeł React (<BotMessage content={textStream.value} />) zamiast zwykłego tekstu.

Teraz wprowadźmy interaktywność na przykładzie selektora samochodu. Generative UI opiera się na wywołaniach funkcji, które umożliwiają wykonanie bardziej złożonej logiki — pobranie i przetworzenie danych zewnętrznych przed wyrenderowaniem komponentu UI.

Funkcje dostępne dla modelu definiujemy w parametrze tools funkcji streamUI. Oto showCarSelector definicja funkcji:

tools: {
    showCarSelector: {
        description:
          'Pokaż samochody użytkownika oraz interfejs umożliwiający wybór samochodu. Użyj tego, gdy chcesz poprosić użytkownika o wybranie samochodu.',
        parameters: z.object({}),
        generate: async function* () {
          yield (
            <BotCard>
              <CarSelectorSkeleton />
            </BotCard>
          )
          const session = await auth()
          const cars = await getUserCars(session?.user?.id)
          const toolCallId = nanoid()
          aiState.done({
            ...aiState.get(),
            messages: [
              ...aiState.get().messages,
              {
                id: nanoid(),
                role: 'assistant',
                content: [
                  {
                    type: 'tool-call',
                    toolName: 'showCarSelector',
                    toolCallId,
                    args: cars
                  }
                ]
              },
              {
                id: nanoid(),
                role: 'tool',
                content: [
                  {
                    type: 'tool-result',
                    toolName: 'showCarSelector',
                    toolCallId,
                    result: cars
                  }
                ]
              }
            ]
          })
          return (
            <BotCard>
              <CarSelector props={cars} />
            </BotCard>
          )
        }
      },
    //  ...definicje innych narzędzi
    }

Zaczynamy od podania opisu funkcji, który wskazuje modelowi, kiedy ma jej użyć. Następnie definiujemy wymagane parametry (w tym przypadku żadne) i tworzymy funkcję generate zawierającą całą logikę.

Funkcja jest asynchroniczna — dzięki temu można najpierw wyrenderować komponent szkieletowy, pobrać dane z zewnętrznego źródła, zaktualizować stan AI o historię wiadomości, a na końcu wyświetlić komponent interfejsu.

Gdy komponent jest już wyświetlony, przechwytujemy z niego dane wejściowe użytkownika, wywołując submitUserMessage kiedy użytkownik wybierze samochód, i opisując to działanie:

{cars.map(car => (
  <Card
    onClick={async () => {
      if (!selectedCar) {
        setSelectedCar(car)
        const response = await submitUserMessage(
          `[Użytkownik wybrał samochód: ${JSON.stringify(car)}]`
        )
        setMessages(currentMessages => [...currentMessages, response])
      }
    }}
    key={car.id}
  >
    {/* Szczegóły samochodu */}
  </Card>
))}

Implementacja innych funkcji przebiega według podobnego schematu — każdy interaktywny komponent ma odpowiadające mu narzędzie zdefiniowane w akcji submitUserMessage() .

Efekt końcowy możesz zobaczyć w tymdemo video.

Jak poradzić sobie ze złożonością integracji Generative UI

Integracja Generative UI z aplikacjami chatbotowymi, oparta na Vercel AI SDK, to istotny krok naprzód w tworzeniu interaktywnych aplikacji.

Ta architektura upraszcza proces tworzenia i zapewnia szybkie, wydajne interakcje dzięki React Server Components — serwer obsługuje całą logikę i renderowanie, co przekłada się na wysoką wydajność bez narzutu związanego z renderowaniem po stronie klienta.

Jednocześnie takie podejście wprowadza realną złożoność w prompt engineeringu. Precyzyjne renderowanie komponentów interfejsu wymaga starannego dostrojenia, a efekty bywają nieprzewidywalne.

AI działa bardziej niezawodnie, gdy odpowiada na bezpośrednie prośby użytkownika — wyświetlając konkretne dane — niż wtedy, gdy ma prowadzić użytkownika przez wieloetapową interakcję, taką jak zgłoszenie roszczenia. Problemy te można rozwiązać, stosując model dostrojony do konkretnego kontekstu.

Generative UI otwiera drogę do innowacyjnych rozwiązań angażujących użytkowników, oferując elastyczne i szybkie interfejsy.

Wraz z rozwojem technologii i ulepszaniem modeli obecne ograniczenia związane z niezawodnością promptów i zadaniami wymagającymi prowadzenia użytkownika prawdopodobnie będą się zmniejszać — otwierając drogę do większej liczby wzorców interakcji, które dziś wymagają starannego zaprojektowania.

Dlaczego twój zespół powinien wdrożyć Generative UI

Techniczna złożoność tego PoC jest realna, ale uzasadnienie biznesowe jest proste: użytkownicy, którzy mogą korzystać z naturalnej rozmowy i odpowiednio dobranych kontekstowo komponentów interfejsu, wykonują zadania szybciej i popełniają mniej błędów niż ci, którzy są ograniczeni do promptów tekstowych lub sztywnych sekwencji formularzy.

Mniejsze tarcie w złożonych przepływach pracy. Zadania takie jak zgłoszenia ubezpieczeniowe, sekwencje onboardingu czy wieloetapowe procesy konfiguracji wiążą się z niejednoznacznością, nieznaną terminologią i sekwencyjnymi decyzjami. Generative UI obsługuje każdy etap za pomocą właściwego interfejsu — selektora, gdy potrzebny jest wybór, podsumowania, gdy potrzebne jest potwierdzenie, diagramu, gdy potrzebne są dane przestrzenne — zamiast sprowadzać każdy krok do tekstu.

Mniejszy narzut związany z tworzeniem interaktywnych przepływów. Podejście oparte na konfiguracji tools oznacza, że dodanie nowego interaktywnego komponentu nie wymaga przebudowy przepływu rozmowy — definiujesz komponent, opisujesz, kiedy go użyć, a model sam decyduje, kiedy go wywołać. Dzięki temu iterowanie złożonych przepływów jest znacząco tańsze niż w tradycyjnych rozwiązaniach opartych na formularzach.

Podstawa pod bardziej zaawansowane produkty AI. Zespoły, które wcześnie zaczynają budować w oparciu o tę architekturę, wypracowują kompetencje potrzebne do agentowych przepływów pracy — takich, w których AI nie tylko odpowiada na prośby, ale aktywnie prowadzi użytkowników przez procesy. Te same wzorce użyte tutaj w Car Selector i Summary Display można bezpośrednio zastosować w bardziej złożonych przepływach produktowych opartych na AI.

W Monterail te wzorce ukształtowały nasze podejście do tworzenia produktów AI-native.

Cooleaf jest jednym z przykładów: zamiast budować statyczny dashboard dla specjalistów HR, zespół wdrożył AI, które przekłada dane o zaangażowaniu na dynamiczne, kontekstowe rekomendacje — formę generatywnego interfejsu zastosowaną w business intelligence, a nie w czacie.

Flink wymagał innego zastosowania tej samej zasady: decyzje operacyjne, które wcześniej wymagały zaangażowania inżynierów, zautomatyzowano za pomocą architektury generującej właściwe działanie na podstawie kontekstu, zamiast opierać się na sztywnych regułach.

Jeśli analizujesz, gdzie Generative UI pasuje do planu rozwoju twojego produktu, albo zastanawiasz się, jak zintegrować wzorce interakcji AI z istniejącym produktem, Monterail oferuje AI development services zespół pracuje właśnie nad tymi decyzjami architektonicznymi.

Skontaktuj się z nami aby omówić swoją konkretną sytuację.