Components
Artifacts
Artifacts
Chrome frame for a Joey generative-UI artifact — a header (icon + label) over a body. The body is either real content, a streaming placeholder, or a fallback when a tool's args can't be rendered.
Canonical
Milestones
Exchanging contracts — 6 of 10 stages complete.
<koala-artifact icon="Flag" label="Milestones">...</koala-artifact>
A wrapper only. Which tool maps to which partial is resolved server-side by the
IArtifactRenderer registry — this component never switches on a tool name itself.
Variants
2 icons shown
Milestones
6 of 10 stages complete.
Milestones
icon="Flag"
Joey
Any future generative-UI block.
Generic AI artifact
icon="Sparkles"
States
3 states
Milestones
6 of 10 stages complete.
Content
Milestones
Putting that together…
Placeholder
placeholder
Milestones
Couldn't display this.
Fallback
fallback
Props
4 properties| Property | Type | Notes |
|---|---|---|
| icon | IconName | The header glyph. Defaults to Sparkles. |
| label | string | The header text naming the artifact (e.g. "Milestones"). |
| placeholder | bool | Shows "Putting that together…" instead of the child content. |
| fallback | bool | Shows "Couldn't display this." instead of the child content — used when a tool's args fail to parse or no renderer is registered for it. |
Do & don't
Milestones
6 of 10 stages complete.
Do
Let the C# registry pick the renderer/partial by tool name, and pass this frame only the header + body content.
@if (tool == "render_milestones") { ... }
Don't
Don't branch on the tool name inside a partial or Razor page — that dispatch belongs to IArtifactRenderer alone.