Use with AI agents
How to point a coding agent at crisp-ui, and what it can and cannot do for you.
crisp-ui is meant to be read by a coding agent as well as a person. Everything below is a way to give an agent the right files, so it installs the right item and uses its real props instead of guessing.
What an agent can read#
| What | Where |
|---|---|
| Index of the docs, for agents | /llms.txt |
| Any docs page as markdown | Add .md to its path, for example /docs/components/status-notify.md |
| An item as installable JSON, with its full source | /r/<item>.json, for example /r/status-notify.json |
| The item's own pointers | categories, meta.stage, meta.recipe (the docs URL) and a short docs note, all inside that JSON |
| A block to paste into your rules file | /agents-snippet.md |
| An Agent Skill | skills/crisp-ui/SKILL.md in the repository |
Do not assume your agent finds these on its own. Give it the URL, or paste the block below.
Paste a rules block#
Put this in the file your agent reads for project instructions, for example AGENTS.md or CLAUDE.md. Which file your tool reads differs, so check its docs. The same text is served at /agents-snippet.md.
<!-- crisp-ui:start (generated by apps/v4/scripts/build-agent-files.mjs; re-copy from https://realgood.site/agents-snippet.md) -->
## crisp-ui
crisp-ui is a shadcn registry of dashboard patterns for internal tools. UI only. Index for agents: https://realgood.site/llms.txt
Install: `npx shadcn@latest add https://realgood.site/r/<item>.json`, for example `npx shadcn@latest add https://realgood.site/r/status-notify.json`. Docs for an item: `https://realgood.site/docs/components/<item>.md`.
Story order: See, Decide, Act, Confirm, Record. Items:
- `status-strip` (see): A headline number, a segmented bar and a legend for the stages of one whole, with a slot for the action that acts on it.
- `status-notify` (see to confirm): A status headline, a confirm-then-send action, and one recipient roster with save/discard, wired together.
- `table-view` (see): Pure helpers for a list of rows: named views with counts, a stable sort, and selection that drops rows that are no longer there.
- `data-table` (see): A table of rows with named saved views and live counts, row selection, an action slot that receives the selected rows, and stale, empty, no-match and error states.
- `calibration-desk` (see to record): The whole arc on one screen, as a worked example: gauges due for calibration (status strip and data table), a reminder rule, a two-role approval, a confirm-then-send to owners, and an audit timeline of every decision, send and failure. Runs on an in-memory server you replace with real calls.
- `recipient-roster` (decide): One list of people with a switch per channel, per-channel limits, paste-to-add and inline validation.
- `alert-rules-lib` (decide): Pure helpers for reminder rules: validate a rule, test and move past quiet hours in any time zone (DST-safe), list which reminders are due, and describe a rule in a sentence.
- `alert-rules` (decide): An editor for reminder cadence, escalation and quiet hours, with inline validation and a plain-language summary under each rule. Edits a saved rule; it does not send or schedule.
- `save-bar` (act): An 'Unsaved changes' bar with Discard and Save that only renders when there is something to save.
- `confirm-send` (act): Click, confirm with the recipient count, send, then a 'Sent to N' status line. Can be blocked with a reason.
- `approval` (act): Pure helpers: settle an approval from its approvers' decisions under an all, any or minimum policy, check who can decide, and validate a decision's reason.
- `approval-step` (act): A sign-off with a stated reason and meaning: approvers with state as text and decision time, a policy sentence, Approve and Reject behind an inline confirm for the one person who can still decide, and a read-only explanation for everyone else.
- `notify-envelope` (confirm): Pure helpers: build a roster from per-channel lists, compare lists, and build a one-message To/Cc envelope.
- `quiz-lib` (confirm): Pure helpers for a tap-to-answer quiz: grade a pick, tally a set of picks, build an empty pick list, and check that your questions are well formed.
- `quiz` (confirm): Tap an answer and see at once whether it was right, and which option was. One attempt per question, then it locks; the footer shows the score and Try again.
- `audit-event` (record): The shared AuditEvent type, plus pure helpers to build one on the server (reason can be required), group by day in a time zone, filter, and format times.
- `audit-timeline` (record): A read-only 'who did what, when, and why' list of recorded events, grouped by day, with outcome text and icon, a visible reason, filters, and honest empty, error and stale states.
Rules:
- Read the installed file before using it; use only the props it exports.
- UI only: sending, storage, access control and consent belong to the backend.
- Contacts are email addresses only. Do not add phone or SMS contacts.
- Never claim that crisp-ui makes an app compliant with any law or standard.
- After wiring, run the typechecker and show its output.
<!-- crisp-ui:end -->Use the skill#
The skill is one SKILL.md: install commands, the story order, a table of every item with its install command and docs URL, and the same rules as above. Claude Code loads project skills from .claude/skills/<name>/SKILL.md, so copying the skills/crisp-ui folder to .claude/skills/crisp-ui is the documented place for that tool. Whether npx skills add or another tool finds the skill in this repository has not been checked, so this page does not promise it.
Use the shadcn MCP server#
The stock shadcn MCP server lets an assistant browse, search and install items from any registry listed in your components.json. Set it up with the client you use:
pnpm dlx shadcn@latest mcp init --client claude
The shadcn docs list claude, cursor, vscode, codex and opencode; Codex needs its config file edited by hand. Then register crisp-ui as a namespace in components.json:
{
"registries": {
"@crisp": "https://realgood.site/r/{name}.json"
}
}and ask in plain words, for example "Show me what is in the crisp registry" or "Add status-notify from the crisp registry". The shadcn docs do not list the server's individual tools, and we have not tested whether it shows an item's docs or meta to the agent, so tell the agent to read the installed file either way.
Without MCP, the CLI does the same checks. npx shadcn@latest view https://realgood.site/r/status-notify.json prints the item, and adding --dry-run to npx shadcn@latest add lists what would be written without writing it.
Limits#
- UI only. The parts render state and call handlers you write. Sending, storage, access control, retention and consent logic belong to your backend, and an agent will not add them unless you ask.
- Not compliance. crisp-ui does not make a tool compliant with any law or standard. Treat anything an agent says to the contrary as wrong.
- Email only. A person in the roster is an email address. There are no phone numbers or SMS.
- Hand-offs differ per tool. An agent without a shell cannot run
npx; give it the item JSON or the.mdpage and have it copy the files. Tools differ in how they load rules files, skills and MCP servers, and in how much text they take, so a setup that works in one may need adjusting in another. - Check the result. Ask the agent to run your typechecker and show the output. That catches wrong props and missing imports, not a wrong design.