AnmeldenAPI-Key holen

Generative UI

Generative UI ohne generierten Code

Generative UI bedeutet, dass die Oberfläche für die Frage entsteht, statt vorab entworfen zu werden. WebKnox macht das mit typisierten Karten: Ihre App zeigt eine getestete Karte mit Quellen, und kein Modell schreibt ihren Code.

Im Answer Lab ausprobierenDie Ansätze vergleichen
In Ihrer Chat-Appweather.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°.

Was Generative UI bedeutet

Nielsen Norman Group nennt es eine Oberfläche, die KI in Echtzeit erzeugt, passend zu den Bedürfnissen und dem Kontext der Nutzer. Google Research geht weiter, mit einem Modell, das für einen einzigen Prompt eine ganze interaktive Seite schreibt. Einen formalen Standard gibt es nicht, daher steht der Begriff heute für sehr unterschiedliche Bauweisen.

Vier Wege, sie zu bauen

Die wichtigsten Unterschiede sind, wer entscheidet, was auf dem Bildschirm erscheint, und woher die Daten kommen.

AnsatzWer das Layout bestimmtWoher die Daten kommenBeispiele
Das Modell schreibt die OberflächeDas Modell, als HTML, CSS und JavaScriptWas das Modell weiß oder bekommtGenerative UI von Google Research, offener Modus von CopilotKit
Das Modell setzt freigegebene Komponenten zusammenDas Modell, aus Ihrem KatalogIhre Tools und das ModellA2UI, OpenUI von Thesys, Generative UI von assistant-ui
Tools werden Ihren Komponenten zugeordnetSie, im Voraus; das Modell wählt ein ToolIhre ToolsVercel AI SDK, CopilotKit, Tool-UIs von assistant-ui
Eine API liefert eine typisierte KarteDer Kartentyp, mit Ihrem Theme und LayoutMeist WebKnox-Quellen, auf der Karte genanntWebKnox

Zwei verwandte Standards regeln, wie eine Oberfläche in die App gelangt, nicht wer sie erstellt. MCP Apps lassen einen MCP-Server seine eigene Ansicht im Chat zeigen, und Adaptive Cards sind JSON-Karten, die eine Host-App nativ darstellt. WebKnox gibt es auch als MCP App.

So funktionieren typisierte Karten

Ihre App sendet die Unterhaltung und bekommt Daten zurück, die sie gegen ein Schema prüfen kann.

  1. Eine Frage geht hinein

    Senden Sie die Unterhaltung. WebKnox wählt einen Skill oder antwortet matched: false, damit Ihr eigenes Modell übernehmen kann.

  2. Eine typisierte Karte kommt zurück

    Die Antwort enthält einen Kartentyp, Daten nach dem JSON Schema des Typs, reinen Text und ihre Quellen.

  3. Ihre App zeigt sie

    <webknox-answer> stellt jeden Kartentyp in Ihrem Theme dar. Für andere Bildschirme gibt es gehostete Einbettungen und Bilder.

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", …}]}

Im Code ist es ein einziges Tool mit dem AI SDK. Ohne Code fügen Sie es Ihrer KI-App über MCP hinzu.

17 Kartentypen, bereit zum Anzeigen

Das sind aufgezeichnete Antworten, dargestellt vom selben Element, das auch Ihre App nutzen würde.

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

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).

Cozy farming gamesKinder-Tablet

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 seaMagazin
Alle 43 Beispiele ansehen

Wann WebKnox die falsche Wahl ist

Typisierte Karten passen nur zu Fragen, für die WebKnox eine Karte hat.

  • Ihre Oberfläche dreht sich um Ihre eigenen Daten, etwa Bestellungen, Tickets oder Dashboards. Nutzen Sie Tools, die Ihren Komponenten zugeordnet sind, oder einen Katalog.
  • Sie wollen Formulare und mehrstufige Abläufe. WebKnox zeigt Antworten, nicht die Prozesse Ihrer App.
  • Sie brauchen ein Layout, das keine Karte hat. Ein Katalog oder eine generierte Oberfläche gibt Ihnen mehr Freiheit, aber auch mehr zu prüfen.
  • Sie brauchen Websuche oder lange Recherchen. WebKnox beantwortet, wofür es eine Karte hat, und sagt es, wenn es keine hat.

WebKnox passt, wenn Menschen in Ihrem Chat, Ihrem Assistenten oder auf Ihrem Display Alltagsfragen stellen und Sie eine Antwort wollen, die gut aussieht, ohne dass Sie sie gestalten müssen.

Fragen zu Generative UI

Was ist Generative UI?

Eine Oberfläche, die KI für den Moment erstellt, statt dass sie vollständig vorab entworfen wird. Je nach Werkzeug schreibt ein Modell sie, setzt sie aus freigegebenen Komponenten zusammen oder wählt eine fertige aus.

Ist WebKnox Generative UI?

Im weiten Sinn ja: Jede Frage bekommt die passende Karte, gefüllt mit ihren Daten. Kein Modell schreibt den Code der Karte, was diesen Ansatz zum am stärksten eingeschränkten und am leichtesten testbaren macht.

Kann ein Modell bei einer Karte Fehler machen?

Die meisten Karten zeigen Daten aus genannten Quellen, etwa MET Norway für das Wetter. Mancher Text stammt von einem Modell: zum Beispiel die Zeilen eines Vergleichs, während seine Fotos von Wikimedia Commons kommen. Hat WebKnox keine Antwort, sagt es das mit matched: false, und Ihr eigenes Modell antwortet.

Funktioniert es mit dem AI SDK und MCP?

Ja. @webknox/ai-sdk fügt es dem AI SDK als Tool hinzu, und der MCP-Server fügt es Claude, ChatGPT, VS Code und anderen KI-Apps hinzu.

Bringen Sie Ihre erste Karte noch heute live

Kostenlosen API-Key holenZum Schnellstart