Design-components-for-AI-agentsCAUTION
Animated React, Tailwind CSS and React Native components for AI coding agents. Source code, design prompts and JSON briefs, with a shadcn registry, CLI and MCP for Claude Code, Cursor and Codex.
Overview
From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.
Bring taste to what your agent ships.
Animated React, Tailwind CSS and React Native components for Claude Code, Cursor, Codex and other AI coding agents. Every component comes with source code, a design brief and a JSON prompt.
Explore components · Documentation · Connect your agent · Design principles · Pricing
Why Design for AI?
- A designed starting point. Give your agent a specific component instead of asking it to invent a design system from a blank prompt.
- Three ways to build. Install the React or React Native source, paste the design brief, or pass the JSON prompt to your agent. Each describes the same interface.
- Motion with a purpose. Chart ranges morph, replies stream, navigation moves on springs, and loading resolves into a result. Preview the behaviour before using it.
- Your code, your stack. Free components are MIT. Components live in your project, with typed props and explicit dependencies. Pro source is licensed separately.
See the components in motion
These are recordings of the actual components. Open any preview to try its controls, see the code or copy its brief. Readers with reduced motion enabled see sti
4b0d5a451501OBSERVED · 2026-10-11Connect
Built from this server's own package name, version and transport as found in its source — not copied from anyone's documentation, so it cannot drift against a page we do not control. Replace the environment placeholders with a token scoped to the least it needs.
claude mcp add design-for-ai-mcp --env LICENSE_SECRET=${LICENSE_SECRET} --env PRO_REPO_SSH_KEY=${PRO_REPO_SSH_KEY} --env PRO_REPO_TOKEN=${PRO_REPO_TOKEN} --env STRIPE_WEBHOOK_SECRET=${STRIPE_WEBHOOK_SECRET} -- npx -y [email protected]{
"mcpServers": {
"design-for-ai-mcp": {
"command": "npx",
"args": [
"-y",
"[email protected]"
],
"env": {
"LICENSE_SECRET": "${LICENSE_SECRET}",
"PRO_REPO_SSH_KEY": "${PRO_REPO_SSH_KEY}",
"PRO_REPO_TOKEN": "${PRO_REPO_TOKEN}",
"STRIPE_WEBHOOK_SECRET": "${STRIPE_WEBHOOK_SECRET}"
}
}
}
}Exposed tools (11)
9 read · 2 write · 0 destructive.
| Tool | Risk | Description |
|---|---|---|
Guides | read | Fixture guides. |
get_component | write | One component: install command, usage, props, tunable controls (prop ranges and choices), the design prompt, the JSON prompt and the full source file. |
get_page | read | Any page of design.yaps.ai as Markdown, e.g. |
get_principles | read | The anti-slop design principles every component follows, plus a checklist. Read before building UI from scratch. |
install_command | write | The exact command that adds a component to the current project (shadcn CLI for web, curl for React Native). |
list_categories | read | Every component category with a description and counts of free and Pro components. |
outline | read | Headings and the main claim |
rewrite | read | Same meaning, plainer words |
search_components | read | Search Design for AI |
summarise | read | Shorten a document or thread |
translate | read | Into another language |
Trust audit
CAUTIONgrade B · trust 89/100 Install with care. The audit found things worth knowing before you trust its output.
| Layer | What it checks | Result |
|---|---|---|
| L0 | Provenance & inventory | PASS |
| L1 | Static analysis of the code | WARN |
| L2 | Instruction surface (what it tells the agent) | PASS |
| L3 | Class-specific surface | PASS |
| L4 | Behavioural (sandbox) | SKIPPED |
What the source does
- Filesystem
- declared (7 observation(s))
- Network
- declared (2 observation(s))
- Shell
- declared (2 observation(s))
- Dependencies
- not all pinned
- Secrets in source
- found
Findings (9)
{""}const key = "-----BEGIN OPENSSH PRIVATE KEY-----\nprivate-test-key\n-----END OPENSSH PRIVATE KEY-----";
import { LOCALES, asciiSlug } from "../../lib/blog/locales.mjs";import { BLOG_UI } from "../../lib/blog/ui-copy.mjs";@fontsource-variable/bricolage-grotesque, @fontsource-variable/geist, @fontsource-variable/geist-mono, @fontsource/bricolage-grotesque, @fontsource/instrument-serif, gray-matter, lucide-react, marked
@modelcontextprotocol/sdk, zod
Use a separate Stripe sandbox for purchases. Test keys, price IDs, portal and signing secret belong together; never point test payments at the production D1 database. A local Worker can receive real s
.github/assets/showcase.gif
.github/assets/three-particle-sphere.gif
Gates applied: no_behavioural_pass.
4b0d5a451501full audit observations/trust-audit/mcp-server/richawo__design-components-for-ai-agents.json · Report an issue / request a re-scanAudit history
Every audit this server has had. A grade with a past is a grade somebody is still checking.
| Date | Source | Verdict | Grade | Score | Change |
|---|---|---|---|---|---|
| 2026-10-11 | 4b0d5a451501 | CAUTION | B | 89 | first audit |
Questions
What is the Design-components-for-AI-agents MCP server?
Animated React, Tailwind CSS and React Native components for AI coding agents. Source code, design prompts and JSON briefs, with a shadcn registry, CLI and MCP for Claude Code, Cursor and Codex.
What tools does Design-components-for-AI-agents expose?
11 in total: 9 read-only, 2 that write, and 0 that can delete or overwrite. Every one is listed on this page with its risk.
Is Design-components-for-AI-agents safe to connect to an agent?
With care. The audit graded it B (89/100) and found 9 things worth knowing before you trust this server, listed below with the exact line each was found on.
What credentials does Design-components-for-AI-agents need?
It reads LICENSE_SECRET, PRO_REPO_SSH_KEY, PRO_REPO_TOKEN and STRIPE_WEBHOOK_SECRET from the environment. Give it a token scoped to the least it needs — an agent that can be talked into calling a tool can be talked into calling it with your credentials.
How does Design-components-for-AI-agents run?
It speaks stdio and streamable-http, so it runs as a local process your client starts. It is published on npm as design-for-ai-mcp at 0.2.0.
How current is this page?
The grade is for one exact copy of the source (4b0d5a451501), read on 2026-10-11. The repository is watched and re-audited when it changes.