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°.
Generative UI
Generative UI sans code généré
La Generative UI, c'est une interface créée pour la question au lieu d'être conçue à l'avance. WebKnox le fait avec des cartes typées : votre app affiche une carte testée et sourcée, et aucun modèle n'écrit son code.
Dans votre app de 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°.
Ce que signifie Generative UI
Nielsen Norman Group la définit comme une interface générée en temps réel par l'IA pour s'adapter aux besoins et au contexte de l'utilisateur. Google Research va plus loin, avec un modèle qui écrit toute une page interactive pour un seul prompt. Il n'existe pas de norme formelle : le terme recouvre donc aujourd'hui des façons de construire très différentes.
Quatre façons de la construire
Les principales différences : qui décide de ce qui s'affiche à l'écran, et d'où viennent les données.
| Approche | Qui décide de la mise en page | D'où viennent les données | Exemples |
|---|---|---|---|
| Le modèle écrit l'interface | Le modèle, en HTML, CSS et JavaScript | Ce que le modèle sait ou reçoit | Generative UI de Google Research, mode ouvert de CopilotKit |
| Le modèle assemble des composants approuvés | Le modèle, à partir de votre catalogue | Vos outils et le modèle | A2UI, OpenUI de Thesys, Generative UI d'assistant-ui |
| Les outils sont associés à vos composants | Vous, à l'avance ; le modèle choisit un outil | Vos outils | Vercel AI SDK, CopilotKit, UI d'outils d'assistant-ui |
| Une API renvoie une carte typée | Le type de carte, avec votre thème et votre mise en page | Surtout les sources de WebKnox, citées sur la carte | WebKnox |
Deux standards voisins décident de la façon dont une interface arrive dans l'app, pas de qui la crée. Les MCP Apps permettent à un serveur MCP d'afficher sa propre vue dans le chat, et les Adaptive Cards sont des cartes JSON qu'une app hôte affiche nativement. WebKnox existe aussi en MCP App.
Comment fonctionnent les cartes typées
Votre app envoie la conversation et reçoit des données qu'elle peut vérifier par rapport à un schéma.
Une question arrive
Envoyez la conversation. WebKnox choisit une compétence, ou répond
matched: falsepour que votre propre modèle prenne le relais.Une carte typée revient
La réponse contient un type de carte, des données conformes au
JSON Schemade ce type, du texte brut et ses sources.Votre app l'affiche
<webknox-answer>affiche chaque type de carte dans votre thème. Pour les autres écrans, il existe des intégrations hébergées et des images.
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", …}]}
En code, c'est un seul outil avec l'AI SDK. Sans code, ajoutez-le à votre app d'IA via MCP.
17 types de carte, prêts à afficher
Ce sont des réponses enregistrées, affichées par le même élément que celui qu'utiliserait votre app.
What is the weather in Dresden?BorneEn brefOuvrir dans l'Answer Lab
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).
“The costs of your good habits are in the present. The costs of your bad habits are in the future” — James Clear
Here's Classic Vinyl HD. https://icecast.walmradio.com:8443/classic
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)
4 recipes for chicken pasta (at most 700 kcal, at least 30 g protein). The best matches: Pasta With Chicken and Mushrooms (463 kcal); Chicken Ragu w Rigatoni (605 kcal); Chicken Teriyaki with Soba Noodles (696 kcal); Spicy Chicken Pasta and Peas with Sun-Dried Tomato Sauce (608 kcal).
Morgen in Berlin: Nach Regen in der Nacht bleibt es tagsüber bewölkt und weitgehend trocken, bei 9 bis 12 Grad.
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
100 g of cooked lentils have 9 g of protein and 116 kcal, plus 7.9 g of fiber and 3.3 mg of iron.
serendipity: The happy chance of finding something good or useful by accident.
703 games for cozy farming. The best matches: Palia (rated 89, free to play); Grimshire (rated 98, $8.46); Wylde Flowers (rated 96, $16.99); Roots of Pacha (rated 90, $14.30); Pumpkin Panic (rated 96, free to play).
Today the sun sets at 6:02 PM.
A medium banana (118 g) has about 105 kcal, mostly from carbohydrates: 27 g, including 14 g of sugars. It also gives you 3.1 g of fiber and 422 mg of potassium.
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).
thank you in Japanese: ありがとう
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°.
Playing Queen – Bohemian Rhapsody. https://www.youtube.com/watch?v=fJ9rUzIMcZQ
Pasta timer set for 8 minutes, until 14:08.
Quand WebKnox n'est pas le bon choix
Les cartes typées ne conviennent qu'aux questions pour lesquelles WebKnox a une carte.
- Votre interface porte sur vos propres données, comme des commandes, des tickets ou des tableaux de bord. Utilisez des outils associés à vos composants, ou un catalogue.
- Vous voulez des formulaires et des parcours en plusieurs étapes. WebKnox affiche des réponses, pas les processus de votre app.
- Il vous faut une mise en page qu'aucune carte ne propose. Un catalogue ou une interface générée vous donne plus de liberté, avec plus de choses à vérifier.
- Il vous faut une recherche sur le web ou une recherche approfondie. WebKnox répond quand il a une carte, et le dit quand il n'en a pas.
WebKnox convient quand les gens posent des questions du quotidien dans votre chat, votre assistant ou votre écran, et que vous voulez une réponse qui rend bien sans avoir à la concevoir.
Questions sur la Generative UI
Qu'est-ce que la Generative UI ?
Une interface créée sur le moment par l'IA plutôt qu'entièrement conçue à l'avance. Selon l'outil, un modèle l'écrit, l'assemble à partir de composants approuvés ou en choisit une toute prête.
WebKnox, est-ce de la Generative UI ?
Au sens large, oui : chaque question reçoit la carte qui lui correspond, remplie avec ses données. Aucun modèle n'écrit le code de la carte, ce qui en fait l'approche la plus contrainte et la plus facile à tester.
Un modèle peut-il se tromper sur une carte ?
La plupart des cartes affichent des données de sources citées, comme MET Norway pour la météo. Certains textes sont écrits par un modèle : les lignes d'une comparaison par exemple, alors que ses photos viennent de Wikimedia Commons. Si WebKnox n'a pas de réponse, il le dit avec matched: false, et votre propre modèle répond.
Est-ce compatible avec l'AI SDK et MCP ?
Oui. @webknox/ai-sdk l'ajoute à l'AI SDK comme outil, et le serveur MCP l'ajoute à Claude, ChatGPT, VS Code et d'autres apps d'IA.