# Syntari > A design system for people and agents. 137 components, a machine-readable registry, and a renderer that validates what agents compose. 59 components have render contracts an agent can use from Screen IR. Syntari ships editable HTML, CSS, and JavaScript components. An agent describes a screen as Screen IR (JSON), validates it against the published contracts, and renders it with the same components people use. Actions in a rendered screen are requests: the host application decides whether anything runs. Install: `npm install syntari-ui`. MCP (read-only, stdio): `npx -y syntari-ui mcp`. Version 0.4.0. ## Start here - [Agent guide](https://syntariui.giovanitier.com/AGENT-GUIDE.md): discovery, composition, validation, and host authorization - [Generative UI guide](https://syntariui.giovanitier.com/system/?guide=generative-ui): Screen IR, layouts, validation codes, limits, actions - [AI behaviour patterns](https://syntariui.giovanitier.com/system/?guide=ai-patterns): clarification, uncertainty, delegation, recovery, memory, generation - [Full context for models](https://syntariui.giovanitier.com/llms-full.txt): every render contract with props, actions, and a valid sample ## Registry - [Component index](https://syntariui.giovanitier.com/registry/index.json): all 137 components with status and renderable flag - [Screen IR schema](https://syntariui.giovanitier.com/registry/schema/sui.schema.json): the screen contract - [Component schema](https://syntariui.giovanitier.com/registry/schema/component.schema.json): the manifest contract, including actions - [Patterns](https://syntariui.giovanitier.com/registry/patterns/index.json): layouts, AI behaviour patterns, and complete Screen IR compositions - [Agent policy](https://syntariui.giovanitier.com/registry/agent-policy.json): validation is required; actions default to deny ## Components with a render contract - [Button](https://syntariui.giovanitier.com/registry/components/button.json): Trigger an immediate user action. - [Text input](https://syntariui.giovanitier.com/registry/components/text-input.json): Ask for one line of text, such as a name, an email address, or a link. - [Switch](https://syntariui.giovanitier.com/registry/components/switch.json): Show settings a person turns on or off, each with what it does. - [Checkbox](https://syntariui.giovanitier.com/registry/components/checkbox.json): Let a person pick any number of independent choices from a short list. - [Radio](https://syntariui.giovanitier.com/registry/components/radio.json): Let a person pick exactly one of a few choices they can see at once. - [Badge](https://syntariui.giovanitier.com/registry/components/badge-and-status.json): Label a status or a category in a few words, with a tone that says what it means. - [Metric summary](https://syntariui.giovanitier.com/registry/components/metric-and-sparkline.json): Show the numbers that matter now and how they moved. - [Avatar](https://syntariui.giovanitier.com/registry/components/avatar-and-group.json): Show who is involved, such as owners or reviewers, as a group of avatars with a caption. - [Progress ring](https://syntariui.giovanitier.com/registry/components/score.json): Show one score out of 100 as a ring, with what it measures and what it means. - [Progress bar](https://syntariui.giovanitier.com/registry/components/progress.json): Show how far each of a few measures is toward its whole, as a bar and a written percentage. - [Banner](https://syntariui.giovanitier.com/registry/components/banner.json): Report an outcome or a needed action inside the current context. - [Table](https://syntariui.giovanitier.com/registry/components/table.json): Compare records across the same few columns. - [Card](https://syntariui.giovanitier.com/registry/components/card.json): Hold one record or one idea in a surface that can stand on its own. - [Slider](https://syntariui.giovanitier.com/registry/components/slider.json): Let a person pick one value from a range when the exact number matters less than where it sits. - [Empty state](https://syntariui.giovanitier.com/registry/components/empty-state.json): Explain what belongs in an empty region and offer the next useful step. - [Activity list](https://syntariui.giovanitier.com/registry/components/activity-list.json): Show what happened, in order, with the context needed to trust it. - [Chat composer](https://syntariui.giovanitier.com/registry/components/chat-composer.json): Show a short conversation and let the person send the next message. - [Text area](https://syntariui.giovanitier.com/registry/components/text-area.json): Ask for a few sentences, such as a description, a reason, or a note. - [Searchable select](https://syntariui.giovanitier.com/registry/components/searchable-select.json): Let a person pick one option from a list too long to show at once, by typing to narrow it. - [Multi-select](https://syntariui.giovanitier.com/registry/components/multiselect.json): Let a person pick several options from a searchable list and see what they picked. - [Number input](https://syntariui.giovanitier.com/registry/components/number-stepper.json): Ask for a small whole number, such as seats or quantity, that a person nudges up or down. - [Date range picker](https://syntariui.giovanitier.com/registry/components/date-range-picker.json): Let a person choose a start and an end date, such as a reporting period or a trip. - [Selectable cards](https://syntariui.giovanitier.com/registry/components/selectable-cards.json): Let a person choose one option when each needs a sentence to explain it. - [Error state](https://syntariui.giovanitier.com/registry/components/error-and-retry.json): Say what failed, what is kept, and offer one way forward. - [Metadata list](https://syntariui.giovanitier.com/registry/components/metadata-list.json): Show the label and value pairs that describe one record. - [Agent todo list](https://syntariui.giovanitier.com/registry/components/agent-todo-list.json): Show an agent's plan as tasks with their state, and how many are done. - [Agent message](https://syntariui.giovanitier.com/registry/components/agent-message.json): Show one settled agent response with its author and the follow-ups a person can ask for. - [Prompt input](https://syntariui.giovanitier.com/registry/components/prompt-input.json): Let a person write the next request to an agent, optionally with one attachment. - [Code block](https://syntariui.giovanitier.com/registry/components/code-block.json): Show code or a command exactly as written, ready to copy. - [Approval card](https://syntariui.giovanitier.com/registry/components/approval-card.json): Summarize a completed piece of work and ask for a decision on it. - [File diff](https://syntariui.giovanitier.com/registry/components/file-diff.json): Show a proposed change to one file and ask the person to keep or discard it. - [Tool result](https://syntariui.giovanitier.com/registry/components/tool-result.json): Report what a tool run produced, with its outcome and key figures, and let a person ask for another run. - [Streaming response](https://syntariui.giovanitier.com/registry/components/streaming-response.json): Show an agent response as it arrives, with an explicit way to stop it. - [Tool approval](https://syntariui.giovanitier.com/registry/components/tool-approval.json): Require explicit human consent before an agent runs a consequential or external operation. - [Citations](https://syntariui.giovanitier.com/registry/components/citations.json): Disclose the sources behind an answer next to the answer, numbered and expandable. - [Agent activity](https://syntariui.giovanitier.com/registry/components/agent-activity.json): Keep a chronological record of what an agent did, separate from its plan. - [Range slider](https://syntariui.giovanitier.com/registry/components/range-slider.json): Let a person set a lowest and a highest value, such as a budget or a price range. - [Agent questions](https://syntariui.giovanitier.com/registry/components/agent-questions.json): Ask the person one focused question with a small set of answers, plus an optional note. - [Bar chart](https://syntariui.giovanitier.com/registry/components/chart-bars.json): Compare two series across the same checkpoints. - [Donut chart](https://syntariui.giovanitier.com/registry/components/chart-donut.json): Show how one whole splits into two to four parts, with the whole in the middle. - [Heatmap](https://syntariui.giovanitier.com/registry/components/heatmap.json): Show one measure for every pair of two categories, so the pattern is visible before any number is read. - [Treemap](https://syntariui.giovanitier.com/registry/components/treemap.json): Show the parts of a whole by size, nested in up to three groups, when there are too many parts for a bar. - [Comparison table](https://syntariui.giovanitier.com/registry/components/comparison-table.json): Measure the same thing across options and name the advantage. - [Stat row](https://syntariui.giovanitier.com/registry/components/stat-row.json): Put the few measures that matter side by side. - [Pipeline stages](https://syntariui.giovanitier.com/registry/components/process-ledger.json): Show the stages of a pipeline and what each one cost. - [Playback controls](https://syntariui.giovanitier.com/registry/components/transport-controls.json): Drive something that runs: play, pause, step, and a speed. - [Live stats](https://syntariui.giovanitier.com/registry/components/live-readout.json): Show values that change while someone watches. - [Area chart](https://syntariui.giovanitier.com/registry/components/area-chart.json): Show one measure over time, with its scale stated. - [Line chart](https://syntariui.giovanitier.com/registry/components/line-chart.json): Show how one measure moves over time, optionally against a benchmark on the same scale. - [Chart toolbar](https://syntariui.giovanitier.com/registry/components/chart-toolbar.json): Scope a chart before reading it. - [Metric tabs](https://syntariui.giovanitier.com/registry/components/metric-strip.json): Let one measure be the focus of a report. - [Headline metric](https://syntariui.giovanitier.com/registry/components/headline-metric.json): State the one number a screen is about. - [Filter bar](https://syntariui.giovanitier.com/registry/components/filter-bar.json): Say what a view is scoped to. - [Bar list](https://syntariui.giovanitier.com/registry/components/source-list.json): Show which sources make up a number. - [Text block](https://syntariui.giovanitier.com/registry/components/text-block.json): Explain in words what the components around it show. - [Breakdown bar](https://syntariui.giovanitier.com/registry/components/breakdown.json): Show how one whole splits into parts. - [Checklist](https://syntariui.giovanitier.com/registry/components/checklist.json): Give a person steps to tick off, with progress they can trust. - [Media cards](https://syntariui.giovanitier.com/registry/components/media-cards.json): Introduce a few kinds of thing side by side, each with a picture and a caption. - [Calculator](https://syntariui.giovanitier.com/registry/components/calculator.json): Let a person explore how a result depends on a few inputs. ## Optional - [Changelog](https://syntariui.giovanitier.com/HISTORY.md) - [Source](https://github.com/SyntariUI/syntari)