Iniciar sesiónObtener clave de API

Generative UI

Generative UI sin código generado

Generative UI significa que la interfaz se crea para la pregunta en lugar de diseñarse de antemano. WebKnox lo hace con tarjetas tipadas: tu app muestra una tarjeta probada y con fuentes, y ningún modelo escribe su código.

Pruébalo en el Answer LabComparar los enfoques
En tu 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°.

Qué significa Generative UI

Nielsen Norman Group la define como una interfaz generada en tiempo real por la IA para ajustarse a las necesidades y el contexto del usuario. Google Research va más allá, con un modelo que escribe una página interactiva completa para un solo prompt. No hay un estándar formal, así que hoy el término abarca formas de construir muy distintas.

Cuatro formas de crearla

Las principales diferencias son quién decide qué aparece en pantalla y de dónde vienen los datos.

EnfoqueQuién decide el diseñoDe dónde vienen los datosEjemplos
El modelo escribe la interfazEl modelo, en HTML, CSS y JavaScriptLo que el modelo sabe o recibeLa Generative UI de Google Research, el modo abierto de CopilotKit
El modelo combina componentes aprobadosEl modelo, a partir de tu catálogoTus herramientas y el modeloA2UI, OpenUI de Thesys, la Generative UI de assistant-ui
Las herramientas se asignan a tus componentesTú, de antemano; el modelo elige una herramientaTus herramientasVercel AI SDK, CopilotKit, las UI de herramientas de assistant-ui
Una API devuelve una tarjeta tipadaEl tipo de tarjeta, con tu tema y tu diseñoSobre todo fuentes de WebKnox, citadas en la tarjetaWebKnox

Dos estándares relacionados deciden cómo llega una interfaz a la app, no quién la crea. Las MCP Apps permiten que un servidor MCP muestre su propia vista en el chat, y las Adaptive Cards son tarjetas JSON que una app anfitriona muestra de forma nativa. WebKnox también está disponible como MCP App.

Cómo funcionan las tarjetas tipadas

Tu app envía la conversación y recibe datos que puede comprobar con un esquema.

  1. Entra una pregunta

    Envía la conversación. WebKnox elige una habilidad o responde matched: false para que conteste tu propio modelo.

  2. Vuelve una tarjeta tipada

    La respuesta trae un tipo de tarjeta, datos que siguen el JSON Schema de ese tipo, texto plano y sus fuentes.

  3. Tu app la muestra

    <webknox-answer> muestra cada tipo de tarjeta con tu tema. Para otras pantallas hay inserciones alojadas e imágenes.

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

En código, es una sola herramienta con el AI SDK. Sin código, añádela a tu app de IA por MCP.

17 tipos de tarjeta, listos para mostrar

Son respuestas grabadas, mostradas por el mismo elemento que usaría tu 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 seaRevista
Ver los 43 ejemplos

Cuándo WebKnox no es la opción adecuada

Las tarjetas tipadas solo sirven para preguntas para las que WebKnox tiene una tarjeta.

  • Tu interfaz trata de tus propios datos, como pedidos, tickets o paneles. Usa herramientas asignadas a tus componentes, o un catálogo.
  • Quieres formularios y flujos de varios pasos. WebKnox muestra respuestas, no los procesos de tu app.
  • Necesitas un diseño que ninguna tarjeta tiene. Un catálogo o una interfaz generada te dan más libertad, con más que revisar.
  • Necesitas búsqueda web o investigaciones largas. WebKnox responde cuando tiene una tarjeta y lo dice cuando no la tiene.

Encaja cuando la gente hace preguntas cotidianas en tu chat, asistente o pantalla, y quieres una respuesta que se vea bien sin tener que diseñarla.

Preguntas sobre la Generative UI

¿Qué es la Generative UI?

Una interfaz que la IA crea en el momento en lugar de diseñarse por completo de antemano. Según la herramienta, un modelo la escribe, la compone con componentes aprobados o elige una ya hecha.

¿WebKnox es Generative UI?

En sentido amplio, sí: cada pregunta recibe la tarjeta que le corresponde, rellena con sus datos. Ningún modelo escribe el código de la tarjeta, lo que lo convierte en el enfoque más restringido y el más fácil de probar.

¿Puede un modelo equivocarse en una tarjeta?

La mayoría de las tarjetas muestran datos de fuentes indicadas, como MET Norway para el tiempo. Algunos textos los escribe un modelo: las filas de una comparación, por ejemplo, mientras que sus fotos vienen de Wikimedia Commons. Si WebKnox no tiene respuesta, lo dice con matched: false, y responde tu propio modelo.

¿Funciona con el AI SDK y MCP?

Sí. @webknox/ai-sdk lo añade al AI SDK como herramienta, y el servidor MCP lo añade a Claude, ChatGPT, VS Code y otras apps de IA.

Lanza tu primera tarjeta esta misma tarde

Obtener una clave de API gratisLeer la guía rápida