How it works

create_artifact streams a curated DRYL component tree — KPI stats, charts, a region picker — that builds itself node by node into the canvas. Click a button inside the artifact and the interaction routes back through the chat as the next turn: update_artifact patches the canvas in place, inserting new nodes and retitling existing ones with a staggered FLIP glide.

You hand DrylCanvasTools.All to a real agent; each tool call runs its own JSON sub-generation on a tool-less generator agent, streaming the artifact into the canvas.

Where the innovation lies: the answer is an interface, not text — and interacting with it is a first-class conversational turn. The model builds UI, the user manipulates it, and the manipulation feeds the model's next response.

Every patch has exactly one movement. An inserted node enters, a moved node glides, a removed node exits — and a node whose content changed pulses an accent ring, so no update happens off-screen. Numbers in stat nodes count up to their new value, the header carries a live element count while the artifact streams, and replacing the whole artifact morphs the old tree into the new one instead of cutting. The expand button grows the canvas into a fullscreen overlay through the same view transition.

// The canvas tools get their own tool-less generator agent for the JSON sub-generation.
var tools = DrylCanvasTools.Create(_run, generatorAgent);
var agent = new ChatClientAgent(chatClient, tools: tools.All);

<DrylAiCanvas Run="_run" OnInteraction="HandleInteraction" />

@* A click inside the artifact becomes the next user turn: *@
@* Ask(interaction.ToPromptMessage()) — the model answers with update_artifact. *@