CopilotKit

GenerativeUISurface

Vue 3 component that marks a named area of your page where the agent can render generated UI.

Open your coding agent in your project's folder, or in an empty folder for a new app.This runs in a coding agent on your computer.

Overview

The chat is not always the right place for generated UI. A product grid belongs in the product area of your page. GenerativeUISurface marks that area as a target. The agent can then render your components into it.

Until the agent renders into the target, the component shows its default slot.

Generative UI is experimental. Use GenerativeUISurface under a CopilotKitProvider that has a generativeUI config. Outside such a provider, the component throws an error.

For a full walkthrough, see Surfaces.

Import

import { GenerativeUISurface } from "@copilotkit/vue/v2/generative-ui";

Props

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Other attributes, such as class and style, go to the element around the rendered surface. That element has a data-generative-ui-surface attribute with the id.

Slots

Prop

Type

Example

<script setup lang="ts">
import { GenerativeUISurface } from "@copilotkit/vue/v2/generative-ui";
import { shopUI } from "./shop-ui";
import ProductRow from "./ProductRow.vue";

defineProps<{ products: { id: string; name: string }[] }>();
</script>

<template>
  <GenerativeUISurface
    id="featured"
    :ui="shopUI"
    description="The Featured Products row. Show products here as a ProductGrid with one ProductCard for each product."
    :components="['ProductGrid', 'ProductCard']"
    class="featured-row"
  >
    <ProductRow :products="products" />
  </GenerativeUISurface>
</template>

shopUI is the object from createGenerativeUI. The provider gets the same object:

<CopilotKitProvider runtime-url="/api/copilotkit" :generativeUI="{ ui: shopUI }">
  <App />
</CopilotKitProvider>

Behavior

  • The target registers after mount, so server rendering registers nothing.
  • The agent knows about the target only while it is mounted. When it unmounts, the agent cannot render into it.
  • If components names a component that the UI does not have, the name is dropped. In development, a warning is logged.
  • A change to id, description, or components registers the target again. A new array with the same names does not.

Related