Overview
Schema-driven UI for AI output. Components that consume structured LLM responses and render.
Data & visualization
Chart (bar)
Data table
Documents
Code block
Markdown document
Interactive
Form (schema)
Calculator
An artifact is a Gremorie primitive that takes a structured payload emitted by an LLM (validated against a schema) and renders it as UI. Charts that the model "draws". Tables that the model fills. Forms that the model designs on the fly.
Artifacts are the AI-native differentiator of Gremorie. They are the reason the registry and MCP server exist: a model that knows the artifact catalog can plan output that is structurally valid, not just textually coherent.
Anatomy
Each artifact ships with:
| Layer | What it provides |
|---|---|
| Schema | TypeScript + Zod definition for the LLM contract |
| Renderer | Component that consumes a parsed payload and renders primitives |
| Streaming behavior | Partial render rules while the LLM streams |
| Prompt examples | How to ask a model to emit valid output |
Artifacts vs Blocks vs Components
| Components | Blocks | Artifacts | |
|---|---|---|---|
| Source of state | Caller | Caller | LLM response (schema-validated) |
| Streaming | n/a | Optional | First-class -- partial renders during generation |
| AI awareness | None | None | Schema is exposed via MCP get_artifact() |
| Example | Button | chat-surface | chart (LLM emits chart spec, artifact renders Recharts) |
Categories
Chart
bar, line, pie, area, multi-series. Model emits a spec, artifact renders Recharts/D3.
Code
code-block, code-diff, code-runner with sandbox embed.
Document
markdown, outline, document-canvas with collaborative selections.
Data
table, list, json-tree with paging, sort, filter.
Form
dynamic form from JSON Schema, multi-step survey, slot-based custom fields.
Interactive
calculator, timeline, kanban, gallery.
Featured artifacts
One artifact per category, each demonstrating the "schema in, UI out" pattern with real previews and production-ready code.
Chart (bar)
Bar chart from a schema-driven dataset.
Code block
Syntax-highlighted code with copy button.
Markdown document
Streaming markdown rendered with prose typography.
Data table
Filterable table over JSON rows.
Form (schema)
Form generated from a JSON field schema.
Calculator
Stateful tool widget with editable inputs.
How a model uses an artifact
The model calls the MCP tool get_artifact("chart") and reads the schema
(categories, series, color group, axis labels).
The model emits a JSON payload that matches the schema, with the revenue
figures wired into series[0].data.
The artifact validates the payload against the schema and renders a real Recharts bar chart with Gremorie tokens and chart palette.
If the payload is invalid, the artifact renders a fallback error state instead of crashing -- the schema is the contract, not the suggestion.
Status
The artifact catalog lands progressively. The chart artifact is the
pilot, since the Angular edition already ships chart primitives via
@gremorie/ng-data. Other categories follow as their underlying
primitives ship.
For the AI primitives that compose artifacts (PromptInput,
Conversation, Message, Reasoning, Tool), see Components /
AI.