Generative UI

생성형 UI

Instead of plain text, the model assembles a structured interface — a card, a table, buttons — fitted to the answer itself.

Also known as: Dynamic UI responseRich response cardsTool UI
···
html
<div class="wrap">
  <div class="bubble">강남역 근처 조용한 카페 찾아줄게요</div>
  <div class="card" id="card">
    <div class="sk" id="sk"><div class="skimg"></div><div class="skl w70"></div><div class="skl w40"></div></div>
    <div class="real" id="real">
      <div class="img"></div>
      <div class="info">
        <strong>루프탑 브루잉</strong>
        <span class="meta">★ 4.7 · 도보 4분</span>
        <button class="cta">길찾기</button>
      </div>
    </div>
  </div>
</div>
css
.wrap{width:min(280px,94%);display:grid;gap:9px}
.bubble{padding:9px 12px;border-radius:12px;border-bottom-left-radius:4px;background:var(--surface);border:1px solid var(--line);color:var(--fg);font-size:11.5px}
.card{position:relative;height:96px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.sk{position:absolute;inset:0;padding:12px;display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start;opacity:1;transition:opacity .3s}
.skimg{width:44px;height:44px;border-radius:9px;background:var(--line);animation:pulse 1.1s ease-in-out infinite}
.skl{height:8px;border-radius:4px;background:var(--line);margin-top:6px;animation:pulse 1.1s ease-in-out infinite}
.w70{width:70%}.w40{width:40%}
@keyframes pulse{50%{opacity:.4}}
.real{position:absolute;inset:0;padding:10px;display:grid;grid-template-columns:60px 1fr;gap:10px;align-items:center;opacity:0;transition:opacity .3s}
.card[data-ready] .sk{opacity:0}
.card[data-ready] .real{opacity:1}
.img{width:60px;height:60px;border-radius:10px;background:linear-gradient(135deg,var(--accent-2),var(--accent))}
.info{display:grid;gap:3px}
.info strong{font-size:12px;color:var(--fg)}
.meta{font-size:10px;color:var(--muted)}
.cta{margin-top:3px;justify-self:start;padding:4px 10px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-size:10px;font-weight:700;cursor:pointer}
js
const card = document.getElementById('card');
function run() {
  card.removeAttribute('data-ready');
  setTimeout(() => card.setAttribute('data-ready', ''), 1200);
}
run();
setInterval(run, 3400);

The best answer to "recommend a cafe near me" might not be a sentence at all — it might be a card with a photo, rating, distance, and a "get directions" button. Generative UI has the model decide not just the content of an answer but the shape to present it in — a card, a list, a comparison table, a form — and a real interface component renders to match.

The usual implementation has the model return structured data (JSON) against a fixed schema instead of free-form text, which the client then slots into a pre-built component matching that shape. The model isn't generating raw HTML/CSS from scratch — it's closer to choosing "use this component, filled with this data" — which is what keeps the result inside a consistent design system.

The pattern is only complete if pressing a button inside it (say, "add to cart") feeds that action back into the conversation so the model's next response can react to it. A pretty card whose interactions are disconnected from the conversation is only half the pattern.

When to use

Use it when the answer is inherently structured — comparing products, booking, scheduling, location. Forcing a card onto an answer that reads naturally as prose — an explanation, an opinion — just makes it harder to read.