The Three Types of Generative UI: Static, Declarative and Fully Generated

Why Generative UI matters

“Generative UI” sounds magical until you ship it. In production, UI isn’t just pixels, it’s contracts: accessibility, performance, usability, analytics, and safety. The trick is to let AI compose your UI without giving up control. Let’s go ahead and break down the pragmatic spectrum you can actually deploy today.

We’ll cover:

1. The three approaches to Generative UI
2. Clear examples of each
3. Pros and cons in real-world usage
4. When to choose which approach

The Spectrum at a Glance

Static UI: Pre‑built components for specific purposes. Most common in production.

Declarative UI (mix & match): AI assembles UI from a fixed registry of components. Flexible yet safe.

Fully generated UI: AI outputs raw HTML/CSS. Powerful but brittle. Best used at build‑time, not runtime.

The general rule of thumb is that the more freedom you give the model, the more you must invest in guardrails!

1) Static UI Components

For this, AI doesn’t design or assemble the UI. Instead, developers pre‑build specific components for specific needs. AI only fills parameters (like text or numbers).

Example:

• A dedicated weather card that always shows city + temperature.
• A line chart card that always renders a chart with fixed formatting.

Pros:

• Maximum reliability.
• Easy to validate, monitor, and ensure accessibility.
• Best for critical workflows (checkout, compliance, data integrity).

Cons:

• Least flexible. All components must be built in advance.
• Slower to adapt to unexpected requests.

Reality check: This is the default choice for most production-critical surfaces. It’s not flashy, but it guarantees reliability, which is what matters most in high‑stakes workflows.

‍

2) Declarative UI (Mix & Match)

Here, AI assembles UI from a registry of pre‑approved components. Each component has flexible props (title, subtitle, icons, charts, etc), but the set of available building blocks is finite.

Example:

• AI generates a dashboard by selecting WeatherCard, LineChart, and TableCard from a registry.
• Each block is predictable but composable in infinite combinations.

Pros:

• Safe and consistent design.
• Flexible enough for many dynamic use cases.
• Easier to test and maintain than raw generation.

Cons:

• Less freedom than fully generated.
• Requires upfront investment to design and maintain the registry.

Reality check: This is the sweet spot for most agentic apps. It balances creativity with safety. You get variety without chaos and the registry gives you guardrails that make the output reliable.

Here is an example of Declarative UI in action: “Array with Details” (JSON Forms)

Selecting “Array with details” in the JSON Forms UI schema instantly renders a nested editor in the Preview. Proof that the UI behavior comes from configuration, not code.

You can play around with different examples here.

‍

3) Fully Generated UI

In this type of generative UI, AI generates and outputs raw HTML or CSS for the interface.

Example:

• Asking an agent to generate a new settings page and it writes the full markup.

Pros:

• Maximum flexibility and creative freedom.
• Great for prototypes, demos, or design scaffolding.

Cons:

• Hard to control style and accessibility.
• Insecure (risk of broken markup, XSS, layout issues).
• Inconsistent look and feel.

Reality check: Use for build‑time codegen or prototyping. It’s great for hackathons or scaffolding, but too unpredictable and unsafe for live users. Generally, you should avoid in runtime production apps.

Here is an example of Fully Generated UI in action: “Build a Landing Page” (with Loveable)

Prompt → page.‍

With one simple prompt, AI generates a complete, responsive page and code in seconds with no prebuilt components. A fully generated UI! Notice how some buttons don't work, the color scheme was randomly chosen, and context is completely generated at runtime.

‍

So When to Choose Which?

Static

Best for mission-critical flows (payments, compliance, reporting).
✅ Most reliable, accessible, and consistent.
❌ Inflexible, requires upfront component design.

Declarative‍

Best for dashboards, chat-driven assistants, and multi-modal apps.
✅ Balanced flexibility and safety.
❌  Requires ongoing registry upkeep.

Fully Generated

Best for prototyping, build-time scaffolds, and experiments.
✅ Maximum creativity and fast iteration.
❌  Brittle and unsafe at runtime.

Where CopilotKit Fits

Generative UI is a spectrum. At one end you have static, reliable UI for critical paths. In the middle you get declarative, mix‑and‑match dashboards. And at the other end fully generated HTML for experiments.

The key is to match freedom to risk tolerance. Start static, move to declarative for richer experiences, and reserve fully generated UI for controlled build‑time creativity.

Most production apps today lean on static or declarative generative UI. CopilotKit provides built-in primitives (typed actions, shared state, and generative UI helpers) that make these approaches much easier to implement without reinventing the wheel. If you’re exploring this spectrum in practice, CopilotKit can give you a head start.

But remember, the key ideas here apply broadly, no matter what stack or framework you choose.

Want to learn more?

→ Book a call and connect with our team

Please tell us who you are → what you're building → company size in the meeting description and we'll help you get started today!