DRYL COMPONENTS
Color mode: System — switch to light
2.20.1
Agents

AI Field

AI-aware

DrylAiField makes any input AI-capable in one line — by wrapping it, without changing the input or its two-way binding.

How it works

Wrap an existing input and DrylAiField does the rest: the DrylAiScope cascade lights the shared aura, and a DOM value bridge streams the agent's answer straight into the field. Your inner @bind-Value keeps working, because the bridge dispatches native input events — the field never knows the AI is typing.

The interaction adapts to context: an empty field generates; a text selection transforms only the selection; with no Instruction a mini-prompt popover asks what to do. Accept the result, or reject it with Esc.

Where the innovation lies: zero-rewrite AI on inputs you already ship. Nothing about the underlying form control changes.

razor
<DrylAiField Agent="_agent" Instruction="Make it more professional">
    <DrylTextarea @bind-Value="_body" Label="Email" Rows="7" />
</DrylAiField>

AI field — one line makes any input AI-capable

DrylAiField wraps an existing input without touching it: the DrylAiScope cascade lights the shared aura, and a DOM value bridge streams the agent's answer straight into the field — the inner two-way binding keeps working because the bridge dispatches native input events. Empty field → generate; selected text → transform only the selection; no Instruction → a mini-prompt popover. Accept or reject (Esc) when the stream settles.

Hover the field and click ✨ — the simulated agent rewrites the draft, streamed live into the field. Accept it, or discard it with Esc.

An unhandled error has occurred. Reload x

Reconnecting to the server…

Attempt /

Next try in s