Dynamic Form Demo

This page demonstrates the component middleware system. When your backend streams a JSON component directive (e.g., {"component": "DynamicForm", "props": {...}}), the widget renders an interactive form with dynamically generated fields. The AI creates contextually appropriate forms based on what you ask.

The Preview form (no LLM) button below uses controller.injectComponentDirective(...) to render the form directly from host code — same path the LLM uses, but instant. Useful for QA, design previews, debug toggles, and local tools that want to render a registered component instead of plain text.

Inline Form Embed

Renders the same DynamicForm bubble the AI would emit.