Layout Configuration Specification

Overview

While the Component Manifest defines what is theoretically possible, the Layout Configuration (or Layout Config) defines what is actually happening on the screen.

When an AI Agent decides to reshape the UI based on user intent, it does not write React code. Instead, it generates a Layout Config JSON payload. This payload references the component ids declared in the manifest and supplies concrete values for their props.

The Layout Config Object

Every mutation requested by the agent is encapsulated in a layout action object.

{
"action": "UPDATE_LAYOUT",
"target_id": "main-workspace",
"payload": {
  "id": "KanbanBoard",
  "props": {
    "groupBy": "status"
  },
  "children": [
    {
      "id": "KanbanColumn",
      "props": {
        "title": "To Do"
      }
    }
  ]
}
}

action (String)

The type of mutation the agent is requesting.

• UPDATE_LAYOUT: Replaces the children of the target component with the new payload.
• APPEND_LAYOUT: Appends the payload to the existing children of the target.
• RESET: Reverts the UI to its default, developer-defined state.

target_id (String)

The ID of the Slot or Component where this layout mutation should be applied.

payload (Object)

The actual tree of components to be rendered.

Constructing the Payload Tree

The payload is a recursive structure representing the UI tree. Each node must have the following structure:

• id: Must exactly match a component id from the Manifest.
• props: An object containing the values for the component. The Validation Pipeline will ensure these values strictly conform to the schema defined in the manifest.
• children: (Optional) An array of nested layout payload objects.

Example: Deeply Nested Layout

{
"action": "UPDATE_LAYOUT",
"target_id": "email-list",
"payload": {
  "id": "VStack",
  "props": { "spacing": "sm" },
  "children": [
    {
      "id": "EmailCard",
      "props": { "sender": "Alice", "subject": "Project Update", "unread": true }
    },
    {
      "id": "EmailCard",
      "props": { "sender": "Bob", "subject": "Lunch?", "unread": false }
    }
  ]
}
}