AI Field

Agents

AI-aware

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

View source

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.

Email body

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

Translating the field

Every word the field shows or announces to a screen reader comes from one AiFieldTexts record, in English by default. Replace only what you translate. The agent's instruction and its answer are your content and are never touched.

razor

<DrylAiField Agent="_agent" Instruction="Formuliere professioneller"
             Texts="@(AiFieldTexts.Default with
             {
                 Trigger = "Mit AI schreiben",
                 Accept = "Übernehmen",
                 Reject = "Verwerfen",
                 Ready = "AI-Vorschlag bereit — übernehmen oder verwerfen.",
             })">
    <DrylTextarea @bind-Value="_body" Label="E-Mail" Rows="7" />
</DrylAiField>