Iniciar sessãoObter chave de API

Generative UI

Generative UI sem código gerado

Generative UI significa que a interface é criada para a pergunta em vez de ser concebida de antemão. A WebKnox fá-lo com cartões tipados: a sua app mostra um cartão testado, com fontes, e nenhum modelo escreve o respetivo código.

Experimente no Answer LabComparar as abordagens
Na sua 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°.

O que significa Generative UI

O Nielsen Norman Group define-a como uma interface gerada em tempo real pela IA para se adaptar às necessidades e ao contexto do utilizador. A Google Research vai mais longe, com um modelo que escreve uma página interativa completa para um único prompt. Não existe uma norma formal, por isso o termo abrange hoje formas de construir muito diferentes.

Quatro formas de a criar

As principais diferenças são quem decide o que aparece no ecrã e de onde vêm os dados.

AbordagemQuem decide o esquemaDe onde vêm os dadosExemplos
O modelo escreve a interfaceO modelo, em HTML, CSS e JavaScriptO que o modelo sabe ou recebeA Generative UI da Google Research, o modo aberto do CopilotKit
O modelo compõe componentes aprovadosO modelo, a partir do seu catálogoAs suas ferramentas e o modeloA2UI, OpenUI da Thesys, a Generative UI do assistant-ui
As ferramentas estão associadas aos seus componentesO programador, de antemão; o modelo escolhe uma ferramentaAs suas ferramentasVercel AI SDK, CopilotKit, as UI de ferramentas do assistant-ui
Uma API devolve um cartão tipadoO tipo de cartão, com o seu tema e esquemaSobretudo fontes da WebKnox, indicadas no cartãoWebKnox

Duas normas relacionadas decidem como uma interface chega à app, não quem a cria. As MCP Apps permitem que um servidor MCP mostre a sua própria vista no chat, e os Adaptive Cards são cartões JSON que uma app anfitriã apresenta de forma nativa. A WebKnox também está disponível como MCP App.

Como funcionam os cartões tipados

A sua app envia a conversa e recebe dados que pode validar com um esquema.

  1. Entra uma pergunta

    Envie a conversa. A WebKnox escolhe uma skill ou responde matched: false para que o seu próprio modelo possa responder.

  2. Volta um cartão tipado

    A resposta tem um tipo de cartão, dados que seguem o JSON Schema desse tipo, texto simples e as respetivas fontes.

  3. A sua app mostra-o

    O <webknox-answer> apresenta todos os tipos de cartão no seu tema. Para outros ecrãs, há incorporações alojadas e imagens.

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

Em código, é uma só ferramenta com o AI SDK. Sem código, adicione-a à sua app de IA através do MCP.

17 tipos de cartão, prontos a mostrar

Estas são respostas gravadas, mostradas pelo mesmo elemento que a sua app usaria.

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 gamesTablet infantil

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 os 43 exemplos

Quando a WebKnox não é a escolha certa

Os cartões tipados só servem para perguntas para as quais a WebKnox tem um cartão.

  • A sua interface é sobre os seus próprios dados, como encomendas, tickets ou painéis. Use ferramentas associadas aos seus componentes, ou um catálogo.
  • Quer formulários e fluxos com vários passos. A WebKnox mostra respostas, não os processos da sua app.
  • Precisa de um esquema que nenhum cartão tem. Um catálogo ou uma interface gerada dá-lhe mais liberdade, com mais para rever.
  • Precisa de pesquisa na web ou de investigação longa. A WebKnox responde quando tem um cartão e diz quando não tem.

Faz sentido quando as pessoas fazem perguntas do dia a dia no seu chat, assistente ou ecrã, e quer uma resposta com bom aspeto sem ter de a conceber.

Perguntas sobre a Generative UI

O que é a Generative UI?

Uma interface criada no momento pela IA, em vez de totalmente concebida de antemão. Consoante a ferramenta, um modelo escreve-a, compõe-na a partir de componentes aprovados ou escolhe uma já feita.

A WebKnox é Generative UI?

Em sentido lato, sim: cada pergunta recebe o cartão que lhe corresponde, preenchido com os respetivos dados. Nenhum modelo escreve o código do cartão, o que faz desta a abordagem mais restrita e a mais fácil de testar.

Um modelo pode errar num cartão?

A maioria dos cartões mostra dados de fontes indicadas, como a MET Norway para o tempo. Alguns textos são escritos por um modelo: as linhas de uma comparação, por exemplo, enquanto as fotos vêm da Wikimedia Commons. Se a WebKnox não tiver resposta, di-lo com matched: false, e é o seu próprio modelo que responde.

Funciona com o AI SDK e o MCP?

Sim. O @webknox/ai-sdk adiciona-o ao AI SDK como ferramenta, e o servidor MCP adiciona-o ao Claude, ao ChatGPT, ao VS Code e a outras apps de IA.

Tenha o seu primeiro cartão a funcionar ainda esta tarde

Obter uma chave de API gratuitaLer o guia de início rápido