AccediOttieni una chiave API

Generative UI

Generative UI senza codice generato

Generative UI significa che l'interfaccia nasce per la domanda invece di essere progettata in anticipo. WebKnox lo fa con schede tipizzate: la tua app mostra una scheda testata e con fonti, e nessun modello ne scrive il codice.

Provalo nell'Answer LabConfronta gli approcci
Nella tua app di chatweather.forecast
What is the weather in Dresden?

15° and partly cloudy in Dresden right now. Light rain starts around 8 pm and gets heavier after 10 pm; it eases off by about 7 am, and Thursday stays mostly dry with a high of 12°.

Cosa significa Generative UI

Nielsen Norman Group la definisce un'interfaccia generata in tempo reale dall'IA per adattarsi alle esigenze e al contesto dell'utente. Google Research va oltre, con un modello che scrive un'intera pagina interattiva per un singolo prompt. Non esiste uno standard formale, quindi oggi il termine copre modi di costruire molto diversi.

Quattro modi per costruirla

Le differenze principali sono chi decide cosa appare sullo schermo e da dove arrivano i dati.

ApproccioChi decide il layoutDa dove arrivano i datiEsempi
Il modello scrive l'interfacciaIl modello, in HTML, CSS e JavaScriptCiò che il modello sa o riceveLa Generative UI di Google Research, la modalità aperta di CopilotKit
Il modello compone componenti approvatiIl modello, dal tuo catalogoI tuoi tool e il modelloA2UI, OpenUI di Thesys, la Generative UI di assistant-ui
I tool sono collegati ai tuoi componentiTu, in anticipo; il modello sceglie un toolI tuoi toolVercel AI SDK, CopilotKit, le UI dei tool di assistant-ui
Un'API restituisce una scheda tipizzataIl tipo di scheda, con il tuo tema e layoutSoprattutto le fonti di WebKnox, indicate sulla schedaWebKnox

Due standard correlati decidono come un'interfaccia arriva all'app, non chi la crea. Le MCP Apps permettono a un server MCP di mostrare la propria vista nella chat, e le Adaptive Cards sono schede JSON che un'app host mostra in modo nativo. WebKnox è disponibile anche come MCP App.

Come funzionano le schede tipizzate

La tua app invia la conversazione e riceve dati che può verificare con uno schema.

  1. Entra una domanda

    Invia la conversazione. WebKnox sceglie una skill, oppure risponde matched: false così può rispondere il tuo modello.

  2. Torna una scheda tipizzata

    La risposta ha un tipo di scheda, dati che seguono il JSON Schema del tipo, testo semplice e le sue fonti.

  3. La tua app la mostra

    <webknox-answer> mostra ogni tipo di scheda con il tuo tema. Per gli altri schermi ci sono incorporamenti ospitati e immagini.

Terminal
curl https://api.webknox.com/v2/answers \
  -H "Authorization: Bearer $WEBKNOX_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"messages": [{"role": "user", "content": "What is the weather in Dresden?"}]}'

# {"matched": true, "text": "15° and partly cloudy…",
#  "card": {"type": "weather.forecast", "version": 1, "data": {…}},
#  "sources": [{"name": "MET Norway", …}]}

Nel codice è un solo tool con l'AI SDK. Senza codice, aggiungilo alla tua app di IA tramite MCP.

17 tipi di scheda, pronti da mostrare

Sono risposte registrate, mostrate dallo stesso elemento che userebbe la tua app.

12 recipes for chicken pasta. The best matches: Pasta With Chicken and Mushrooms (463 kcal); Penne Pasta With Chicken And Mushrooms (834 kcal); Chicken Ragu w Rigatoni (605 kcal); Chicken Teriyaki with Soba Noodles (696 kcal); Chicken Pasta Primavera - Flower Patch Farmgirl Style (427 kcal).

Chicken pasta recipesDaylight#0e8a63

Ravens are generally larger and heavier-billed than crows. Ravens often have wedge-shaped tails and deeper calls, while crows commonly make a familiar caw. Size: Generally larger (Ravens), Generally smaller (Crows) Bill: Heavier, more curved (Ravens), Usually slimmer (Crows) Tail: Often wedge-shaped (Ravens), Usually fan-shaped (Crows) Call: Deep croak (Ravens), Often a caw (Crows)

Ravens vs crowsPlayful

Here are some pictures of northern lights. 039 Northern lights over Mývatn (Iceland) Photo by Giles Laurent (Giles Laurent, CC BY-SA 4.0): https://commons.wikimedia.org/wiki/File:039_Northern_lights_over_M%C3%BDvatn_(Iceland)_Photo_by_Giles_Laurent.jpg Maardu Northern lights — Estonia, 2022 (Maxim Bilovitskiy, CC BY 4.0): https://commons.wikimedia.org/wiki/File:Maardu_Northern_lights_%E2%80%94_Estonia,_2022.jpg Aurora borealis over Eielson Air Force Base, Alaska (United States Air Force photo by Senior Airman Joshua Strang, Public domain): https://commons.wikimedia.org/wiki/File:Aurora_borealis_over_Eielson_Air_Force_Base,_Alaska.jpg Aurora australis dancing over an LED illuminated igloo (Ross Burgener, Public domain): https://commons.wikimedia.org/wiki/File:Aurora_australis_dancing_over_an_LED_illuminated_igloo.jpg Aurora and perseids (Stephan Sprinz, CC BY 4.0): https://commons.wikimedia.org/wiki/File:Aurora_and_perseids.jpg Multicolored aurora borealis pillar over Brastad (W.carter, CC BY-SA 4.0): https://commons.wikimedia.org/wiki/File:Multicolored_aurora_borealis_pillar_over_Brastad.jpg

Show me pictures of the northern lightsMidnight

23 artworks for ships at sea. The best matches: Ship at Sea (Albert Ernest Markes, 1901); Ships in a Turbulent Sea (Johannes Christiaan Schotel, 1826); Ship (from McGuire Scrapbook) (Edmund C. Coates, 1839); Oorlogsschip met volle zeilen bij een kust (anonymous, 1625); Ships and Sailors (Thomas Rowlandson, 1827).

Show me artworks of ships at seaRivista
Vedi tutti i 43 esempi

Quando WebKnox è la scelta sbagliata

Le schede tipizzate vanno bene solo per le domande per cui WebKnox ha una scheda.

  • La tua interfaccia riguarda i tuoi dati, come ordini, ticket o dashboard. Usa tool collegati ai tuoi componenti, oppure un catalogo.
  • Vuoi moduli e flussi in più passaggi. WebKnox mostra risposte, non i processi della tua app.
  • Ti serve un layout che nessuna scheda ha. Un catalogo o un'interfaccia generata ti danno più libertà, con più da controllare.
  • Ti serve la ricerca sul web o una ricerca approfondita. WebKnox risponde quando ha una scheda, e lo dice quando non ce l'ha.

Va bene quando le persone fanno domande di tutti i giorni nella tua chat, nel tuo assistente o sul tuo display, e vuoi una risposta con l'aspetto giusto senza doverla progettare.

Domande sulla Generative UI

Cos'è la Generative UI?

Un'interfaccia creata sul momento dall'IA invece che progettata interamente in anticipo. A seconda dello strumento, un modello la scrive, la compone con componenti approvati o ne sceglie una già pronta.

WebKnox è Generative UI?

In senso lato, sì: ogni domanda riceve la scheda adatta, riempita con i suoi dati. Nessun modello scrive il codice della scheda, e questo lo rende l'approccio più vincolato e il più facile da testare.

Un modello può sbagliare una scheda?

La maggior parte delle schede mostra dati di fonti indicate, come MET Norway per il meteo. Alcuni testi sono scritti da un modello: le righe di un confronto, per esempio, mentre le foto arrivano da Wikimedia Commons. Se WebKnox non ha una risposta, lo dice con matched: false, e risponde il tuo modello.

Funziona con l'AI SDK e MCP?

Sì. @webknox/ai-sdk lo aggiunge all'AI SDK come tool, e il server MCP lo aggiunge a Claude, ChatGPT, VS Code e altre app di IA.

Metti online la tua prima scheda già oggi pomeriggio

Ottieni una chiave API gratuitaLeggi la guida rapida