A2UI Playground

The Playground is your sandbox for testing Agent-to-UI interactions without setting up a full backend.

Key Features

1. JSON Preview

Paste any A2UI JSON payload into the left panel. The right panel renders the component in real-time. This is perfect for:

Validating JSON schema structure.
Testing responsive behavior.
Debugging props and data types.

2. Stream Simulation

The playground simulates the streaming nature of LLM tokens.

Toggle “Stream Mode” to see how your UI handles incremental data updates.
Adjust “Token Speed” to mimic different LLM latencies.

3. Registry Mocking

You can define a virtual registry in the settings tab.

// Virtual Registry Config
{
  "weather-card": {
    "module": "./components/Weather.js",
    "export": "WeatherCard"
  }
}

Note: In the browser version, only standard HTML/Tailwind components are supported for rendering.

Debugging Tips

”Invalid Schema” Error

If you see a red flash, your JSON is likely malformed. check for:

Missing closing braces }.
Trailing commas (JSON standard does not allow them).
Type mismatches (e.g., sending a string to a number prop).

”Component Not Found”

The renderer recieves a type that isn’t in the registry. Error: Unknown component type 'super-button'. Fix: Ensure your JSON type matches exactly what is defined in your Registry key.

Ready to build? Open Playground or Install the VS Code Extension.