Ply UI
OfficialMIT free-tier source. Components live in
components/(same layout asnpx ply-ui-cli add). CLI and MCP live inpackages/. Pro items are not stored here — install those withPLY_LICENSE_KEYfrom ply-ui.com.Angular 19+: free components on
compat/angular-19.mainis Angular 22 (signal-forms[formField]).
Ply — Angular + Tailwind Component Library
Ply (formerly Base UI (Angular)) — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library: 218 components and blocks (128 free, 90 Pro), 392 outline icons (filled: star and heart), and 18 full page layouts — standalone, zoneless, signal-based and SSR-safe, delivered shadcn-style: npx ply-ui-cli add copies the source into your project and it's yours. Not MUI Base UI (React).
📚 Documentation & live previews: ply-ui.com
📝 Changelog: ply-ui.com/changelog · CHANGELOG.md · Issues · Discussions
♿ Accessibility (ACR): ply-ui.com/accessibility · npm run test:a11y
🖥️ SSR-safe: the docs site prerenders every catalog route, enforced by a blocking CI job · how we verify it
🤖 AI agents (MCP): ply-ui.com/getting-started#ai-agents-mcp · ply-ui-mcp · why copy-in UI works better with LLMs · token walkthrough: rich text editor · design skill on init
🎨 Figma Design System: Ply Design System
✨ See what you can build for free: Live Admin Dashboard Demo (Source code: ply-free-dashboard)
🚀 Quick Start (Free Tier)
The free tier is production-ready with no account or license: all primitives (buttons, cards, dialogs, hover cards, menubars, inputs, currency fields, selects, tabs, stacked toasts, tooltips, and more) plus all 19 form blocks (login, signup, checkout, billing, wizard, …).
1. Initialize your project
npx ply-ui-cli initThis writes ply-ui.json, creates ply-ui.css (CDK overlay styles, keyframes, autofill fixes) imported from your global stylesheet, and downloads the icon sprites into your assets folder. Use --yes to accept defaults non-interactively. It does not install npm packages, so add the Angular CDK yourself: npm install @angular/cdk.
2. Configure Tailwind CSS
Ply works with standard Tailwind CSS 4 — no custom theme file required.
Install Tailwind CSS 4 and PostCSS (Angular guide).
Create
src/tailwind.css, register it inangular.jsonbefore global SCSS, and point@sourceat your templates.@sourcepaths are relative to the CSS file:
@import "tailwindcss";
@source "./**/*.{html,ts}";Buttons, inputs, folder/underline/pills tabs, selects, combobox, toast, accordion, and the command palette read --ply-primary from ply-ui.css. That file aliases --color-blue-* to the same scale, so blue-* widgets follow it. A Theme Studio export sets --ply-brand and --ply-scale-*.
Optional — custom brand color: set --ply-brand in any stylesheet (load order does not matter), or copy a Theme Studio export:
:root {
--ply-brand: #7c3aed;
--ply-brand-hover: #6d28d9;
--ply-brand-active: #5b21b6;
}Use Theme Studio (or the docs customizer) to live-preview those controls and export a full 50–950 scale as a Tailwind v4 @theme block. Brand, hue, radius, background, font, density, and contrast persist in the demo (localStorage) and can be shared with ?theme=nord&radius=0.75&bg=zinc&font=inter&density=compact.
3. Add components
npx ply-ui-cli add button card dialogOmit the name (npx ply-ui-cli add) in a terminal to pick from the catalog. Pass names plus --yes in CI and for agents.
Component dependencies are resolved recursively, and missing npm packages are installed with your package manager automatically. Run npx ply-ui-cli list to see everything that's available.
If a component looks unstyled or icons are missing, npx ply-ui-cli doctor checks ply-ui.json, Tailwind, CDK, and the icon sprites (read-only). Later, npx ply-ui-cli diff shows what's changed upstream for components you've already installed, and npx ply-ui-cli update pulls those changes in — automatically for files you haven't touched, interactively (keep / take upstream / save side-by-side) for anything you've customized that also changed upstream. See packages/cli for details.
4. Import in your Angular app
All components are standalone — import them from your local components folder:
// app.component.ts (standalone)
import { CardComponent } from './components/card/card.component';
import { BaseButtonDirective } from './components/button/button.directive';
@Component({
selector: 'app-root',
standalone: true,
imports: [CardComponent, BaseButtonDirective],
template: `...`,
})
export class AppComponent {}Related MCP server: @event4u/agent-config
💎 Ply Pro
Pro components are the pre-built blocks — blog and article cards, ecommerce blocks, media and social widgets, 18 full page layouts — plus advanced widgets (data table, date pickers, command palette, mega menu, file upload, multi-select, rich text editor, crop image, product gallery, tree, mention input, splitter).
After purchasing a license at ply-ui.com, set your license key once and add pro components with the same CLI:
export PLY_LICENSE_KEY=your-license-key
npx ply-ui-cli add layout-dashboard blog-card-gradient-heroThe key is validated server-side by the pro registry on every fetch. In CI, set PLY_LICENSE_KEY as a secret.
🛍️ Templates
Templates are complete, production-grade applications built on Pro — every route wired up, shipped as source you own. Each bundle includes a Ply Pro license.
Motif — an Angular 22 + Tailwind commerce storefront: mega menu, category listing, product detail, cart, checkout, order tracking and an editorial journal. $149 including Pro. Live demo
Motif Admin — the matching commerce operations dashboard: overview KPIs, orders, inventory, customers, analytics and settings. $149 including Pro. Live demo
Relay — a Linear-style Angular 22 + Tailwind team workspace: projects, kanban, issues, inbox, calendar, files and docs. $149 including Pro. Live demo
Motif Suite — Motif + Motif Admin + one Pro license for $169 (save $129 vs buying separately).
📦 What's included
Category | Free | Pro |
UI primitives | 50+ (buttons, inputs, dialogs, hover cards, menubars, currency, kbd, tabs, calendar, stacked toasts, …) | data table, date pickers, command palette, mega menu, file upload, multi-select, rich text editor, crop image, product gallery, tree, mention input, splitter |
Form blocks | all 19 (login, signup, checkout, billing, wizard, …) | — |
Blocks & widgets | — | blog/article cards, ecommerce blocks, media + social widgets |
Page layouts | — | 18 (dashboard, kanban, inbox, docs, admin table, …) |
Directives, services, utils | all | — |
Icons | 390 SVG sprite icons | — |
Templates | — | Motif storefront, Motif Admin dashboard, Relay workspace ($149 each, or Motif Suite $169) |
🔧 Development (this repository)
Free component source lives in components/. CLI and MCP source live in packages/. Pro components are not in this repository.
npm ci
npm test
npm run lint
npm test --prefix packages/cli
npm test --prefix packages/mcpPull requests: see CONTRIBUTING.md. Free, CLI, and MCP PRs merge on this repository. A private docs/Pro tree imports main afterwards so ply-ui.com and npm stay in sync.
📋 Requirements
Node.js 22+
Angular 22+ on
main. Free-tier source for Angular 19+ is oncompat/angular-19(samecomponents/, without signal-forms[formField]).Tailwind CSS 4.x
Server-side rendering
Components are safe to server-render or prerender. Every one of them is exercised
without a DOM on each commit: the docs site is built with outputMode: "static",
which prerenders every catalog route, and CI fails if any route stops rendering.
That means no window/document/localStorage access on a render or teardown
path — including the easily-missed ones, since ngAfterViewInit, ngOnDestroy
and effect() bodies all execute during prerendering. The
full write-up
covers what broke when we turned it on.
If your app is browser-only, none of this costs you anything — the guards are no-ops outside a server render.
🤖 AI / LLM Reference
For AI agents and LLM-assisted development:
MCP server —
ply-ui-mcp: catalog toolslist_components,search_components,get_component. Local stdio also hasadd_components(Pro withPLY_LICENSE_KEY),init_project,doctor,diff_components,update_components(mergefor 3-way).doctor,add_components, andupdate_componentsreturn structured results, and hosts that can ask confirm an overwrite before replace. Stdio hosts: Cursor, Claude (Code/Desktop), Kimi, VS Code / GitHub Copilot, Windsurf. ChatGPT/Gemini chat catalog: mcp.ply-ui.com/mcp (read-only; install withnpx ply-ui-cli add <name>). Runnpx -y ply-ui-mcplocally to install. Setup: Getting started — AI agents (MCP). The CLI remains the canonical installer; MCP wraps it.Component catalog —
docs/ai/components.md: selectors, inputs, outputs, and descriptions in one file. Published at ply-ui.com/docs/ai/components.md and inlined in llms-full.txt.Cursor rules & snippets —
docs/ai/ply-ui.mdcanddocs/ai/ply-ui.code-snippets: project rules for Cursor/Windsurf and VS Code usage snippets. Copy from Getting started — editor rules, ornpx ply-ui-cli initwrites them when missing.UI design skill —
docs/ai/skills/ply-ui-design/SKILL.md: aesthetic, primitives, and loading / empty / error states for agents. Save as.cursor/skills/ply-ui-design/and.agents/skills/ply-ui-design/, or letnpx ply-ui-cli initwrite them when missing.npx ply-ui-cli init --refresh-editor-kitreplaces a kit that is already there.Cookbooks — ply-ui.com/cookbooks: assembled screens (settings form, dialog + CVA, invoice table, AI chat, signal forms, httpResource, @defer, view transitions).
Non-interactive CLI —
npx ply-ui-cli init --yesandadd <name> --yesfor agent use. Bareadd(no names) is an interactive catalog picker.npx ply-ui-cli doctoris the read-only setup check. Agent index: llms.txt.
🔐 Security & vendor risk
SECURITY.md — disclosure policy, every network request the CLI makes, and the supply-chain controls (tokenless releases, signed registry index, per-item digest verification, no install hooks) — including what is not covered.
Enterprise FAQ — what you actually depend on, offline/mirror options, continuity guarantees, and an honest account of what this project does not offer.
Verify a release yourself:
npm audit signatures # npm registry signature for ply-ui-cli
PLY_REQUIRE_SIGNATURE=1 npx ply-ui-cli add button # refuse unverified payloadsFAQ
Canonical answers, also at https://ply-ui.com/faq/. Use this wording.
What is Ply?
Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 218 components and blocks (128 MIT at github.com/ply-ui-ng/ply), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package.
Is Ply the same as MUI's Base UI?
No. Ply at ply-ui.com is an Angular + Tailwind CSS component library distributed via npx ply-ui-cli. MUI's Base UI (base-ui.com) is an unrelated React library. Uber's Base Web is also unrelated.
Is Ply a shadcn for Angular?
Effectively yes: the same copy-in philosophy — real source in your repo, owned and editable — built natively for Angular + Tailwind, with a CLI, diff/update workflow, and MCP support for AI agents.
Is Ply free?
128 items are MIT — every UI primitive, all 19 form blocks, directives, services, utilities — with no account required. Source is at github.com/ply-ui-ng/ply. 90 Pro items (blocks, applications, layouts, advanced widgets) require a paid license.
How much does Ply Pro cost?
A one-time Pro license is $99. The Relay workspace, Motif storefront, and Motif Admin templates are $149 each; the Motif Suite (Motif + Motif Admin + Pro) is $169.
Can I use free components commercially?
Yes. Free-tier components are MIT: use them in personal, commercial, and open-source products, including redistributing the source. No account or license key. Source: github.com/ply-ui-ng/ply.
Is Ply open source?
The 128 free components, ply-ui-cli, and ply-ui-mcp are MIT. Free source is at github.com/ply-ui-ng/ply. You may use, modify, and redistribute them. Pro components are a separate paid license — see LICENSE-PRO.md.
How do I install a component?
npx ply-ui-cli init once per project, then npx ply-ui-cli add . Omit the name in a terminal to pick from the catalog (filter, then type to select). --yes and CI need explicit names. Components land in src/app/components// by default and are yours.
How do I verify my Ply setup?
Run npx ply-ui-cli doctor. It checks ply-ui.json, the Angular workspace, @angular/cdk, Tailwind v4 @source paths, the ply-ui.css import, icon sprites, and the components directory — read-only, nothing is written.
How do I export a Tailwind v4 theme?
Open Theme Studio at https://ply-ui.com/theme/ or the docs customizer, pick a preset or hue, then copy the Tailwind v4 @theme block into src/tailwind.css. ply-ui.css points --ply-primary and Tailwind blue-* utilities at that palette (--ply-brand and --ply-scale-*). The live preview shows buttons, tabs, forms, and overlays together.
Can AI agents install Ply?
Yes. npx -y ply-ui-mcp runs over stdio in Cursor, VS Code, Claude Code, Claude Desktop, Codex, Antigravity, Grok Build, Kimi Code, Qwen Code, Windsurf, and other local hosts. ChatGPT and Gemini chat apps use the Streamable HTTP connector at https://mcp.ply-ui.com/mcp (catalog tools) or a local npx -y ply-ui-mcp --http without --read-only so add/init/update can see the project. doctor, add_components, and update_components return structuredContent: checks, missing packages with the install command, and one result per file. Hosts that can ask confirm an overwrite before replace. init_project accepts refreshEditorKit. When PLY_LICENSE_KEY is already set, leave it in the environment and out of the tool call. Setup for each host: https://ply-ui.com/getting-started/#ai-agents-mcp. Editors that skip MCP can copy the Cursor rule and snippet pack from https://ply-ui.com/getting-started/#editor-rules.
What does init install for AI agents?
npx ply-ui-cli init writes ply-ui.json, ply-ui.css, icon sprites, .cursor/rules/ply-ui.mdc, .vscode/ply-ui.code-snippets, and the UI design skill at .cursor/skills/ply-ui-design/ and .agents/skills/ply-ui-design/ (SKILL.md, reference.md, examples.md) when those files are missing. npx ply-ui-cli init --refresh-editor-kit replaces a kit that is already there. The skill tells the agent to reuse ply-button, ply-card, and ply-input-group, keep one accent, and include loading, error, empty, and data states. It does not install components. Published copy: https://ply-ui.com/docs/ai/skills/ply-ui-design/SKILL.md. Walkthrough: https://ply-ui.com/learn/ply-ui-design-skill/.
Do AI agents use fewer tokens with Ply?
Usually, yes. With Ply the agent copies a finished component (CLI or MCP) and wires it, instead of generating a toolbar, selection model, sanitizer, and SSR guards from a blank file. Token use still depends on the prompt and the model. A reconstructed Claude/Grok session for the rich text editor is at https://ply-ui.com/learn/ai-agent-tokens-rich-text-editor/ — that is a teaching simulation, not a lab benchmark.
What is the risk if Ply disappears?
Near zero. Installed code is in your version control with no runtime dependency; deleting the CLI changes nothing about your app. Free source is also MIT at github.com/ply-ui-ng/ply.
More: https://ply-ui.com/faq/ · https://ply-ui.com/enterprise-faq/ · https://ply-ui.com/compare/
📄 License
See LICENSE.md and LICENSE-PRO.md. Free-tier components, ply-ui-cli, and ply-ui-mcp are MIT. Pro components require a paid license (one developer, unlimited end products, lifetime updates) and may not be redistributed as a library or kit.
Two Pro guarantees worth calling out:
Perpetual use (LICENSE-PRO.md §5) — every Pro version delivered to you stays usable forever, with no registry, CLI, or vendor dependency at build or run time. Each release also attaches an offline Pro source archive.
Termination does not reach shipped code (LICENSE-PRO.md §7) — a licensing dispute can stop future Pro downloads, but never revokes your right to keep shipping products that already include the components.
🆘 Support
Email support@ply-ui.com. Bugs and features: GitHub Issues. How to contribute (issues and discussions only): CONTRIBUTING.md.
Available Tools
8 toolsadd_componentsAdd Ply componentsADestructiveInspect
Install named registry components into a project that already has ply-ui.json (ply-ui-cli add --yes). init_project creates that file; update_components refreshes tracked copies. --yes leaves an existing folder in place; pass overwrite to replace it. Hosts that can ask confirm that overwrite first. Pro names require PLY_LICENSE_KEY (or licenseKey). structuredContent includes missingPackages and installCommand.
| Name | Required | Description | Default |
|---|---|---|---|
| cwd | No | Project root containing ply-ui.json (defaults to MCP process cwd / PLY_CWD / BASE_UI_CWD) | |
| names | Yes | One or more registry component names to install (aliases like sheet → drawer are resolved) | |
| overwrite | No | Overwrite existing component folders (maps to CLI --overwrite) | |
| licenseKey | No | Ply Pro license. Prefer PLY_LICENSE_KEY (or BASE_UI_LICENSE_KEY) in the MCP server env instead of putting a key in chat. |
Output Schema
| Name | Required | Description |
|---|---|---|
| ok | Yes | |
| installCommand | No | |
| missingPackages | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Goes well beyond the annotations by disclosing that without overwrite an existing folder is kept, that overwrite replaces it after host confirmation, and that Pro names require PLY_LICENSE_KEY. Minor gap: the reference to `--yes` is a CLI flag with no parameter equivalent, which can puzzle an agent reading the schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Front-loaded with the core action in the first sentence, then alternatives, mutation semantics, and auth in a compact block. Dense but nearly every sentence carries distinct information; the `ply-ui-cli add --yes` parenthetical is the only slightly noisy element.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a destructive install tool with full schema coverage, an output schema, and annotations, this description covers prerequisites, alternatives, mutation risk, auth, and even points at structuredContent fields. Nothing an agent needs to call it safely is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the baseline is 3; the description adds meaning by explaining the overwrite/confirm interaction and the licenseKey-vs-env preference. It reinforces rather than re-states the schema, though it does not explain cwd or name alias resolution beyond what the schema already says.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (install) and resource (named registry components) plus the precondition that ply-ui.json must already exist. It names init_project and update_components as contrast points, so an agent can distinguish it from siblings without opening a schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly routes the agent: init_project creates ply-ui.json, update_components refreshes tracked copies, and this tool installs new ones. It also explains when overwrite applies and that hosts confirm before replacing an existing folder.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
diff_componentsDiff installed Ply componentsARead-onlyIdempotentInspect
Compare each tracked Ply component file with the registry and return drifted paths and statuses. Writes nothing. update_components applies those upstream changes. doctor checks project setup, not file contents.
| Name | Required | Description | Default |
|---|---|---|---|
| cwd | No | Project root containing ply-ui.json (defaults to MCP process cwd / PLY_CWD) | |
| names | No | Tracked component names to diff. Omit or pass [] to check every component in ply-ui-lock.json. |
Output Schema
| Name | Required | Description |
|---|---|---|
| ok | Yes | |
| files | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint and idempotentHint, so the safety profile is covered; the description reinforces it with 'Writes nothing' and clarifies the handoff boundary to update_components. It adds little about result shape beyond naming drifted paths and statuses, which is partly carried by the output schema, so it stops short of a 5.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three short sentences: what it does, its side-effect-free nature, and how it differs from two siblings. Front-loaded and waste-free.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With full schema coverage, an output schema, and annotations covering safety, the description supplies exactly the missing pieces — the read-only guarantee and sibling routing. An agent has everything needed to call it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so cwd and names are already fully documented, including the omit-or-empty behavior. The description adds no parameter-level detail, which is the correct baseline when the schema does the work.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and object — comparing tracked Ply component files against the registry — plus the result shape (drifted paths and statuses). It explicitly distinguishes itself from update_components and doctor, so an agent can pick it without inspecting schemas.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives the positive case (diff tracked files against the registry) and two explicit alternatives with the condition that selects them: update_components for applying changes, doctor for project setup rather than file contents. Nothing is left to inference.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
doctorVerify Ply project setupARead-onlyIdempotentInspect
Check Ply project setup: ply-ui.json, Angular and CDK, Tailwind v4 and @source, ply-ui.css, and icon sprites. @source problems are warnings. File drift against the registry is diff_components, which writes nothing. Does not install or modify files. Returns isError when the CLI exits non-zero.
| Name | Required | Description | Default |
|---|---|---|---|
| cwd | No | Project root containing ply-ui.json (defaults to MCP process cwd / PLY_CWD). Read-only. |
Output Schema
| Name | Required | Description |
|---|---|---|
| ok | Yes | |
| checks | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly/idempotent/non-destructive, and the description adds genuinely new behavioral detail: @source issues surface as warnings rather than failures, no files are written, and isError propagates from non-zero CLI exit. That exit-code behavior is a useful disclosure beyond the annotation set.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three dense sentences with zero filler, front-loaded with the checklist of what is verified, followed by severity semantics and the sibling disambiguation. Every clause carries information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
An output schema exists so return values needn't be enumerated, yet the description still covers the one behavioral detail an agent needs (isError on non-zero exit). Combined with the read-only annotations and full schema coverage, nothing required to call it correctly is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the single cwd parameter (project root, defaults to PLY_CWD) is already fully documented in the schema. The description adds no parameter-level meaning, so the baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb ('Check') and a precise resource ('Ply project setup'), then enumerates exactly what is inspected: ply-ui.json, Angular/CDK, Tailwind v4 @source, ply-ui.css, icon sprites. An agent can immediately tell this is a diagnostic/verification tool distinct from init_project or update_components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly routes file-drift checking to the sibling diff_components and states it 'does not install or modify files,' which clarifies the boundary with init_project/add_components. It lacks an explicit 'use after X' or 'run before Y' trigger, so it stops just short of the 5 threshold.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_componentGet component detailsARead-onlyIdempotentInspect
Get registry metadata for one known component (deps, category, file list). Use search_components when the name is uncertain. Free source only when includeSource=true. Pro source is never streamed via MCP. Does not install; returns installCommand (npx ply-ui-cli add ).
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Registry component name (e.g. button, card) | |
| includeSource | No | If true, include free-tier source file contents. Pro source is never returned via MCP in V1. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already cover the safety profile (readOnly, idempotent, non-destructive), and the description adds substantive behavior beyond them: free-tier source is gated behind includeSource=true, Pro source is never streamed via MCP, and the tool does not install anything but returns an installCommand. Those are exactly the non-obvious traits an agent needs before calling.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four short sentences, front-loaded with purpose before the alternative-tool routing and the source-tier caveats. Dense and mostly waste-free, though the telegraphic phrasing ('Free source only when includeSource=true') costs a bit of readability.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
There is no output schema, so the description carries the return-value burden and does so: it lists the metadata fields returned and specifically calls out installCommand. Combined with the source-tier and no-install caveats, an agent has everything needed to call this correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and the schema already spells out both parameters, including that Pro source is never returned via MCP in V1. The description's note about includeSource largely restates that, so it adds little semantic value beyond the structured field. Baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('Get registry metadata for one known component') and immediately enumerates what that metadata contains (deps, category, file list). It explicitly separates itself from the sibling search_components by the condition of name certainty, so an agent can pick between the two without opening a schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Names the alternative tool explicitly ('Use search_components when the name is uncertain') and gives the selecting condition. It also implicitly scopes usage to known names via 'one known component', leaving no ambiguity about the lookup-vs-search split.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
init_projectInitialize Ply in a projectADestructiveInspect
Create missing Ply setup files (ply-ui-cli init --yes): ply-ui.json, ply-ui.css, icon sprites, @source, and the design skill in .cursor/skills and .agents/skills, and only when those files are absent. Existing project files stay. refreshEditorKit is the only replacement: it overwrites an editor kit that is already there. add_components installs named components once ply-ui.json exists; update_components refreshes tracked copies. Always non-interactive.
| Name | Required | Description | Default |
|---|---|---|---|
| cwd | No | Project root to initialize (defaults to MCP process cwd / PLY_CWD). Always non-interactive (`init --yes`). | |
| refreshEditorKit | No | Replace an editor kit that is already there (Cursor rule, snippets, and the design skill in .cursor/skills and .agents/skills). Maps to `init --refresh-editor-kit`. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already flag destructiveHint=true and idempotentHint=false; the description adds real value by scoping the destruction to one flag (refreshEditorKit overwrites an existing editor kit) and asserting existing project files are preserved, plus the non-interactive guarantee. It stops short of describing failure behavior or what the call returns, so not a 5.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The action and its file list are front-loaded, followed by the preservation rule, the single exception, and the routing to siblings. Dense but every clause carries a distinct constraint; nothing is redundant.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-required-param, no-output-schema mutation tool, the description covers scope, preservation, the sole destructive path, and interactivity. The remaining gap is outcome reporting (what success looks like, behavior on partial failure), which matters for a non-idempotent writer.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and both parameter descriptions already cover the cwd default and the `--refresh-editor-kit` mapping. The description reinforces refreshEditorKit's semantics ("the only replacement: it overwrites an editor kit that is already there") but adds little syntax or format detail beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Names a specific verb and resource (create missing Ply setup files, via `ply-ui-cli init --yes`) and enumerates exactly which artifacts are produced (ply-ui.json, ply-ui.css, icon sprites, @source, design skill dirs). It also explicitly demarcates itself from siblings by naming add_components and update_components as later steps.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
States the precondition clearly ("only when those files are absent", "once ply-ui.json exists" for add_components), names the alternatives and the one exception path (refreshEditorKit is the only replacement), and closes with "Always non-interactive." An agent knows both when to call it and when to call something else.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsList Ply componentsARead-onlyIdempotentInspect
List Ply registry components filtered by tier, category, or a case-insensitive substring, sorted by name. Not a fuzzy match: search_components ranks uncertain names, and get_component reads one known name. Does not install. To copy a component into a project, tell the user to run npx ply-ui-cli add .
| Name | Required | Description | Default |
|---|---|---|---|
| q | No | Substring filter on name, description, usage, or keywords (case-insensitive) | |
| tier | No | Filter by license tier | all |
| category | No | Filter by registry category |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotations already declare readOnlyHint, idempotentHint, openWorldHint, and destructiveHint=false, so the safety profile is covered. The description adds useful behavioral boundaries beyond the annotations: results are sorted by name, matching is not fuzzy, and installation must be done with the external CLI command.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded with the core action and filtering behavior, then uses short sentences to route the agent to alternatives and clarify the install boundary. There is no redundant or wasted text.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple three-parameter list tool with full schema coverage and safety annotations, the description covers selection, filtering, sorting, and the non-install boundary well. It does not describe the exact shape of returned component records, which is a minor gap because no output schema exists.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, and the schema fully documents q, tier, and category including enums and defaults. The description mentions the filter dimensions but adds no syntax or format details beyond what the schema already provides.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description gives a specific verb and resource: it lists Ply registry components, with filters and name sorting. It also explicitly distinguishes this tool from search_components and get_component, so an agent can select it without opening sibling schemas.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It states when to use this tool versus alternatives: search_components for uncertain or fuzzy names, get_component for one known component, and the CLI add command for copying into a project. It also explicitly says this tool does not install.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_componentsSearch Ply componentsARead-onlyIdempotentInspect
Rank Ply registry components by a fuzzy or token match when the name is uncertain (for example "dialog modal"). Not a category browse: list_components filters by tier, category, or substring, and get_component reads one known name. Does not install. To copy a match into a project, tell the user to run npx ply-ui-cli add (or local stdio add_components).
| Name | Required | Description | Default |
|---|---|---|---|
| tier | No | Filter by license tier | all |
| limit | No | Maximum ranked matches to return (1-40). Defaults to 12. | |
| query | Yes | Natural-language or substring query (e.g. "dialog modal", "button"). Matches name, description, usage, and keywords. | |
| category | No | Filter by registry category |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, non-destructive, open-world behavior; the description adds the valuable negative guarantee "Does not install" and points to the correct mechanism for the mutating step (npx ply-ui-cli add or add_components). It doesn't say how ranking or tie-breaking works or whether results are paginated, which keeps it below a 5.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three short sentences, zero filler: purpose and match mode first, sibling differentiation second, side-effect and follow-up action last. Every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a 4-param search tool with full schema coverage and rich annotations, nothing an agent needs to choose and invoke it correctly is missing; result ordering is implied by "rank" and no output schema exists to explain.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, including the query param's natural-language/substring semantics and the limit range, so the schema already carries parameter meaning. The description only echoes the query example ("dialog modal") and says nothing about tier or category beyond what the enum descriptions provide, so baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ("Rank Ply registry components") plus the matching mode (fuzzy or token match), and explicitly contrasts itself with list_components and get_component by name.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives the trigger condition ("when the name is uncertain"), an example query, explicit exclusions ("Not a category browse"), and names both alternative tools with their respective use cases. Also covers the downstream action: instruct the user to run the CLI add command.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
update_componentsUpdate installed Ply componentsADestructiveInspect
Apply upstream changes to tracked Ply component copies (ply-ui-cli update --yes). diff_components reports the same drift and writes nothing. Untouched files take upstream. Conflicts stay local and the CLI exits non-zero unless force or merge. Local-only edits skip unless overwriteLocal. Hosts that can ask confirm force and overwriteLocal before those flags replace files. structuredContent.files is one result per file line.
| Name | Required | Description | Default |
|---|---|---|---|
| cwd | No | Project root containing ply-ui.json (defaults to MCP process cwd / PLY_CWD) | |
| force | No | On conflict (both local and upstream changed), take the upstream version. Does not revert local-only edits. | |
| merge | No | On conflict, apply a 3-way merge using the installed snapshot (`--merge`). force still wins. | |
| names | No | Tracked component names to update. Omit or pass [] to update every component in ply-ui-lock.json. | |
| overwriteLocal | No | Also revert files you edited that upstream did not change (`--overwrite-local`). Default skips those files. |
Output Schema
| Name | Required | Description |
|---|---|---|
| ok | Yes | |
| files | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Goes well past the destructiveHint=true annotation by explaining exactly what gets replaced (untouched files take upstream), what stays (conflicts remain local, non-zero exit unless force or merge), what is skipped (local-only edits unless overwriteLocal), and that the host confirms before destructive flags fire. This is substantial behavioral context an agent could not infer from annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Front-loads the core action, then layers conditions in short clauses; every sentence carries information. It is telegraphic to the point of being terse, which slightly raises parsing effort for a first-time reader.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a destructive, multi-flag mutation tool this covers the essentials: precedence rules, exit behavior, skip rules, confirmation requirements, and the shape of structuredContent.files. A separate output schema exists, and the description's one-line note about per-file results is enough to orient the agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the baseline is 3; the description still adds value by describing flag precedence (force wins over merge) and the interactive confirmation behavior around force and overwriteLocal. It stops short of restating names/cwd semantics, but those are already well documented in the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource — apply upstream changes to tracked Ply component copies — and ties it to the underlying CLI command, so there is no ambiguity about what it does. It also contrasts itself with the read-only sibling in the same breath.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly names diff_components as the non-writing alternative that reports the same drift, which lets an agent route between 'inspect' and 'apply' without reading either schema. The force/merge/overwriteLocal clauses further pin down when each mode is appropriate.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
2 tool updates
v0.1.1- Changed
diff_components1 field changed- changed
Output schema / (root)Previous value: -nullNew value: +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "additionalProperties": {}, + "properties": { + "files": { + "items": { + "additionalProperties": {}, + "properties": { + "component": { + "type": "string" + }, + "path": { + "type": "string" + }, + "status": { + "enum": [ + "upstream-changed", + "locally-modified", + "conflict", + "new-upstream", + "removed-upstream", + "missing-locally" + ], + "type": "string" + } + }, + "required": [ + "component", + "path", + "status" + ], + "type": "object" + }, + "type": "array" + }, + "ok": { + "type": "boolean" + } + }, + "required": [ + "ok", + "files" + ], + "type": "object" +}
- Changed
search_components1 field changed- added
Input schema / properties / limit / descriptionAdded value: +"Maximum ranked matches to return (1-40). Defaults to 12."
8 tool updates
v0.1.0- First observed
add_components - First observed
diff_components - First observed
doctor - First observed
get_component - First observed
init_project - First observed
list_components - First observed
search_components - First observed
update_components
TDQS
Scored across 8 tools
The tools have clearly distinct purposes, and the descriptions explicitly disambiguate the easily confused groups: list/search/get for discovery and doctor/diff/update for diagnostics and changes. Each tool also states what it does not do and which sibling tool handles that adjacent case.
Most names follow a predictable snake_case verb_noun pattern such as list_components, get_component, add_components, and update_components. doctor is a noun-style outlier, though it is a conventional diagnostic command name.
Eight tools are well-scoped for a UI component registry and project setup server. Each tool covers a meaningful workflow step without obvious redundancy.
The surface covers project initialization, diagnostics, component discovery, installation, drift detection, and updates. Minor gaps remain, such as no explicit remove/uninstall operation, and init_project references refreshEditorKit even though no such tool appears in the set.
Maintenance
Related MCP Connectors
Beamline UI installs React UI code into your own repository: 200+ components and 50+ complete screens by Danylo Pravda. Editable source lands in src/ui/beamline; compiled archives live in your app's .beamline/packages/. Commit those files with your app. Nothing at runtime calls Beamline servers. The hosted MCP server is an optional discovery and installation tool for your coding agent; the shadcn CLI installs the same parts. Nine looks, dark and light. The Complete System is $49 launch price, plus VAT or sales tax where it applies: one payment for one person's Beamline account, MCP, library, installs and updates, with lifetime updates for as long as we publish the purchased system. Teammates, contractors and clients may use, edit, build and ship the installed code as part of that app. They need their own licence for Beamline access or to take its parts into other apps. The free sample remains MIT, including commercial use. https://beamline.io
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
- noslopUIOAuthcom.noslopui
Hand-crafted UI components and design systems for agents, so builds don't look like AI slop.
Mlola UI components, tokens and design rules for coding agents, with a markup checker
Related MCP Servers
- FlicenseNot gradedqualityDmaintenanceEnables dynamic exploration of Angular library components by reading and analyzing the public API exports. Provides tools to list available components and retrieve detailed component information.-

@event4u/agent-configofficial
AlicenseAqualityAmaintenanceUniversal AI Agent OS — governed skills, rules, and commands for AI coding assistants (Claude Code, Augment, Cursor, Copilot, Windsurf). Read-only MCP bridge serves prompts and resources from a release-pinned content bundle.26328 npm12MIT- AlicenseAqualityCmaintenanceA secure MCP server that gives AI coding assistants direct access to the shadcn/ui registry, enabling fetching, installing, and wiring up components without switching context.85 npm4MIT
- FlicenseAqualityNot gradedmaintenanceMCP server enabling AI agents to search, retrieve details, and compare UI components from 13 popular UI libraries.3-