Renderer Reference

Overview

The @ouas/renderer package acts as the bridge between the AI Agent's JSON output and the React DOM. It parses the incoming Layout Config state and recursively renders the UI tree dynamically.

Installation

Install the Renderer SDK in your host application:

npm install @ouas/renderer

How it Works

The renderer takes two primary inputs:

1. The Global Registry: The list of all components exposed via @ouas/react.
2. The Layout State: The JSON payload provided by the AI.

When the Renderer mounts, it reads the JSON state, looks up each id in the registry, and instantiates the component using the provided props.

Example Usage

import { Renderer } from '@ouas/renderer';
import { useAgentState } from '@/hooks/useAgentState';

export function ChatInterface() {
// Fetch the current layout state from your backend
const { layoutConfig } = useAgentState();

return (
  <div className="chat-window">
    {/* The Renderer dynamically paints the UI tree */}
    <Renderer layout={layoutConfig} />
  </div>
);
}

Error Boundaries

The Renderer is wrapped in a strict React Error Boundary. Because the AI might hallucinate an invalid prop (e.g., passing a string when a number was expected), the Renderer automatically catches rendering crashes.

When a component fails to render, the Renderer:

1. Prevents the entire React application from crashing.
2. Renders a fallback UI block indicating the broken component.
3. Emits an event back to the AI Agent detailing the stack trace so the agent can self-correct the mistake in its next turn.

Fallback UI Example

If WeatherCard fails due to a missing required prop, the Renderer injects this safely in its place:

<div className="ouas-error-boundary">
<span>⚠️ Failed to render 'weather-card'</span>
<p>Missing required property: 'temperature'</p>
</div>